GA4でContact Form7 のイベントをレポートする方法

GA4でContact Form 7のイベントをレポートする方法は、主にGoogleタグマネージャー（GTM）を利用するのが一般的で、最も柔軟性が高く推奨される方法です。

ここでは、GTMを使った設定方法と、GA4での確認・レポート方法を解説します。

GTMとGA4を使った設定手順

1. GTMの準備

1. Googleタグマネージャーにアクセスし、該当のコンテナを開きます。
2. 変数でフォーム関連の組み込み変数を有効にする:
   • 左メニューの「変数」をクリック。
   • 「設定」をクリック。
   • 「組み込み変数の設定」で、「フォーム」の下にあるすべての変数（Form Classes, Form ID, Form Text, Form URLなど）にチェックを入れます。

2. GTMでのタグとトリガーの設定

2.1. カスタムイベント発火用スクリプトの追加 (Optional, but highly recommended for robust tracking)

Contact Form 7はフォーム送信成功時にwpcf7mailsentというJavaScriptイベントを発火させます。これを利用して正確なイベントをGA4に送信します。

1. GTMの「タグ」で「新規」をクリック。
2. 「タグの設定」で「カスタムHTML」を選択。
3. 以下のJavaScriptコードを貼り付けます。

JavaScript

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
  window.dataLayer.push({
    'event': 'contact_form_submit', // GA4に送信したいイベント名
    'form_id': event.detail.contactFormId,
    'form_status': 'success'
  });
}, false );
</script>

1. • contact_form_submitはGA4で表示されるイベント名なので、分かりやすい名前に変更してください。
   • form_idとform_statusはイベントパラメータとしてGA4に送られます。必要に応じて追加することも可能です。
2. 「トリガー」は「All Pages」など、サイトの全ページで発火するように設定します。

2.2. GA4イベントタグの作成

1. GTMの「タグ」で「新規」をクリック。
2. 「タグの設定」で「Googleアナリティクス：GA4イベント」を選択。
3. 測定ID: GA4の測定ID (G-XXXXXXXXX) を入力します。これはGA4の「管理」→「データストリーム」から確認できます。
4. イベント名: 「2.1」で設定したカスタムイベント名（例: contact_form_submit）を入力します。
5. イベントパラメータ (オプション):
   • フォームIDやフォームステータスなどをGA4に送りたい場合は、「イベントパラメータ」セクションで追加します。
   • 「行を追加」をクリックし、「パラメータ名」と「値」を入力します。
     • 例:
       • パラメータ名: form_id、値: {{form_id}} (GTMのデータレイヤー変数)
       • パラメータ名: form_status、値: {{form_status}} (GTMのデータレイヤー変数)
6. トリガー:
   • 「トリガー」をクリックし、「新規」で新しいトリガーを作成します。
   • 「トリガーのタイプを選択」で「カスタムイベント」を選択。
   • 「イベント名」に、「2.1」で設定したカスタムイベント名（例: contact_form_submit）を入力します。
   • 「このトリガーの発生場所」は「すべてのカスタムイベント」でOKです。

3. GTMの公開

1. GTMのワークスペースに戻り、「公開」ボタンをクリックして変更を公開します。

4. GA4での確認と設定

4.1. リアルタイムレポートでの確認

1. ウェブサイトで実際にContact Form 7のフォームを送信します。
2. GA4の「レポート」→「リアルタイム」レポートを開きます。
3. イベント名 (contact_form_submitなど) が表示され、イベントが計測されていることを確認します。

4.2. コンバージョン設定 (任意)

フォーム送信をコンバージョンとして計測したい場合、以下の設定を行います。

1. GA4の「管理」→「イベント」に移動します。
2. 「新しいコンバージョンイベント」をクリックします。
3. 「イベント名」に、GTMで設定したイベント名（例: contact_form_submit）を入力し、「保存」をクリックします。

4.3. カスタムディメンションの設定 (イベントパラメータをレポートで活用したい場合)

GTMで送ったイベントパラメータ（例: form_id）をGA4のレポートで表示したい場合は、カスタムディメンションとして登録します。

1. GA4の「管理」→「カスタム定義」に移動します。
2. 「カスタムディメンションを作成」をクリックします。
3. 各項目を入力します。
   • ディメンション名: わかりやすい名前（例: フォームID）
   • 範囲: イベント
   • イベントパラメータ: GTMで設定したパラメータ名（例: form_id）
4. 「保存」をクリックします。

5. レポートでの確認方法

• イベント数を確認する:
  • GA4の「レポート」→「エンゲージメント」→「イベント」で、設定したイベント名（例: contact_form_submit）の発生回数を確認できます。
• コンバージョン数を確認する:
  • フォーム送信をコンバージョンとして設定した場合、「レポート」→「エンゲージメント」→「コンバージョン」で、コンバージョン数を取得できます。
• イベントパラメータで絞り込んでレポートする:
  • 「レポート」の各レポート（例: トラフィック獲得）で、表の「+」をクリックし、カスタムディメンションで設定した項目（例: フォームID）を選択すると、そのディメンションごとにイベントデータを確認できます。

その他の方法 (非推奨または限定的)

• Contact Form 7の追加設定: Contact Form 7の設定画面で、フォーム送信後の追加設定にJavaScriptコードを直接記述してイベントを送信する方法もあります。しかし、GTMを使った方法の方が一元管理しやすく、WordPressテーマの変更などの影響を受けにくい利点があります。
• サンクスページにリダイレクト: フォーム送信後にサンクスページ（例: /thanks/）にリダイレクトさせ、そのサンクスページへのアクセスをGA4で計測する方法もあります。ただし、Contact Form 7で動的にメッセージを表示するケースなど、サンクスページがない場合には使えません。

注意点

• テスト送信: 設定後は必ずテスト送信を行い、GA4のリアルタイムレポートで正しくイベントが計測されているか確認してください。
• キャッシュ: WordPressのキャッシュプラグインを使用している場合は、設定変更後にキャッシュをクリアしないと反映されないことがあります。
• IPアドレスの除外: GA4で自社IPアドレスを除外設定している場合、テスト時にイベントが計測されないことがあります。その場合は、除外設定を一時的に解除するか、別のネットワーク（例: スマートフォンのテザリングなど）からテストしてください。

上記の手順で、Contact Form 7のフォーム送信イベントをGA4で効果的に計測し、レポートに活用することができます。