こんにちは、ASUE株式会社Webマーケティング課のタナカです！

GTMを使ってコンバージョン等の計測を行うとき、どんなWebサイトでもフォーム送信完了を計測したい場面は多いと思います。

大抵の場合は、フォームの入力ページや入力確認ページと送信完了時に表示されるサンクスページのURLが違い、サンクスページが固有のURLを持っているためそのページのページビューでCV設定をすることができます。

ですが、システムの関係でフォームの入力ページや入力確認ページ、サンクスページのURLが変わらないパターンもあります。そういうとき、どのようにフォームの送信イベントを計測すればいいでしょうか？

本記事では、GTMを使ったフォーム送信イベントの計測に使えるトリガーをいくつかご紹介します。

フォーム送信をサンクスページのURLで取れないケース

この場合、ページビューを使った計測はできないため、送信ボタンのクリック・完了画面のみの独自要素の表示・GTMのフォーム送信のいずれかのトリガーを利用する必要があります。（詳しくは後述します。）

フォーム送信イベントの計測方法（1）サンクスページURLのページビューを計測

まずは一番ベーシックな（本記事では本題ではない）サンクスページURLのページビューを計測するためのトリガーを復習がてらご紹介します。

設定方法

サンクスページに固有のURLがあり、そのURLが「https://example.com/contact/thanks/」だった場合、下記のトリガーを使えばフォームの送信を計測できます。

注意点

サンクスページのURLが直接アクセス可能であったり検索エンジンにインデックスされてしまったりすると、実際のコンバージョン数と計測数にズレが生じる場合があります。

　

次項から、本題の固有のサンクスページURLがない場合の計測方法をご紹介します。

フォーム送信イベントの計測方法（2）フォームの送信ボタンのクリックを計測

この方法では、特定のボタンをクリックしたのをトリガーとして、イベントを計測します。

例として計測を行いたいフォームの確認画面を以下のものとし（これはダミーのフォームなので、ボタンを押しても特に何も起きません。）、このフォームでは、入力画面 - 確認画面 - 完了画面でURLが変化せず、URLは「https://example.com/contact/」とします。

名前
メールアドレス

ここから、オレンジ色のボタンのクリックを計測したいこととします。このフォーム部分のhtmlコードがこちら。

<form name="eventMesurement02" class="blog25997Form">
    <table>
      <tr>
        <th>名前</th>
        <td><input type="text" name="name01" value="明日絵太郎" readonly></td>
      </tr>
      <tr>
        <th>メールアドレス</th>
        <td><input type="email" name="email" value="XXXXX@asue.jp" readonly></td>
      </tr>
    </table>
    <div class="blog25997Form__btn">
      <input type="button" name="btnReturn" value="入力画面へ戻る">
      <input type="submit" name="submitButton" value="送信する">
    </div>
  </form>

ピンクで示した箇所が、オレンジ色のボタンにあたるhtmlコードになっています。

設定方法

この設定で、https://example.com/contact/ 内のinput[name=”submitButton”]にあたる要素をクリックしたときに発火するということになります。

送信時にクリックする要素「」を拾うことができればいいので、固有の要素であれば他の部分をCSSセレクタとして利用してもOKです。
今回使用した「 input[name=”submitButton”]」というCSSセレクタは、「inputタグでname属性がsubmitButtonのもの」を指定するものになります。
上手くCSSセレクタが使えない（固有のものがない、など）場合は、制作会社に相談して固有になるように修正をしてもらうか、親要素などを使ってCSSセレクタを指定するなど工夫が必要になるかもしれません。

CSSセレクタのことがよくわからない場合は、以下の記事にWeb広告運用者が知っておくといいhtml / cssに関する情報をまとめてあるのでぜひご確認ください！

”CSSセレクタの基本を学ぶ”

 2022年6月8日Web広告運用者も知っておきたい！広告運用に役立つhtml/cssの基礎

ボタンクリックはフォーム送信時に基本的に必要な操作なので、この設定方法は汎用性も高いと思います。

注意点

フォーム入力が不完全などで送信エラーになった場合も計測される可能性があり、実測値と計測値にズレが生じる可能性もあります。

フォーム送信イベントの計測方法（3）フォームの送信完了時のみ表示される要素を計測

続いて、送信完了時にURLは遷移せずに画面の表示内容が変わる場合に使える計測方法をご紹介します。

送信が完了した際、ページが変わらないからと言ってフォーム入力画面そのままということはまずありません。

例として計測を行いたいフォームの送信画面・完了画面を以下のものとし（これはダミーのフォームなので、ボタンを押しても特に何も起きません。）、このフォームでは、入力画面 - (確認画面) - 完了画面でURLが変化せず、URLは「https://example.com/contact/」とします。

このようなフォームでは大体、以下のように送信が完了した旨が表示されます。

送信画面

名前
メールアドレス

完了画面

送信いただきありがとうございます。
3営業日以内にご連絡いたします。

この完了画面だけに表示されている要素を利用してフォーム送信完了のトリガーとすることが可能です。ここでは、この緑色のチェックマークを表示させることにします。

<form name="eventMesurement02" class="blog25997Form">
    <h3>送信画面</h3>
    <table>
      <tr>
        <th>名前</th>
        <td><input type="text" name="name01" value="明日絵太郎"></td>
      </tr>
      <tr>
        <th>メールアドレス</th>
        <td><input type="email" name="email" value="XXXXX@asue.jp"></td>
      </tr>
    </table>
    <div class="blog25997Form__btn">
      <input type="submit" name="submitButton" value="送信する" disabled>
    </div>
  </form>

  <form name="eventMesurement02" class="blog25997Form complete">
    <h3>完了画面</h3>
    <p class="complete__img"><i class="fa-solid fa-circle-check"></i></p>
    <p class="complete__txt">
      送信いただきありがとうございます。<br>
      3営業日以内にご連絡いたします。
    </p>
  </form>

コードの緑色の部分がチェックマークの部分となります。

設定方法

注意点

計測に使用するセレクタが、他の要素にも当てはまってしまう場合（=固有のセレクタではない場合）は、計測が上手くできない可能性があります。

その場合は、完了画面にのみ表示される要素に対してid等の固有の属性を振るなどの工夫が必要です。

フォーム送信イベントの計測方法（4）フォームの送信トリガーを計測

GTMでは、そもそもフォームの送信を読み取る「フォームの送信」というトリガータイプがあります。これを利用すれば、クリックや要素の表示などの回り道をせずともフォーム送信を計測することが可能です。

設定方法

注意点

フォームに確認画面がある場合、確認画面表示時点で計測となってしまいます。そこで離脱したものまで計測されるため、実際のコンバージョン数と計測値がズレる可能性があるため要注意です。

まとめ

フォーム送信に限らず、なにかしらイベントをGTMで計測したい場合、方法はいくつも種類があると思います。

よく使う「サンクスページURLのページビュー」が使えなくても、今回紹介した方法がそのまま使えなくても、条件等を工夫すれば何かしら方法が見つかると思ので、上手く一番楽で過不足のない設定を探っていきましょう！

　

ASUEでは、Web広告をはじめとするWebマーケティングの情報をブログ・メルマガにて発信しています。興味がある方はぜひご登録よろしくお願いします！