サイトに設置されているformが実行されたことを検知して、KARTE側にイベントを飛ばすことができます。

フォームタグの概要

  • サイト上のformが実行されたタイミングで、formで送られるデータをKARTE側にも送信することができるタグです。
  • サイト上のformはCSSセレクタで指定します。
  • form上で入力されるデータで、KARTE側に送信したくないデータは送信対象から除外することができます。

※サイト上にあるformの実装によっては、フォームタグを使用できない場合があります。例えば、''を使わずにform送信を行なっている場合、正常にフォームタグが実行されないケースがあります。

フォームタグの雛形

formが存在するページの、計測タグが読み込まれる場所以降に、以下のような形式のタグを出力します。

<script type="text/javascript">
tracker.form("「トラッキング対象となるformのCSSセレクタ」", {
    // トラッキングする場合は必須
    send_data: true,
    // 必須: トラッキングされるKARTEのイベント名（他のフォームタグ経由イベントと区別するため）
    event_name: "「KARTEのイベント名」",
    // 任意: トラッキングしたくないパラメータ
    stop_words: ['foo', 'bar'],  
    // 任意: データに対する前処理を定義し、returnされたObjectを送信する場合に設定 (この例では、トラッキングするパラメータの名称を変換している)  
    pre: function(data) {  
        data.new_name = data.old_name;  
        delete data.old_name;  
        return data;  
    }
});
</script>

フォームタグから送信されるデータ

「フォームタグの雛形」の形式で正常にフォームタグが出力されたページでは、 form送信時にevent_nameで指定したイベント名で、form自体の情報(action, method, xpath)」と、「form送信データ」がKARTEに自動送信されます。

具体例

フォームタグを用いて、form実行時に送られるuser_idとemailを元に、ユーザータグと同じイベントを発生させる例を紹介します。
なお、event_nameを"identify"としてイベントを送信すると、KARTE側にユーザータグで送られたイベント情報と同じように処理されます。

サイト側のformで送られるデータ（例）

{  
    "userId": "karte_user",  
    "email": "example@karte.io",  
    "password": "password"  
}

例えば、このformで送られるユーザーIDとメールアドレスを、ユーザー情報としてKARTEに送信したいとします。
KARTEのユーザータグの仕様では、ユーザーIDは"user_id"という名前で送信する必要があります。
しかし、このformでは、"userId"という名前になっています。

また、"password"はKARTEにトラッキングするデータからは除外しなければなりません。
※inputタグでtype="password"が設定されている場合は、デフォルトでKARTE側への情報送信はされません。

user_idとemailを取得して、ユーザー情報としてKARTEに送信するためフォームタグ（例）

    tracker.form("#form", {  
        send_data: true,  
        event_name: "identify",  
        stop_words: ['password'],  
        pre: function(data) {  
            data.user_id = data.userId;  
            delete data.userId;  
            return data;  
        }  
    });

ユーザータグのイベントとしてKARTEに情報を送信するために、"event_name"を"identify"に設定しています。

また、"stop_words"に"password"を設定することで、トラッキング対象から外しています。

加えて、"pre"に指定している関数の中で、"userId"として格納されていたユーザーIDを"user_id"という名前で登録し、元の"userId"を削除しています。

この際、returnされたdataというオブジェクトが実際に送信されるパラメータとなります。

KARTE側で発生するユーザータグ("identify")イベント（例）

    pre class=”json-preview”>{
    “action”: {
    “url”: “https://karte.io/form/test”,
    “protocol”: “https”,
    “host”: “karte.io”,
    “path”: “form/test”,
    “anchor”: “”,
    “query”: “”,
    “queryKey”: {}
    },
    “method”: “get”,
    “xpath”: “//*[@id=”trackerform””]””