Coming Soon!💕 現在、チャネルトークのShopifyアプリを申請しています。申請が終わり次第、こちらに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 -->

チェックアウトページの注文完了ページ(/thank_you)にもチャネルトークを設置できます!

⚙設定>チェックアウト>注文処理>追加スクリプト に上記と同じコードを入れてください!

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/7f440454-26c6-49a5-ba4a-2733bea47a9c/_2020-12-04_11.57.50.png

Shopify設置方法詳細

https://channel.io/ja/blog/shopify-channel-talk

https://channel.io/ja/blog/shopify-channel-talk