1. 【まず確認】GTMでフォーム送信が反応しないよくある原因5選

GTMの組み込み「フォーム送信」トリガーは、フォーム送信に関するイベントを検知して条件に合う場合に発火します。ただし、フォームの実装や送信後の画面遷移、トリガー条件などによっては、イベントが確認できなかったり、タグが発火しなかったりします。次の5項目を順番に確認してください。

原因①：JavaScript（Ajax等）で制御されていて標準イベントが発生していない

AjaxやSPAを使っているフォームでは、ページを再読み込みせずに送信処理を行うことがあります。ただし、Ajaxを使っていることだけを理由に、標準のsubmitイベントが発生しないとは限りません。フォームが実際にsubmitイベントを発生させているか、送信処理がボタンのクリックイベントだけで実装されているかを確認しましょう。送信イベントが発生していても、GTMのトリガー条件や送信後の遷移によって計測できない場合があります。

原因②：フォーム要素（<form>タグ）が存在しない・不完全

見た目はフォームでも、HTML構造上<form>タグが存在せず、<div>や<button>のJavaScriptクリックイベントだけで処理されている場合があります。

原因③：他のJavaScriptがGTMのイベント発火を妨害（interrupted）している

イベントハンドラーの実装によっては、イベントの伝播や送信処理の流れが変わり、想定した計測ができない場合があります。なお、preventDefault()はブラウザの既定動作を抑止するもので、イベントの伝播を止めるものではありません。一方、stopPropagation()はイベントの伝播を止めます。ただし、これらが使われているだけで必ずGTMの計測に失敗するわけではないため、実際のイベントの発生状況と実装を確認してください。

原因④：GTMのトリガー条件（Form ID / Form Element等）の設定ミス

GTM側のトリガー条件（例：Form IDがmy-formと等しい）が実際のフォームと一致していないと、イベントが発生していてもトリガーが発火しないことがあります。ID・クラスの値、条件の演算子、対象フォームが動的に生成されていないかを確認してください。

原因⑤：送信成功前にページが遷移して計測がキャンセルされている

送信直後にページ遷移が起きると、タグの実行や計測リクエストが完了する前にページが切り替わり、データが送信されない場合があります。ただし、ページ遷移があるだけで必ず計測に失敗するわけではありません。GTMプレビューでタグの発火状況を確認し、必要に応じて送信完了ページで計測する方法も検討してください。

2. 原因を特定する：デベロッパーツールでの切り分け手順

問題の切り分けは、感覚ではなくツールを使って論理的に行います。

① GTMプレビューモードで「Form Submit」イベントが出ているか確認

GTMのプレビューモードを起動し、フォームを操作したときのイベント一覧を確認します。フォーム送信に関するイベントが表示されるか、該当イベントを選んだときにGA4イベントタグが「配信されたタグ」に表示されるかを分けて見ます。イベント名の表示は画面や実装によって異なる場合があります。

• フォーム送信イベントがあり、タグが発火しない：トリガー条件、例外条件、タグの配信設定を確認します。
• フォーム送信イベント自体が確認できない：フォームのHTML構造、送信処理、イベントの発生タイミングを確認します。Ajaxを利用していることだけで原因を決めつけないでください。
• タグは発火するがGA4で確認できない：測定ID、同意設定、通信エラー、ブラウザ拡張機能などを確認します。

② ブラウザの検証ツール（Console）でエラーが出ていないかチェック

ChromeでF12または右クリック「検証」を開き、「Console」タブを確認します。

💡 チェックポイント：

フォーム送信時刻の前後にエラーが出ていれば、エラーの発生箇所とフォーム処理への影響を確認します。ConsoleにエラーがあるだけでGTMが止まっているとは断定できません。エラーがない場合も、プレビュー画面やNetworkタブなどを使って切り分けてください。

3. 【原因別】GTMでフォーム送信を確実に計測する解決策

解決策①：フォーム送信トリガーの設定を見直す（基本パターン）

まず、トリガーの条件が実際のフォームに合っているか確認します。原因の切り分けとして一時的に「すべてのフォーム」を対象にテストする方法もありますが、本番環境にそのまま公開すると意図しないフォームでもタグが発火する可能性があるため、プレビューで検証し、公開前に条件を戻してください。

解決策②：【おすすめ】サンクスページ（送信完了画面）の表示で計測する

送信成功後に専用の完了ページ（例：/thanks.html）へ遷移する構成なら、そのページの表示を計測条件にできます。GTMで「ページビュー」トリガーを作り、Page URLに完了ページ固有のパスが含まれる場合に発火させます。完了ページを再読み込みした場合や再訪問した場合に重複計測される可能性があるため、必要に応じて重複防止も設計してください。完了ページが送信成功時にのみ表示されることも確認しましょう。

解決策③：要素の表示（Element Visibility）トリガーを使う

ページ遷移せず、画面上に「送信が完了しました」というメッセージが動的に現れるフォーム（Ajax形式）に有効です。

完了メッセージのCSS IDまたはCSS セレクタを指定し、要素が表示されたときに発火するよう設定します。セレクタがページ内で一意であること、表示が本当に送信成功を意味すること、再表示で重複計測しないことを確認してください。GTMの要素の表示トリガーは、要素が表示されたことを検知する仕組みであり、送信成功そのものを保証するものではありません。

解決策④：dataLayer.push を使ってエンジニアにイベントを仕込んでもらう（Ajax対策）

Ajaxなどで標準のフォーム送信トリガーを使いにくい場合は、フォームの送信処理を実装しているエンジニアに、サーバー側で送信成功が確認できたタイミングでカスタムイベントを送る方法を相談します。以下はjQueryの$.ajaxを使う場合の例であり、そのまま全サイトで動く汎用コードではありません。URL、送信データ、成功判定は実際の実装に合わせてください。

📄 コピペ用 dataLayer.push サンプルコード

// jQueryを利用する実装例です。
// formData、送信先URL、成功判定は実際のサイトに合わせてください。
$.ajax({
  url: '/api/submit',
  type: 'POST',
  data: formData
})
.done(function(response) {
  // サーバー側で送信成功が確認できた場合に実行します。
  // 実際にはresponseの内容を確認し、成功時だけこの処理を通してください。
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event: 'custom_form_submit',
    form_name: 'contact_inquiry',
    form_id: 'form_001'
  });

  // ここで送信完了メッセージなどを表示します。
})
.fail(function(jqXHR, textStatus, errorThrown) {
  // 送信失敗時はコンバージョンイベントを送らないでください。
  console.error('フォーム送信に失敗しました', textStatus, errorThrown);
});

GTM側の設定手順：

1. GTMでトリガータイプ「カスタム イベント」を作成します。
2. イベント名に custom_form_submit を入力し、保存します。
3. そのトリガーをGA4イベントタグに設定します。必要に応じて、form_nameやform_idをデータレイヤー変数として登録し、イベントパラメータに設定します。
4. プレビューモードで、送信成功時にイベントが1回だけ発生し、失敗時には発生しないことを確認してから公開します。

4. よくある質問（FAQ）