サイトに設置されているフォームが実行されたことを検知してKARTE側にイベントを連携する方法について、実装例を紹介します。
たとえば資料請求フォームや来店予約フォームの入力内容をKARTEのユーザー情報として連携したい場合などにご利用ください。
フォーム送信したこと自体をイベントとしてトラッキングする
- フォーム送信内容を含めずにフォーム送信したこと自体をイベントとしてトラッキングしたい場合は、主にフィルターイベントを使用します
- フォーム送信完了画面のURLパスを閲覧したことをトリガーに発火するフィルターイベントを作成します
- 詳しくは下記をご覧ください
フォーム送信内容を含めてイベント発生させる
フォーム送信内容をフィールドに含めてイベントを発生させるケースを考えます。
注意点
- フォーム送信後に画面遷移が発生する場合、実装方法によってはイベントトラッキングの完了を待たずに画面遷移してしまいイベントがKARTEに送られないケースがあります
- フォーム送信をJavaScriptで一時的に止めてからイベントトラッキングをする実装をした場合、実装方法によってはフォーム送信自体ができなくなる可能性があります
- 上記が発生しないかどうか、複数ブラウザで十分に実装内容を検証してください
代表的な実装パターン
下記に、フォーム送信内容をトラッキングするための代表的な実装パターンを示します。
A. サイトを改修し、フォーム送信内容を送信完了ページで参照できるようにする
フォームが下記の要件を満たすようにWebサイトを改修します。
- フォーム送信内容を、SessionStorageまたはサーバーサイドで保持しておき、フォーム送信完了ページでJavaScriptから参照できるようにします
- フォーム送信完了ページ上で発火させるKARTEのユーザータグやカスタムイベントタグで、フォーム送信内容をKARTEにイベントトラッキングします
- SessionStorageにデータを保持している場合は、KARTEへのイベント送信処理（
krt('send', ...)など）が呼ばれた後でそのデータを削除します
※フォーム送信データをsessionStorage等に保持する場合、個人情報流出などのセキュリティリスクに十分配慮してください
B. サイトを改修し、フォーム送信時にKARTEにイベント送信する
フォーム自体の機能実装に手を入れて、下記の要件を満たすよう改修します。
- フォーム送信時に、フロントエンドで送信を一時的に止めます
- フォーム送信内容をKARTEにイベント送信する処理（
krt('send', ...)など）を実行します - 一定時間後に、止めていたフォーム送信を再開します
※送信待ちイベントデータのキューイング の仕様により、送信処理まで完了しないままページ遷移をした場合であっても、次PVでイベントが送信されます。そのため、フォーム送信を停止する時間は、一般的には数百ミリ秒間ほどで問題ありません。
よくある質問
tracker.form()というメソッドはページ上のリンククリック計測に使えますか？
tracker.form()は、KARTEの古いタグ（v1）の記述方法です。タグv1のサポート終了とともに、このメソッドも利用できなくなりました- 代わりに本記事で紹介している方法をご利用ください