スタートガイド
カスタムイベントタグの設置
計測タグに加えてカスタムイベントタグを設置することで、ユーザーの行動や属性を追加で取得することができます。
カスタムイベントタグとは？
計測タグが設置されたWebページでは、view（閲覧）イベントが自動で発生します。
さらにviewイベント以外のイベントをWebページ上から取得するには、カスタムイベントタグの設置が必要となります。
下記のようなイベントは、基本的にはカスタムイベントタグをWebページ上に設置することで取得します。
- ユーザーの新規会員登録
- 資料請求やキャンペーンへの申し込み
- ユーザーの会員ランクの昇格/降格
- ページ遷移のないクリックイベント
- カート商品の追加や削除
なお、各イベントはイベント名だけではなく、そのイベントに関連する値を連携するためのフィールドを持つことができます。
また各フィールドには、どのような性質のデータを連携するのかを定める「データ型」が、イベント送信時に設定されます。
詳しくはこちらをご参照ください。
カスタムイベントタグを設置する場所
該当のイベントを発生させたいページに設置してください。
カスタムイベントタグを実行するタイミング
ユーザーの動作をイベントとして取得したい場合、その動作が発生したタイミングでタグを実行してください。
また、カスタムイベントタグは必ず計測タグの後に実行されるように設置する必要があります。その理由は、計測タグの読み込みによってページ上に用意される関数を、カスタムイベントタグは利用しているからです。
カスタムイベントタグの記述方法
下記のコードは、会員登録が完了したことを表すイベントを発生させるためのサンプルです
<script type="text/javascript">krt('send', 'signup');</script>上記のタグが正常に実行されると、KARTEにはsignupという名前のイベントが発生します。
- イベント名には半角小文字英字(a-z)、半角数字(0-9)と'_'のみが使用できます。
- イベント名には日本語などのマルチバイト文字を使用しないでください。
カスタムイベントタグの設置サンプル
例1 : ユーザーの新規会員登録の計測
新規会員登録時にsignupイベントを発生させるタグサンプルです。
<script type="text/javascript">krt('send', 'signup');</script>例2 : 資料請求や申し込みの計測
資料請求時にrequestイベントを発生させるタグサンプルです。
<script type="text/javascript">krt('send', 'request');</script>キャンペーンへの申し込みなどを計測したいといった場合では、「申し込まれたキャンペーンのIDも計測したい」という場合が想定されます。
その場合には以下の様なカスタムイベントを作成することで、カスタムイベント発生時の属性としてIDを計測することも可能です。
<script type="text/javascript">krt('send', 'register', { id: "campaign123", plan: "silver"});</script>registerというイベントでキャンペーンへの申し込みを定義し、その属性としてidキーに対し、キャンペーンIDcampaign123を付与しています
パラメータは自由に追加可能ですが、タグで使用できないパラメータ は追加できません。- KARTE管理画面上で
registerというイベント名が表示されます
サイト上のイベントを区別しやすいイベント名を設定してください。 - KARTE管理画面上で表示される
registerイベントにはplanという名称、sliverという値が紐付いて表示されます
イベント内で区別しやすい名称を設定してください。registerというカスタムイベントはplan、silverという文字列 を送信していますが、文字列だけではなく数値や日付、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() { krt('send', 'onChange', { selected: this.selectedIndex }); }, 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() { krt('send', 'onFocus', { selected: this.selectedIndex }); } // イベントを設定 inputElement.addEventListener("focus", action) ;})();</script>