【GTM】フォーム送信トラッキングでのトリガー設定

フローム送信を計測する場合に使うトラッキング方法を4つご紹介します。

どれを使うべきかはWebページのフォーム仕様と送信後の挙動によって分かれます。

まずは自社ページがどんな仕様なのかを把握しましょう。

目次

現状判断方法

STEP
サンクスページの有無の確認

私が運用する場合は必ずサンクスページの設置を勧めています。

サンクスページとは、フォーム送信が確定した際に遷移するページのことです。

サンクスページがある場合というのは、フォーム送信ボタンを押した後にURLが変わる状態を指します。

URLが変わるというのは下記を指します。

サンクスページあり

(フォーム送信前)http://sample.com/

(フォーム送信後)http://sample.com/thanks  ※パスはなんでもOKです。

下記のようにクラス「#」がつくだけではサンクスページとは呼びません。

サンクスページなし →次項でパターンA〜Dに分類

(フォーム送信前)http://sample.com/

(フォーム送信後)http://sample.com/#wpcf7-f6-p47-o1

トリガーとして上記 URLを入力しても判定に引っかかりません。

WordPressなどでプラグインを使うとデフォルトでは上記のようにクラスがつくだけで、サンクスページが無い状態です。

王道の「Contact Form 7」ならhead内にJavaScriptの記述を加えるだけでサンクスページが設置できます。

正しい計測ができるだけでなく、サンクスページでの丁寧なお礼や、その際のアップorクロスセルの機会が得られますので、ぜひサンクスページは設置してください。

サンクスページを設置する場合は、以降のSTEPはスキップして「トリガー設置方法」まで進んでください。

サンクスページを設けずに、フォーム送信を計測する場合はSTEP2に進んでください。

STEP
Chrome「ディベロッパーツール」起動

「F12」または「F12 + fn」にて下図のように検証画面を表示します。

検証モード
STEP
要素選択モードでCVボタンをクリック

下図ボタンをクリックします。

要素選択モードボタン

要素選択モードになるため、左画面でページの要素にフォーカスすると、右画面で対応する記述がハイライトされます。

CVボタンをクリック
STEP
ハイライトされたボタンの要素を確認

下記のどれに当たるかでトリガーが変わります。

CVボタンパターン

  • パターンA  <input type=”submit”>
  • パターンB  <input id=”xxx”>   ※xxxは任意の文字列
STEP
フォーム送信後に表示される要素を確認

STEP3を参考に表示された内容「送信されました。」「登録ありがとうございます。」などの要素を確認します。

その際に、どの要素で囲まれているかにより行えるトラッキングが変わります。

送信完了要素パターン

  • パターンC  <div> 文言 </div>
  • パターンD  <p> 文言 </p>

こちらにて、パターンがわかったので、それぞれのパターン毎にトリガー設定方法を見てみましょう。

トリガー設定方法

1.(推奨)サンクスページでの「PageView」トリガー

発火タイミング送信完了
設定難易度簡単
対象パターンサンクスページあり

サンクスページがある場合にのみできるCVトラッキング方法です。

一番簡単で確実で正確な計測方法になります。

下図のように設定し、対象URLはサンクスページになります。

設定方法

2. 「DOM要素」による「PageView」トリガー

発火タイミング送信完了
設定難易度難しい
対象パターンAC、BC

送信後にページのURLが変わらなくても、div要素としてページに現れる文字があれば、それを条件に発火させることができます。p要素では発火しないため、パターンDでは採用できません。

設定方法

上図のイベント条件にある「ユーザ定義変数_div要素」とは各自作成する必要があります。

作成方法は、タグ、トリガーの下にある変数タブから新規作成をクリックし、下図のように設定します。

3. フォーム入力ページでの「フォーム送信」トリガー

発火タイミングボタンクリック
設定難易度簡単
対象パターンAC、AD

送信完了ではなく、送信ボタンクリックで発火するため、実際の問合せ数と解離が生じます。

設定

4. (非推奨)フォーム入力ページでの「クリック」トリガー

発火タイミングボタンクリック
設定難易度難しい
対象パターン全て

送信完了ではなく、送信ボタンクリックで発火するため、実際の問合せ数と解離が生じます。

設定方法

CSSセレクタ

  • パターンA : input[type=“submit”]
  • パターンB : input[id=“xxx”]  ※xxxは任意の文字列

最後に

設定後は、かならずGTMのプレビューモードで発火確認をしましょう。

GAのイベント設定の場合は、GAのリアルタイムのコンバージョンにてテスト送信を行いましょう。

上記方法は一個人のオススメする設定方法であり、GTMのカスタマイズ性を考えればより簡単で正確な計測方法があるかもしれません。

もしGTMの設定でお困りの際はぜひお問い合わせください!

\ お気軽にどうぞ /

コラム:「発火タイミング」が「ボタンクリック」

送信が完了したか否かは不問という状態なので、実際の注文数と解離が生じます。

さらに、Googleは「問合せした人」ではなく「送信ボタンをクリックした人」で最適化するため、微量ではありますが機械学習に悪影響を与えます。

しかし、下記の場合は有効です。

「自動入札を行いたいが予算が少なく、機械学習の最適化に必要な月CV数(だいたい50CV)が達成できない」

この場合は、マイクロコンバージョンの概念として、ボタンクリックで最適化させた方がCV数が確保できるため、最終的に効率は上がるかもしれません。

この記事を書いた人

三村大輝のアバター 三村大輝 アドリーチ代表

2016年 埼玉大学 卒業
2016年 LIXIL 入社
2018年 未来 入社
2020年 AdReach 設立

コメント

コメントする

目次
閉じる