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

  • 例
    • 資料請求フォームや来店予約フォームの入力内容を、KARTEのユーザー情報として連携する

form送信したことをイベントとして発生させる

  • form送信内容を含めずにform送信したこと自体をイベントとしてトラッキングしたい場合は、主にフィルターイベントを使用します
  • form送信完了画面のURLパスを閲覧したことをトリガーに発火するフィルターイベントを作成します
  • 詳しくは下記をご覧ください

form送信内容を含めてイベント発生させる

form送信内容をフィールドに含めてイベントを発生させるケースを考えます。

注意点

  • form送信後に画面遷移が発生する場合、実装方法によってはイベントトラッキングの完了を待たずに画面遷移してしまいイベントがKARTEに送られないケースがあります
  • form送信をJavaScriptで一時的に止めてからイベントトラッキングをする実装をした場合、実装方法によってはform送信自体ができなくなる可能性があります
  • 上記が発生しないかどうか、複数ブラウザで十分に実装内容を検証してください

代表的な実装パターン

下記に、form送信内容をトラッキングするための代表的な実装パターンを示します。

A. サイトを改修し、form送信時にKARTEにイベント送信する

form自体の機能実装に手を入れて、下記の要件を満たすよう改修します。

  • form送信時に、フロントエンドで送信を一時的に止めます
  • KARTEのユーザータグやカスタムイベントタグで、form送信内容をKARTEにイベントトラッキングします
  • KARTEへのイベントトラッキングが完了するか、タイムアウトになったら、止めていたform送信を再開します

B. サイトを改修し、form送信内容を送信完了ページで参照できるようにする

form自体の機能実装に手を入れて、下記の要件を満たすよう改修します。

  • form送信内容を、SessionStorageまたはサーバーサイドで保持しておき、form送信完了ページでJavaScriptから参照できるようにします
    • SessionStorageなど
  • form送信完了ページ上で発火させるKARTEのユーザータグやカスタムイベントタグで、form送信内容をKARTEにイベントトラッキングします
  • SessionStorageにデータを保持している場合は、KARTEへのイベントトラッキングが完了するか、タイムアウトになったら、データを削除します

※フォーム送信データをsessionStorage等に保持する場合、個人情報流出などのセキュリティリスクに十分配慮してください

C. KARTEのフォームタグを利用し、簡易にイベント送信する

  • KARTEでは、「フォームタグ」と呼ばれる簡易的なフォームトラッキングの方法を提供しています

フォームタグについて

注意点

KARTEのフォームタグは、あくまでもサイト改修などが難しい場合の一時的かつ簡易的な代替手段として提供しています。
form送信内容をなるべく漏らすことなくKARTEにイベントとして連携するためには、サイト側の改修が必要になるケースが多いです。
サイト上にあるフォームの実装によっては、フォームタグを使用できない場合があります。例えば、`type="submit"`のinput要素を使わずにform送信を行なっている場合、正常にフォームタグが実行されないケースがあります。

概要

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

雛形

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")イベント（例）

{
    "action": {
            "url": "https://karte.io/form/test",
            "protocol": "https",
            "host": "karte.io",
            "path": "form/test",
            "anchor": "",
            "query": "",
            "queryKey": {}
    },
    "method": "get",
    "xpath": ""
}