Search
Duplicate
▪️

Shopify

目次

アプリで設置する方法

1. Shopify アプリストアのチャネルトーク Shopifyアプリページに移動し、”アプリを追加する”押してください
2. ”アプリをインストール” をクリック
3. "連携する"をクリック
4. ガイドに従って会員登録とワークスペース"チャネル"を作成する
5. 作成したチャネルを選択する
6. さっそくShopifyサイトにチャットボタンを設置する
7. Shopifyサイトに設置が完了しました!
以上でチャネルトークの設置は終了しました! 以下の3点の基本設定を進めていきましょう!
顧客応対するメンバーを招待
設定をはじめる
モバイルアプリのダウンロード https://channel.io/ja/download

 連携される情報

自動連携される会員情報
name:名前
email:メール
mobileNumber:携帯番号
cartPrice:カート内金額
cartCount:カート内商品数
totalPurchaseAmount:累計注文金額
totalPurchaseCount:累計注文回数
tags:Shopifyの顧客タグ
自動連携されるイベント イベントとは:接客チャットでお問い合わせしたお客様が今までどのページをご覧になっていたのか、どのページからチャットに流入したのか確認できる機能です
SignUp:会員登録
BeginCheckout:チェックアウト開始
ログイン中の会員顧客のみ連携
Purchase:購入完了
ログイン中の会員顧客のみ連携
ViewProduct:商品詳細ページ閲覧(該当の商品情報まで見えます)
よくある質問
Q.:shopify連携の場合、データはどんなペースで更新していますか?
データはユーザーがページ遷移などをして、ページ読み込みが行われるタイミングで都度更新されるようになっております!

応用設定

@ チェックアウトページの注文完了ページ(/thank_you)にもチャネルトークを設置できます!
設定>チェックアウト>注文処理>追加スクリプト にこちらのガイドページに記載されているコードを入れてください!
注文ページにコードを追加した場合、連携される情報は以下の通りです!

スクリプトで設置する方法

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設置方法についてブログもご用意しております!ぜひご覧くださいませ!

顧客情報をインポートする方法

 インポート方法

簡単3ステップ 3分で終わります!
【注意!】 Shopifyに、スクリプトでチャネルトークを設置している場合はインポートできません
【注意!】 顧客情報インポートすると、MAUにカウントされます! 契約しているプランのMAUを超過しますと機能が使えなくなりますので、余裕を持ったプラン設定をお願いいたします!
1. 連絡先管理のページを開く
左のタブ上から3番目連絡先管理をクリックします
2. 右上のShopifyからインポートをクリック
マークをクリック→Shopifyからインポートを選択してください!
Shopifyからインポートが活性化されておらずクリックできない場合… Shopifyのアプリで連携されていない可能性があります! 一度確認していただき、Shopifyのアプリで設置しているにも関わらず選択できない場合はチャットでお問合せくださいませ
3. 確認を押す
連絡先の件数によってはインポートに時間がかかります 数分で終わる場合もあれば、数時間かかる時もありますので少し時間を空けてご確認くださいませ!
最後に…インポートが終了するとChannel-botでご案内します!
Channel-botの通知場所は、社内チャットの自分とのチャットルームです
(メッセージ内容)
ごく稀に、インポート完了メッセージが来たあとしばらく経ってから連絡先管理の数字が更新される場合もございますので、数時間時間を空けてご確認くださいませ!
以上でインポート作業は終わりです!
 

連携される情報

Shopifyで取得した以下の顧客情報が自動でチャネルトークに連携されます
自動連携される会員情報
name:名前
email:メール
mobileNumber:携帯番号
cartPrice:カート内金額
cartCount:カート内商品数
totalPurchaseAmount:累計注文金額
totalPurchaseCount:累計注文回数
tags:Shopifyの顧客タグ
自動連携されるイベント イベントとは:接客チャットでお問い合わせしたお客様が今までどのページをご覧になっていたのか、どのページからチャットに流入したのか確認できる機能です
SignUp:会員登録
ProductView:商品詳細ページ閲覧(該当の商品情報まで見えます)
CheckoutBegin:チェックアウト開始 ログイン中の会員顧客のみ連携
CheckoutComplete:注文完了 ログイン中の会員顧客のみ連携
Purchase:購入完了 ログイン中の会員顧客のみ連携

FAQ

既にチャネルトークに顧客情報をインポートしていた場合はどうなりますか?
注文完了ページ(/thankyou)にチャネルトークのスクリプトを設置し、追加情報を取得している場合はどうなりますか?
以上でインポートについてのガイドは終わりです!
不明点ございましたらお気軽にチャットからご質問してください