計測タグに加えてカスタムイベントタグを設置することで、ユーザーの行動や属性を追加で取得することができます。

タグv2は、現在一部のプロジェクトに限定して先行提供しています。
特別な案内があった場合を除いて、タグv2ではなく従来の計測タグやカスタムイベントタグ(v1)を導入してください。
https://support.karte.io/post/7E5yZwHWroaDTDmd4f0SDx

タグのバージョンについて

タグv2は、現在一部のプロジェクトに限定して先行提供しています。
特別な案内があった場合を除いて、タグv2ではなく従来の計測タグやカスタムイベントタグ(v1)を導入してください。

詳細: タグv2とは? | KARTEサポートサイト

カスタムイベントタグとは?

計測タグが設置されたWebページでは、view(閲覧)イベントが自動で発生します。

さらにviewイベント以外のイベントをWebページ上から取得するには、カスタムイベントタグの設置が必要となります。

下記のようなイベントは、基本的にはカスタムイベントタグをWebページ上に設置することで取得します。

カスタムイベントタグを設置する場所

該当のイベントを発生させたいページに設置してください。

カスタムイベントタグを実行するタイミング

ユーザーの動作をイベントとして取得したい場合、その動作が発生したタイミングでタグを実行してください。

また、カスタムイベントタグは必ず計測タグの後に実行されるように設置する必要があります。その理由は、計測タグの読み込みによってページ上に用意される関数を、カスタムイベントタグは利用しているからです。

カスタムイベントタグの記述方法

下記のコードは、会員登録が完了したことを表すイベントを発生させるためのサンプルです

  • タグv1の場合
<script type="text/javascript">
tracker.track('signup')
</script>
  • タグv2の場合
<script type="text/javascript">
krt('send', 'signup');
</script>

上記のタグが正常に実行されると、KARTEにはsignupという名前のイベントが発生します。

- イベント名には半角小文字英字(a-z)、半角数字(0-9)と'_'のみが使用できます。
- イベント名には日本語などのマルチバイト文字を使用しないでください。

カスタムイベントタグの設置サンプル

例1 : ユーザーの新規会員登録の計測

新規会員登録時にsignupイベントを発生させるタグサンプルです。

  • タグv1の場合
<script type="text/javascript">
try {
    tracker.track("signup");
} catch(e) {
    if ('tracker' in window) {
        tracker.track('_error',{ message: e.message });
    } else {
        console.warn('KARTE tracker was not loaded');
    }
}
</script>
  • タグv2の場合
<script type="text/javascript">
try {
    krt('send', 'signup');
} catch(e) {
    if('krt' in window){
        krt('send', '_error', { message: e.message });
    }else{
        console.warn('KARTE tracker was not loaded');
    }
}
</script>

例2 : 資料請求や申し込みの計測

資料請求時にrequestイベントを発生させるタグサンプルです。

  • タグv1の場合
<script type="text/javascript">
try {
    tracker.track("request");
} catch(e) {
    if ('tracker' in window) {
        tracker.track('_error',{ message: e.message });
    } else {
        console.warn('KARTE tracker was not loaded');
    }
}
</script>
  • タグv2の場合
<script type="text/javascript">
try {
    krt('send', 'request');
} catch(e) {
    if('krt' in window){
        krt('send', '_error', { message: e.message });
    }else{
        console.warn('KARTE tracker was not loaded');
    }
}
</script>

キャンペーンへの申し込みなどを計測したいといった場合では、「申し込まれたキャンペーンのIDも計測したい」という場合が想定されます。
その場合には以下の様なカスタムイベントを作成することで、カスタムイベント発生時の属性としてIDを計測することも可能です。

  • タグv1の場合
<script type="text/javascript">
try {
    tracker.track("register",{
        id: "campaign123",
        plan: "silver"
    });
} catch(e) {
    if ('tracker' in window) {
        tracker.track('_error',{ message: e.message });
    } else {
        console.warn('KARTE tracker was not loaded');
    }
}
</script>
  • タグv2の場合
<script type="text/javascript">
try {
    krt('send', 'register',{
        id: "campaign123",
        plan: "silver"
    });
} catch(e) {
    if('krt' in window){
      krt('send', '_error', { message: e.message });
    }else{
      console.warn('KARTE tracker was not loaded');
    }
}
</script>
  • registerというイベントでキャンペーンへの申し込みを定義し、その属性としてidキーに対し、キャンペーンIDcampaign123を付与しています
    パラメータは自由に追加可能ですが、タグで使用できないパラメータ は追加できません。
  • KARTE管理画面上でregisterというイベント名が表示されます
    サイト上のイベントを区別しやすいイベント名を設定してください。
  • KARTE管理画面上で表示されるregisterイベントにはplanという名称、sliverという値が紐付いて表示されます
    イベント内で区別しやすい名称を設定してください。
    registerというカスタムイベントはplansilverという 文字列 を送信していますが、文字列だけではなく数値や日付、true/falseの真理値という形式でイベントを計測することもできます。

例3 : セレクトボックスがクリックされたことをイベントとして送信する

通常、KARTEでイベントを計測する場合は、URL遷移(ページの移動)が必要です。
しかし、URL遷移のないクリックなどを計測することも可能です。
また、その際計測されたイベントを配信のトリガとすることも可能です。

  • タグv1の場合
<html>
<head>
</head>
<body>
<div class="example-box">
<select id="pulldown-menu">
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>
</div>
<script type="text/javascript">
(function(){
    var pulldownMenu = document.getElementById('pulldown-menu');
    pulldownMenu.addEventListener('change',function(){
    try {
        tracker.track("onChange", {
        selected: this.selectedIndex
        });
    } catch(e) {
        if ('tracker' in window) {
          tracker.track('_error',{ message: e.message });
        } else {
          console.warn('KARTE tracker was not loaded');
        }
    }
  },false);
})();
</script>
</body>
</html>
  • タグv2の場合
<html>
<head>
</head>
<body>
<div class="example-box">
<select id="pulldown-menu">
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>
</div>
<script type="text/javascript">
(function(){
    var pulldownMenu = document.getElementById('pulldown-menu');
    pulldownMenu.addEventListener('change',function(){
    try {
        krt('send', 'onChange',{
        selected: this.selectedIndex
        });
    } catch(e) {
        if('krt' in window){
          krt('send', '_error', { message: e.message });
        }else{
          console.warn('KARTE tracker was not loaded');
        }
    }
  },false);
})();
</script>
</body>
</html>

この場合、セレクトボックスが選択された際に"onChange"というカスタムイベントがKARTEに送信されます。
選択された選択肢のインデックス(A=0,B=1...)が"selected"のパラメータとして送信されます。

例4 : 特定のフォームにフォーカスが当たった時にイベントを発生させる

申し込みフォームや、ユーザー登録フォームなど、特定のフォームにフォーカス(入力待機状態)になった時にイベントを発生させる例は以下のとおりです。

  • タグv1の場合
<script type="text/javascript">
(function(){
  // 要素を取得
  var inputElement = document.getElementById("target element id");

  // 処理を定義
  var action = function(){
    try {
      tracker.track("onFocus", {
        selected: this.selectedIndex
      });
    } catch(e) {
      if ('tracker' in window) {
        tracker.track('_error',{ message: e.message });
      } else {
        console.warn('KARTE tracker was not loaded');
      }
    }
  }

  // イベントを設定
  inputElement.addEventListener("focus", action) ;
})();
</script>
  • タグv2の場合
<script type="text/javascript">
(function(){
  // 要素を取得
  var inputElement = document.getElementById("target element id");

  // 処理を定義
  var action = function(){
    try {
      krt('send', 'onFocus',{
        selected: this.selectedIndex
      });
    } catch(e) {
      if('krt' in window){
        krt('send', '_error', { message: e.message });
      }else{
        console.warn('KARTE tracker was not loaded');
      }
    }
  }

  // イベントを設定
  inputElement.addEventListener("focus", action) ;
})();
</script>