サンクスページがないサイトでもCVを計測する。GTMによるイベント発火の実装例

サンクスページとイベント発火の比較：どちらを使うべき？

フォーム送信後のコンバージョン計測には、大きく分けて「サンクスページ方式」と「イベント発火方式」の2通りがあります。どちらが適しているかはサイト構成や目的によって異なります。以下の比較表を参考に、あなたのサイトに最適な方法を選びましょう。

比較項目	サンクスページ方式	イベント発火方式（JavaScript/GTM）
CV計測の正確性	リロード・Bot・サンクスページへの遷移時の離脱による誤計測のリスクあり	JSで送信完了時のみ発火できるため、比較的正確に計測可能
実装の簡単さ	GTMで特定のサンクスページURLを条件にするだけで計測可能	JavaScriptやGTMのカスタムイベント設定が必要（やや中〜上級者向け）
ユーザー体験（UX）	ページ遷移が必要で、多少の待機や読み込みが発生することも	ページ内完結で動作が早く、UXがスムーズ
トラッキング制御の柔軟性	URLベースでトリガー設定。複数フォームや条件分岐には不向き	カスタムイベント・DOM変化・属性変更など多様な条件で柔軟に設定可能
SEOへの影響	サンクスページがGoogleにインデックスされる可能性があり、除外処理が必要なことも	基本的に影響なし
GTM/GA4設定のしやすさ	GA4タグ＋URL条件で設定できるため非エンジニアでも対応可能	dataLayerや変数の設定が必要なため設計とテストにやや手間がかかる

状況別の選び方まとめ

状況・要件	推奨される方式
フォーム送信後にページ遷移が発生する	サンクスページ方式
モーダル送信・Ajax送信・SPA構成のフォーム	イベント発火方式
GTMやGA4の設定に不慣れな非エンジニアでも運用したい	サンクスページ方式
ユーザー体験を損なわず、画面内で完結させたい	イベント発火方式
コンバージョンの重複計測や過小計測を防ぎたい	イベント発火方式
既にサンクスページがある構成を活かしたい	サンクスページ方式

---

GTMでのイベント発火の基本的な考え方

GTMでは以下の流れでイベント発火の設定を行います。

1. カスタムイベントやDOM状態をトリガーとして検出
2. 「トリガー」と「タグ」を紐付けてCVとして送信

フォーム送信完了（例：JavaScriptで完了メッセージ表示）
→ カスタムイベント発火（dataLayer.push）
→ GTMが検出
→ Google広告/GA4にCV送信

---

GTMとGA4での基本設定手順

ここでは、JavaScriptによって発火させたカスタムイベント（例：formSubmissionComplete）をGTMで拾い、Googleアナリティクス4（GA4）に送信する設定手順を詳しく解説します。

---

手順①：GTMでカスタムイベントのトリガーを作成

1. Googleタグマネージャーにログインし、対象のコンテナを開く。
2. 左メニューから「トリガー」を選び、「新規」ボタンをクリック。
3. トリガータイプを「カスタムイベント」に設定。
4. 以下のように設定：
   • トリガー名： formSubmissionComplete Trigger（わかりやすい任意の名称でOK）
   • イベント名： formSubmissionComplete
   • このトリガーを有効にする： 「すべてのカスタムイベント」または必要に応じて条件を設定（例：URLやページパス）
5. 保存しておく。

---

手順②：GA4イベントタグを作成

GTMで検出したカスタムイベントをGoogleアナリティクス4（GA4）へ送信するには、「GA4イベントタグ」を作成します。設定方法は以下の通りです。

STEP 1：まずはGoogleタグ（旧GA4設定タグ）を作成（未作成の場合）

1. GTM左メニュー「タグ」→「新規」→「タグの種類を選択」で「Googleタグ（Google Tag）」を選ぶ
2. 測定ID（G-XXXXXXXXXX）を入力（GA4の管理画面 → データストリームから取得）
3. トリガーは「すべてのページ」を指定
4. タグ名は「Googleタグ（GA4基本設定）」など、分かりやすい名前にして保存

※ このGoogleタグは今後、GA4イベントタグで共通設定として参照されます。

STEP 2：GA4イベントタグを作成

1. GTM左メニュー「タグ」→「新規」→「タグの種類を選択」で「Googleアナリティクス：GA4 イベント」を選択
2. 以下のように設定：
   • 測定ID： GA4の「測定ID（G-XXXXXXXXXX）」を直接入力します。
   • イベント名（必須）：generate_lead（問い合わせや資料請求などにおすすめ）
     • 任意の名前（例：form_submission）も使用可能ですが、Googleが推奨する標準イベント名を使うとGA4で自動的に分類・集計されるメリットがあります。
     • 他の例：sign_up（会員登録）、purchase（購入）、login（ログイン）など
   • イベントパラメータ（任意）： GA4に送信する追加情報として、カスタムパラメータを設定することができます。たとえば、どのフォームから送信されたかを識別したい場合、以下のように設定します：
     • パラメータ名： form_id（任意の名称でOK。たとえば form_name などでも可）
     • 値： {{Form ID}}（事前に変数を定義しておく必要があります）
     その他にも以下のような使い方が可能です：
     • page_title → {{Page Title}}：送信時のページタイトルを取得
     • url → {{Page URL}}：送信元のURLを取得
     • user_type → new / repeat：ユーザー区分（カスタムで付与）
     パラメータはGA4の「イベント」レポートで確認でき、より詳細な分析に活用できます。
3. トリガーには、手順①で作成した formSubmissionComplete のカスタムイベントトリガーを選択
4. タグ名は「GA4 - generate_lead イベント」や「GA4 - お問い合わせCV」など、分かりやすい名前にして保存

---

手順③：タグを公開する

1. GTM画面右上の「公開（Submit）」ボタンをクリックします。
2. バージョン名や変更内容（例：GA4イベントタグ追加）を入力（任意）
3. 「公開」ボタンを押して、本番環境に反映させます。

※ 公開しないと、作成したタグやトリガーは本番サイトで動作しません。

---

手順④：GA4でイベントを確認

1. GA4の管理画面 にログイン。
2. 左側の「レポート」→「リアルタイム」で、該当イベント（generate_leadなど）が送信されているか確認。
3. 数日後には「イベント」一覧にも反映され、必要に応じて「コンバージョンとしてマーク」することでCV計測が可能に。

---

実装例①：JavaScriptからdataLayerイベントを発火する

もっとも汎用的な方法は、JavaScriptからdataLayer.push()でイベントを発火する方法です。

サンプルコード

<script>
document.querySelector('#contact-form').addEventListener('submit', function (e) {
    e.preventDefault();

    // バリデーションや送信処理
    sendFormData().then(function () {
        // 送信完了後にイベント発火
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            event: 'formSubmissionComplete'
        });

        // UI更新など
        document.querySelector('.thanks-message').style.display = 'block';
    });
});
</script>

---

実装例②：DOMの変化（MutationObserver）を使う

フォーム送信後に完了メッセージがDOMに挿入される構成なら、MutationObserverを使う方法も有効です。

サンプルコード

<script>
const target = document.querySelector('#form-area');
const observer = new MutationObserver(function (mutationsList, observer) {
    if (document.querySelector('.thanks-message')) {
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            event: 'formSubmissionComplete'
        });
        observer.disconnect();
    }
});

observer.observe(target, { childList: true, subtree: true });
</script>

---

実装例③：HTML属性の変更をトリガーにする

classやstyleの変更で状態を判別するケースにも対応できます。

サンプルコード

<script>
const form = document.querySelector('#contact-form');
const observer = new MutationObserver(function () {
    if (form.classList.contains('is-submitted')) {
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({ event: 'formSubmissionComplete' });
        observer.disconnect();
    }
});

observer.observe(form, { attributes: true, attributeFilter: ['class'] });
</script>

---

実装例④：Contact Form 7（WordPress）の送信完了イベントを使う

WordPressでよく使われている「Contact Form 7」では、送信完了後にwpcf7mailsentというイベントが発火します。

これを使えば、追加のDOM検知やJS改修なしでGTMと連携できます。

サンプルコード

<script>
document.addEventListener('wpcf7mailsent', function(event) {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
        event: 'formSubmissionComplete'
    });
}, false);
</script>

---

まとめ：サンクスページがなくてもCVは取れる！

サンクスページがなくても、GTMとJavaScriptを組み合わせれば柔軟なCV計測が可能です。
ポイントは「フォーム送信が完了したタイミング」を何らかの形で検出し、それをdataLayer.push()でGTMに伝えること。実装方法は以下のように複数あります。

• JavaScriptで直接dataLayer.push
• DOMの変化（完了メッセージの表示）を検知
• クラスや属性の変更を検出
• Contact Form 7のカスタムイベントを利用

この手法を使えば、GA4やGoogle広告のCVも問題なく取得できます。
フォーム構成に応じて適切なトリガーを選び、GTMで確実な計測を実現しましょう。