下記のようなイベントは、任意のカスタムイベントとして計測可能です。
例えば以下のようなアクションが対象となります。

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

該当のイベントを発生させたいページ、またはユーザーの動作をトリガーにタグが実行されるように設定してください。

カスタムイベントタグは必ず「計測タグの後に実行されるように設置」する必要があります

カスタムイベントタグの設置方法

計測タグで定義されるtracker.track("イベント名")という関数を利用してKARTEにイベントを送付します。
計測タグよりも後に設置しなければならない理由はそのためです。

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

tracker.track('signup')

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

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

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

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

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

<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>

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

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

<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>

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

<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>
  • registerというイベントでキャンペーンへの申し込みを定義し、その属性としてidキーに対し、キャンペーンIDcampaign123を付与しています
    パラメータは自由に追加可能ですが、タグで使用できないパラメータ は追加できません。
  • KARTE管理画面上でregisterというイベント名が表示されます
    サイト上のイベントを区別しやすいイベント名を設定してください。
  • KARTE管理画面上で表示されるregisterイベントにはplanという名称、sliverという値が紐付いて表示されます
    イベント内で区別しやすい名称を設定してください。
    registerというカスタムイベントはplansilverという 文字列 を送信していますが、文字列だけではなく数値や日付、true/falseの真理値という形式でイベントを計測することもできます。

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

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

<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>

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

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

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

<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>