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

GTMのデフォルト「フォーム送信」トリガーは、ブラウザの標準的なsubmitイベントを検知する仕組みです。しかし現代のWebサイトでは、以下5つの原因によりトリガーが反応しないことが多々あります。

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

最も多い原因です。SPA（Single Page Application）やAjaxを用いたフォームでは、ページをリロードせずにバックグラウンドで非同期通信を行います。この場合、ブラウザ標準のsubmitイベントが発生しないため、GTMの「フォーム送信トリガー」は一切反応しません。

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

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

区分	HTMLコード例	GTMフォームトリガーの判定
失敗例 (NG)	<div class="submit-btn" onclick="sendData()">送信</div>	× 反応しない（formタグが存在しない）
成功例 (OK)	<form id="contact-form"><button type="submit">送信</button></form>	○ 反応する（標準submitイベント検知）

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

既存のJSスクリプトでe.preventDefault()やe.stopPropagation()が使用されており、GTMがイベントをバブリング（検知）する前にイベント伝播がストップしているケースです。

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

GTM側の配信条件指定（例: Form ID 等しい my-form）で、スペルミスや大文字・小文字の不一致、または動的に変化するIDを指定している場合に発生します。

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

フォーム送信ボタンを押した直後に即座に別ページへリダイレクトされると、GTMのビーコン（GA4へのデータ送信）が完了する前に通信が切断されてしまいます。

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

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

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

プレビューモードを起動し、フォームを送信した際に左側のイベントログ一覧に「Form Submit」または「gtm.formSubmit」が表示されるか確認します。

• 出ている場合：トリガー条件（Form IDなどのフィルタ指定）のミス。
• 出ていない場合：原因①〜③（JS制御やformタグ不在などシステム構造上の問題）。

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

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

💡 チェックポイント：

赤文字のエラーが出ている場合、サイト側のJSエラーによりGTMの処理がストップしている可能性が高まります。

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

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

まずはGTM側の設定ミスを解消します。「一部のフォーム」で動かない場合は、一時的に「すべてのフォーム」に切り替えてテストします。

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

実務で最も確実かつ推奨される代替案です。送信完了後に/thanks.htmlなどの完了ページへ遷移する構造であれば、フォーム送信トリガーを棄てて「ページビュー」トリガーで計測します。

設定項目	設定内容
トリガーのタイプ	初期化 / ページビュー
発火条件	一部のページビュー > Page URL 含む /thanks

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

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

メッセージ要素のCSS IDまたはCSS セレクタを指定し、それが画面上に現れた瞬間をコンバージョンと判定します。

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

最も堅牢で誤差のない計測手法です。フォーム送信成功時のJS処理ブロックに、以下のコードを追加してもらうようエンジニアへ依頼します。

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

// フォームのバリデーションを通過し、Ajax送信が成功したタイミングで実行
$.ajax({
  url: '/api/submit',
  type: 'POST',
  data: formData,
  success: function(response) {
    // 成功時処理

    // --- GTMカスタムイベントの発火 ---
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      'event': 'custom_form_submit',
      'form_name': 'contact_inquiry',
      'form_id': 'form_001'
    });
    // ---------------------------------

    alert('送信が完了しました');
  }
});

GTM側の設定手順：

1. GTMでトリガータイプ「カスタム イベント」を作成
2. イベント名に custom_form_submit と入力して保存
3. GA4イベントタグのトリガーに設定

4. よくある質問（FAQ）