ebisumartをお使いですと、会員情報の連携ができます！
接客チャット対応時に閲覧・会員情報でフィルタリングして、実店舗のように適切なお客様に話しかけが可能です！
【連携される情報】
・会員ID
・名前
・メールアドレス
・携帯番号
・会員ランク
・ポイント
・カート内金額
・カート内商品数
・郵便番号
・住所
1. チャネルトークにログイン後、Plugin Keyをコピーしましょう
チャネルの設定 → チャットボタンの管理 → チャットボタンのインストールの順にクリックし、"Plugin Key"をコピーします
2. 以下のコードをコピーして、YOUR_PLUGIN_KEY の箇所(上から12行目)を先ほどコピーしたPlugin Keyに入れ替えておきましょう
<!-- Channel Plugin Scripts -->
<script>
function ch_parsePureNumber(number) {
var ch_number = parseFloat(number.replace(/[^0-9\.]+/g, ''));
if (ch_number || ch_number === 0) {
return ch_number;
}
return undefined;
}
var settings = {
'pluginKey': 'YOUR_PLUGIN_KEY',
'profile' : {
'availableMileage': ch_parsePureNumber(document.getElementById("ebisu_user_point").textContent),
'cartPrice': ch_parsePureNumber(document.getElementById("ebisu_user_cart_price").textContent),
'cartCount': ch_parsePureNumber(document.getElementById("ebisu_user_cart_item_count").textContent),
}
};
if (document.getElementById("ebisu_user_id")) {
settings.memberId = document.getElementById("ebisu_user_id").textContent;
settings.profile.name = document.getElementById("ebisu_user_name").textContent;
settings.profile.groupName = document.getElementById("ebisu_user_rank").textContent || undefined;
settings.profile.email = document.getElementById("ebisu_user_pc_email") ? document.getElementById("ebisu_user_pc_email").textContent : undefined;
settings.profile.mobileNumber = document.getElementById("ebisu_user_mobile_number") ? `+81${document.getElementById("ebisu_user_mobile_number").textContent.slice(1)}` : undefined;
settings.profile.zipCode = document.getElementById("ebisu_user_zip") ? document.getElementById("ebisu_user_zip").textContent : undefined;
settings.profile.address = document.getElementById("ebisu_user_address") ? document.getElementById("ebisu_user_address").textContent : undefined;
}
(function() {
var w = window;
if (w.ChannelIO) {
return (window.console.error || window.console.log || function(){})('ChannelIO script included twice.');
}
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);
}
})();
ChannelIO('boot', settings);
</script>
<!-- End Channel Plugin -->
JavaScript
3. ebisumartの管理画面にログインして、タグマネージャで先ほどのタグを設置しましょう
3-1.データ解析 > タグマネージャ > タグの新規登録/一覧 > 新規登録 をクリックして、タグマネージャー の新規登録画面に移動します
3-2. 以下のように項目を設定していきましょう！
•
以下の例を参考にしつつ、タグコードとタグ名にチャネルトークに関連するコードだとわかりやすいように任意のテキストを設定します
•
タグタイプ：カスタムHTML に設定
•
アカウント名：空欄（使用しないため）
•
タグHTMLに先ほどコピーしたコード(YOUR_PLUGIN_KEY が1. の手順でコピーしたPlugin Keyに変更ずみのもの)をペースとします
•
タグ出力箇所：下部
•
タグ表示ルール：全ページ表示
•
タグ非表示ルール：選択してください のまま変更しなくて大丈夫です
3-3. 確認ボタンをクリック
4. 更新ボタンをクリックして保存します！
4. 以下のコードをデスクトップのテンプレートのHTMLに挿入していきます
ここからは、なるべくエンジニアさんにお手伝いいただきましょう！
4-1. コンテンツ管理 > テンプレート管理> view > userwebをクリックして、パソコン画面のテンプレートファイルをカスタマイズしていきます！
4-2. 以下のコードをコピーしておいてください！
<span m:id="common.IF_MEMBER_LOGIN" style="display:none;">
<span id="ebisu_user_id" style="display:none;"><span m:id="common.MEMBER_ID_HERE"></span></span>
<span id="ebisu_user_name" style="display:none;"><span m:id="common.MEMBER_NAME_HERE"></span></span>
<span id="ebisu_user_rank" style="display:none;"><span m:id="common.MEMBER_RANK_NAME_HERE"></span></span>
</span>
<span id="ebisu_user_point" style="display:none;"><span m:id="common.POINT_HERE"></span></span>
<span id="ebisu_user_cart_price" style="display:none;"><span m:id="common.CART_SYOKEI_ZEIKOMI_HERE"></span></span>
<span id="ebisu_user_cart_item_count" style="display:none;"><span m:id="common.CART_ITEM_COUNT_HERE"></span></span>
HTML
4-3. commonフォルダ内のfooter.xhtmlファイルに移動して、コードの一番下までスクロールしましょう。以下を参考にしながら、フッターENDと書かれている手前の行に先ほどのコードをペースとします！保存してプレビューフォルダにコピーをクリックして、保存します
4-4. footer_cart.xhtmlファイルに移動して、3. の手順とまったく同じようにコードを追加・保存してプレビューフォルダにコピーをします！
4-5. 次に、以下のコードをコピーしておきます
<span m:id="common.IF_MEMBER_LOGIN" style="display:none;">
<span id="ebisu_user_pc_email" style="display:none;"><span m:id="PC_MAIL_HERE"></span></span>
<span id="ebisu_user_mobile_number" style="display:none;"><span m:id="TEL_HERE"></span></span>
<span id="ebisu_user_zip" style="display:none;"><span m:id="ZIP_HERE"></span></span>
<span id="ebisu_user_address" style="display:none;"><span m:id="ADDRESS1_HERE"></span><span m:id="ADDRESS2_HERE"></span><span m:id="ADDRESS3_HERE"></span></span>
</span>
HTML
4-6. member_mypage.xhtmlのファイルに移動して、コードの一番下までスクロールしましょう。以下を参考にしながら、</body>と書かれている手前の行に先ほどのコードをペースとします！ 保存してプレビューフォルダにコピーをクリックして、保存します
4-7. cart_seisan.xhtml、cart_confirm.xhtml、cart_result.xhtml のファイルに移動して、6. の手順とまったく同じようにコードを追加・保存してプレビューフォルダにコピーをします！
5. 4. の手順と全く同じように、今度はスマートフォンののテンプレートのHTMLに挿入していきます！
コンテンツ管理 > テンプレート管理> view > smartphoneをクリックして、スマホ画面のテンプレートファイルをカスタマイズしていきます！4. の手順の1.~7.の作業を全く同じようにsmartphoneのフォルダでも行ってください！
6. プレビューやビューでチャネルトークが表示されるのを確認したら設置完了です！！
おつかれさまでした！ファンを作る、実店舗のような接客をさあ、始めましょう！
