特定の顧客だけにチャットボタンを表示する方法

💡

特定の顧客だけにチャットボタン自体を表示したい場合には、チャネルトークのboot(起動)コードを、チャットボタン表示させたいお客様がサイトにアクセスしているときにだけ挿入するように、出しわけをすることで可能です！エンジニアの方に直接御社のコードをカスタマイズしていただくか、Googleタグマネージャーをしましょう！ ※チャネルトーク単体では難しいです

Googleタグマネージャーを使う方法

すでにGoogleタグマネージャーがインストールされているという前提でガイドいたします！

datalayerを使う方法です。

1. 以下のように御社のサイトにて、GTMのdatalayerに顧客Idなどを渡しましょう(この作業はエンジニアの方が必要です！)

<script>
dataLayer.push({
	'memberId': 'fdhu341hkh3143k31',
	'name': 'aya',
	'email': 'aya@channel.io',
	'mobileNumber': '+819012345678'
	// その他会員情報を連携したい任意の情報をセット
})
</script>

参照：https://developers.google.com/tag-manager/devguide?hl=ja

2. GTMの管理画面から上記のdatalayerの値を渡す変数を登録しましょう

まずは変数の新規作成ボタンを押しましょう

2. 変数を登録

💡

nameやemail、mobileNumber、その他任意でdatalayerに追加した項目も同じように全て登録します！

3. トリガーを作成しましょう

新規作成ボタンをクリック

2. 特定の顧客Id(memberId)の顧客がページビュー(ページ閲覧)する場合をトリガーに設定

💡

このmemberIdのフィルタリングで、チャネルトークを表示させたい特定の顧客Idをターゲティングしましょう

4. タグを作成しましょう

新規作成ボタンをクリック

2. タグを作成しましょう

チャネルトークのスクリプトの赤ワク部分をカスタマイズして、挿入してください！

サンプルコード

<!-- Channel Plugin Scripts -->
<script>
  (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', {
    "pluginKey": "YOUR_PLUGIN_KEY", //please fill with your plugin key
    "memberId": "{{memberId}}", //fill with user id
    "profile": {
      "name": "{{name}}", //fill with user name
      "email":"{{email}}",
      "mobileNumber": "{{mobileNumber}}", //fill with user phone number
    }
  });
</script>
<!-- End Channel Plugin -->

💡

・"YOUR_PLUGIN_KEY"には、以下のイメージを参考にあなたのチャネルのPlugin Keyを挿入してください！