Search
Duplicate
💚

ebisumart(エビスマート)

👨‍💻
ebisumartさんの場合、会員情報の連携ができ、接客チャット対応時に閲覧できたり、会員情報でフィルタリングして、実店舗のように適切なお客様に話しかけできます! ・名前 ・メールアドレス ・携帯番号 ・会員ランク ・ポイント ・カート内金額 ・カート内商品数 ・郵便番号 ・住所

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の管理画面にログインして、タグマネージャで先ほどのタグを設置しましょう

1.
データ解析 > タグマネージャ > タグの新規登録/一覧 > 新規登録 をクリックして、タグマネージャー の新規登録画面に移動します
2. 以下のように項目を設定していきましょう!
以下の例を参考にしつつ、タグコードとタグ名にチャネルトークに関連するコードだとわかりやすいように任意のテキストを設定します
タグタイプ:カスタムHTML に設定
アカウント名:空欄(使用しないため)
タグHTMLに先ほどコピーしたコード(YOUR_PLUGIN_KEY が1. の手順でコピーしたPlugin Keyに変更ずみのもの)をペースとします
タグ出力箇所:下部
タグ表示ルール:全ページ表示
タグ非表示ルール:選択してください のまま変更しなくて大丈夫です
3. 確認ボタンをクリック
4. 更新ボタンをクリックして保存します!

4. 以下のコードをデスクトップのテンプレートのHTMLに挿入していきます

👨‍💻
ここからは、なるべくエンジニアさんにお手伝いいただきましょう!
1.
コンテンツ管理 > テンプレート管理> view > userwebをクリックして、パソコン画面のテンプレートファイルをカスタマイズしていきます!
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
3. commonフォルダ内のfooter.xhtmlファイルに移動して、コードの一番下までスクロールしましょう。以下を参考にしながら、フッターENDと書かれている手前の行に先ほどのコードをペースとします!保存してプレビューフォルダにコピーをクリックして、保存します。
4. footer_cart.xhtmlファイルに移動して、3. の手順とまったく同じようにコードを追加・保存してプレビューフォルダにコピーをします!
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
6. member_mypage.xhtmlのファイルに移動して、コードの一番下までスクロールしましょう。以下を参考にしながら、</body>と書かれている手前の行に先ほどのコードをペースとします! 保存してプレビューフォルダにコピーをクリックして、保存します。
7. cart_seisan.xhtmlcart_confirm.xhtmlcart_result.xhtml のファイルに移動して、6. の手順とまったく同じようにコードを追加・保存してプレビューフォルダにコピーをします!

5. 4. の手順と全く同じように、今度はスマートフォンののテンプレートのHTMLに挿入していきます!

コンテンツ管理 > テンプレート管理> view > smartphoneをクリックして、スマホ画面のテンプレートファイルをカスタマイズしていきます!4. の手順の1.~7.の作業を全く同じようにsmartphoneのフォルダでも行ってください!

6. プレビューやビューでチャネルトークが表示されるのを確認したら設置完了です!!

おつかれさまでした!ファンを作る、実店舗のような接客をさあ、始めましょう!👏
Made with 💕 and Oopy