//
Search
▪️

Shopify

目次

アプリで設置する方法

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

 連携される情報

自動連携される会員情報
データーキー
説明
備考
memberId
各会員を区分する固定のID
extMember
Shopifyでの会員可否
- True : 会員- False : 非会員
name
会員の名前
firstName
会員の名
lastName
会員の姓
email
会員のメールアドレス
mobileNumber
会員の携帯電話番号
cartPrice
会員の現在のカート内金額
cartCount
会員の現在のカート内商品数
totalPurchaseAmount
会員の累計注文金額
totalPurchaseCount
会員の累計注文回数
lastCheckoutCompletedAt
最終注文時間
チャネルトークを設置後、顧客が実際に注文をしたことがある場合のみ計測されます
tags
Shopifyのタグ
unsubscribeEmail
メールの受信可否
unsubscribeTexting
SMSの受信可否
shippingCity
基本配送地の市区町村
顧客が直接入力した情報です
shippingProvince
基本配送地の都道府県
管理画面側で選択可能
shippingCountry
基本配送地の国家
shippingZipCode
基本配送地の郵便番号
顧客情報をインポートすることで連携される情報
Shopifyから自動で連携できる情報は、チャネルトークを設置した後にサイトにログインしたお客さんの情報です。
もしチャネルトーク導入前のお客様情報を連携したい場合は、こちらのガイドからインポート作業を行なってください。その際に連携される情報は以下です
データーキー
説明
備考
memberId
各会員を区分する固定のID
extMember
Shopifyでの会員可否
- True : 会員- False : 非会員
name
会員の名前
firstName
会員の名
lastName
会員の姓
email
会員のメールアドレス
mobileNumber
会員の携帯電話番号
totalPurchaseAmount
会員の累計注文金額
totalPurchaseCount
会員の累計注文回数
tags
Shopifyのタグ
unsubscribeEmail
メールの受信可否
unsubscribeTexting
SMSの受信可否
shippingCity
基本配送地の市区町村
顧客が直接入力した情報です
shippingProvince
基本配送地の都道府県
管理画面側で選択可能
shippingCountry
基本配送地の国家
shippingZipCode
基本配送地の郵便番号
自動連携されるイベント イベントとは:接客チャットでお問い合わせしたお客様が今までどのページをご覧になっていたのか、どのページからチャットに流入したのか確認できる機能です
データキー
説明
SignUp
会員登録
- id : 会員ID - name : 会員の名前
ProductView
商品詳細ページ閲覧
- id : 商品ID - name : 商品名 - amount : 商品価格
CheckoutBegin
注文開始(チェックアウト開始)
顧客が注文のステップを開始した時。非会員の場合は連携されません。
CheckoutComplete
注文完了 (顧客が注文完了したタイミングで)
- id : 注文番号 - paymentMethods : 決済手段(クレジットカード、Paypalなど) - products : 各商品情報リスト(商品名、個数、単価、商品番号) - productsSummary : 注文商品の要約 - totalAmount : 購入全額 - shippingAmount : 配送費
Purchase
購入完了
ログイン中の会員顧客のみ連携。商品情報まで確認可能です。
よくある質問
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:名前
firstName: 名
lastName: 姓
email:メール
mobileNumber:携帯番号
cartPrice:カート内金額
cartCount:カート内商品数
totalPurchaseAmount:累計注文金額
totalPurchaseCount:累計注文回数
tags:Shopifyの顧客タグ
自動連携されるイベント イベントとは:接客チャットでお問い合わせしたお客様が今までどのページをご覧になっていたのか、どのページからチャットに流入したのか確認できる機能です
SignUp:会員登録
ProductView:商品詳細ページ閲覧(該当の商品情報まで見えます)
CheckoutBegin:チェックアウト開始 ログイン中の会員顧客のみ連携
CheckoutComplete:注文完了 ログイン中の会員顧客のみ連携
Purchase:購入完了 ログイン中の会員顧客のみ連携

FAQ

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