フォーム送信の計測をしたい

このページでは、Googleアナリティクス4（GA4）で お問い合わせフォーム や 予約フォーム の送信完了を計測する方法をまとめています。

GA4を導入したい（基本）ができている前提で、サンクスページでの計測 と フォーム送信イベントの送信 の2パターンを、静的HTMLサイト向けに解説します。

このページの対象とゴール
フォーム送信の計測パターン：2つの考え方
パターンA：サンクスページでフォーム送信を計測する
1. 1. フォームの遷移先をサンクスページにする
2. 2. GA4側で「サンクスページの閲覧」をコンバージョンにする
パターンB：フォーム送信イベントをGA4に送る
1. 1. フォームに「イベント名」を付ける
2. 共通スクリプトでフォーム送信イベントを送る
1. JavaScriptの例（共通ファイルに追加）
GA4でフォーム送信が計測できているか確認する
よくあるつまづきとチェックポイント
次のステップ：GA4でできることを少しずつ広げる

このページの対象とゴール

このページは、次のような方を想定しています。

すでに GA4タグ（gtag.js）はサイトに入っている
お問い合わせ・予約フォームの送信数 をしっかり把握したい
フォームの完了ページ（サンクスページ）があるか、PHPなどでメール送信している
タグマネージャーを使わず、なるべくシンプルな方法で計測したい

読み終わるころには、次の状態を目指します。

フォーム送信の計測方法として 2つのパターン を理解している
自分のサイトにあった方法で フォーム送信数をGA4で確認 できる
必要であれば、フォーム送信を コンバージョン（重要な成果） として登録できている

ポイント：まずは「サンクスページで計測」がシンプル

フォーム送信後に 完了ページ（thanks.html など） へ遷移する構成であれば、
GA4側でそのページのアクセスをコンバージョンとして扱うだけで、比較的かんたんに管理できます。

フォーム送信の計測パターン：2つの考え方

フォーム送信をGA4で測る場合、主に次の2つのパターンがあります。

パターンA：フォーム送信後の サンクスページ（完了ページ） の閲覧を計測する
パターンB：フォームの submit（送信）イベント で GA4イベントを送信する

Templyでは、次のような使い分けをおすすめしています。

サンクスページがある → パターンAを基本 にしつつ、余裕があればBも追加
サンクスページがなく、同じページ内で完結 → パターンB を検討する

ポイント：「完了ページ」が作れるなら優先したい

サンクスページに遷移する形式だと、「フォーム送信完了」かどうかがURL単位で判別 しやすく、GA4側での管理（コンバージョン設定など）もシンプルになります。

パターンA：サンクスページでフォーム送信を計測する

もっともシンプルな方法は、フォーム送信完了後に サンクスページ へ移動させ、そのページの閲覧をフォーム送信とみなす方法です。

1. フォームの遷移先をサンクスページにする

HTML側では、次のように action で完了ページを指定します（例）：

<form
  id="contact-form"
  class="contact-form"
  action="/contact/thanks.html"
  method="post">

  <!-- お名前 / メールアドレス / お問い合わせ内容など -->

  <button type="submit" class="btn btn-primary">送信する</button>
</form>

PHPでメール送信している場合は、contact.php → 処理完了後に thanks.html へリダイレクト する構成でもOKです。

2. GA4側で「サンクスページの閲覧」をコンバージョンにする

GA4の管理画面では、次のような流れでサンクスページをコンバージョンとして扱えます。

GA4管理画面で「レポート」→「エンゲージメント」→「ページとスクリーン」を開き、
サンクスページのURL（例：/contact/thanks.html）が計測されているか確認
「管理」→「イベント」画面を開き、page_view イベントを確認
「イベントを作成」から、URLに /contact/thanks.html を含む場合 などの条件で新しいイベントを作成
作成したイベントを「コンバージョンとしてマーク」しておく

ポイント：URLを変えれば複数フォームにも対応しやすい

お問い合わせと予約で別々に計測したい場合は、/contact/thanks.html と /reserve/thanks.html のように 完了ページを分ける と管理がラクになります。

パターンB：フォーム送信イベントをGA4に送る

フォームが同じページ内で完結している場合や、より細かく計測したい場合は、フォーム送信時にイベントを送信する方法もあります。

1. フォームに「イベント名」を付ける

クリック計測と同じ考え方で、フォーム側に data-gtag-form 属性を追加します。

<!-- お問い合わせフォーム -->
<form
  id="contact-form"
  class="contact-form"
  action="/contact/thanks.html"
  method="post"
  data-gtag-form="contact_form_submit">

  <!-- フィールドは省略 -->

  <button type="submit" class="btn btn-primary">送信する</button>
</form>

<!-- 予約フォーム -->
<form
  id="reserve-form"
  class="reserve-form"
  action="/reserve/thanks.html"
  method="post"
  data-gtag-form="reserve_form_submit">

  <!-- フィールドは省略 -->

  <button type="submit" class="btn btn-primary">予約内容を送信する</button>
</form>

data-gtag-form の値が、そのまま GA4に送る イベント名 になります。

ポイント：イベント名は「何のフォームか」が分かるように

例）contact_form_submit、reserve_form_submit、estimate_form_submit など。フォームの種類ごとに分かる名前にしておくと、後からレポートが見やすくなります。

2. 共通スクリプトでフォーム送信イベントを送る

次に、data-gtag-form が付いたフォームが送信されたときに GA4へイベントを送るスクリプトを追加します。

JavaScriptの例（共通ファイルに追加）

たとえば、assets/js/main.js のような共通JSファイルに、次のようなコードを足します。

document.addEventListener('DOMContentLoaded', function () {
  var trackedForms = document.querySelectorAll('[data-gtag-form]');

  trackedForms.forEach(function (form) {
    form.addEventListener('submit', function () {
      var eventName = form.getAttribute('data-gtag-form');

      if (typeof gtag === 'function' && eventName) {
        gtag('event', eventName, {
          'event_category': 'temply_form',
          'event_label': window.location.pathname
        });
      }
    });
  });
});

これで、フォーム送信時に temply_form カテゴリのイベントが GA4に送信されます。

ポイント：サンクスページと併用すると安心

通信状況によっては、フォーム送信イベントが正しく届かないケースもゼロではありません。可能であれば、「サンクスページでの計測」＋「イベント送信」 の2段構えにしておくと、抜け漏れが減ります。