アプリで設置する方法
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連携の場合、データはどんなタイミングで更新していますか?
データはエンドユーザーがページ遷移などをして、ページ読み込みが行われるタイミングで都度更新されるようになっております!
応用設定
注文ページにコードを追加した場合、連携される情報は以下の通りです!
スクリプトで設置する方法
•
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)にもチャネルトークを設置できます!
注文ページにコードを追加した場合に連携される情報は以下の通りです!
顧客情報をインポートする方法
インポート方法
簡単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)にチャネルトークのスクリプトを設置し、追加情報を取得している場合はどうなりますか?
以上でインポートについてのガイドは終わりです!
不明点ございましたらお気軽にチャットからご質問してください