チャネルトークのShopifyアプリがリリースされました！
アプリで導入されたい方は以下の設置ガイドをご覧ください！
Shopifyの設置コード
Shopifyの場合、以下のコード内の"YOUR_PLUGIN_KEY"のみ変更されて、theme.liquidの</body>の直前にそのまま貼り付けるのをお勧めします！
<!-- Channel Plugin Scripts -->
<script>
(function() {
var w = window;
if (w.ChannelIO) {
return (window.console.error || window.console.log || function(){})('ChannelIO script included twice.');
}
var d = window.document;
var ch = function() {
ch.c(arguments);
};
ch.q = [];
ch.c = function(args) {
ch.q.push(args);
};
w.ChannelIO = ch;
function l() {
if (w.ChannelIOInitialized) {
return;
}
w.ChannelIOInitialized = true;
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'https://cdn.channel.io/plugin/ch-plugin-web.js';
s.charset = 'UTF-8';
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
}
if (document.readyState === 'complete') {
l();
} else if (window.attachEvent) {
window.attachEvent('onload', l);
} else {
window.addEventListener('DOMContentLoaded', l, false);
window.addEventListener('load', l, false);
}
})();
var shopifyCustomerTags = [];
{% for tag in customer.tags %}
var tag = '{{ tag }}';
shopifyCustomerTags.push(tag);
{% endfor %}
var cartProductIds = [];
{% for item in cart.items %}
var itemId = '{{ item.product_id }}'
cartProductIds.push(itemId);
{% endfor %}
var orderedProductIdsSet = new Set();
var orderedProductVariantIdsSet = new Set();
{% for order in customer.orders %}
{% for item in order.line_items %}
var itemId = '{{ item.product_id }}'
var variantId = '{{ item.variant_id }}'
orderedProductIdsSet.add(itemId);
orderedProductVariantIdsSet.add(variantId);
{% endfor %}
{% endfor %}
var orderedProductIds = Array.from(orderedProductIdsSet.values())
var orderedProductVariantIds = Array.from(orderedProductVariantIdsSet.values())
var lastOrderCreatedAt = new Date("{{customer.last_order.created_at}}")
var lastOrderCancelledAt = new Date("{{customer.last_order.cancelled_at}}")
ChannelIO('boot', {
"pluginKey": "YOUR_PLUGIN_KEY", //please fill with your plugin key
"memberId": "{{customer.id}}",
"mobileOpenUI": "iframe", //モバイルでチャネルトークを開く際、iframe形式にしたい場合は追加してください。別タブで開く場合は行を削除してください
"profile": {
"name": "{{customer.name}}", //string
"email": "{{customer.email}}", //string
{% if customer.phone %}
"mobileNumber": "{{customer.phone}}", //string
{% else %}
"mobileNumber": "{{customer.default_address.phone}}", //string
{% endif %}
"defaultAddressProvince": "{{customer.default_address.province}}", //string 配送先都市
"defaultAddressCountry": "{{customer.default_address.country}}", //string 配送先国
"totalPurchaseAmount": parseInt("{{customer.total_spent | money_without_currency }}".replace(/,/g, '')), //number 累計支払い金額
"totalPurchaseCount": {{customer.orders_count | default: 0}}, //number 累計注文回数
"lastOrderPrice": parseInt("{{customer.last_order.total_price | money_without_currency | default: 0}}".replace(/,/g, '')), //number 最終注文金額
"lastOrderNumber": "{{customer.last_order.order_number}}", //number 最終注文番号
"lastOrderShippingPrice": parseInt("{{customer.last_order.shipping_price | money_without_currency | default: 0}}".replace(/,/g, '')), //number 最終注文配送料
"lastOrderCreatedAt": lastOrderCreatedAt.getTime(), //date 最終注文日時
"lastOrderCancelReason": "{{customer.last_order.cancel_reason}}", //string 最終注文取消理由
"lastOrderCancelledAt": lastOrderCancelledAt.getTime(), //date 最終注文取消日時
"cartPrice": parseInt("{{cart.total_price | money_without_currency | default: 0}}".replace(/,/g, '')), //number カート内金額
"cartCount": {{cart.item_count | default: 0}}, //number カート内商品数
"tags": shopifyCustomerTags, //list Shopify顧客タグ
"cartProductIds" : cartProductIds, //list カート内商品ID
"orderedProductIds" : orderedProductIds, //list 注文した全商品ID
"orderedProductVariantIds" : orderedProductVariantIds //list 注文した全バリエーションID
}
});
</script>
<!-- End Channel Plugin -->
JavaScript
チェックアウトページの注文完了ページ(/thank_you)にもチャネルトークを設置できます！
設定>チェックアウト>注文処理>追加スクリプト に上記と同じコードを入れてください！
Shopify設置方法についてブログもご用意しております！ぜひご覧くださいませ！
