Contact Form 7 の送信イベントを計測する方法｜GA4連携と独自イベント設定の解説

Contact Form 7 のイベントを捕捉するためのJavaScriptコードの追加 (dataLayerにプッシュ)

CF7には、フォームの送信状態に応じて特定のイベントが発火するJavaScriptイベントリスナーがあります。これを利用して、成功イベントなどをdataLayerにプッシュします。

通常、以下のJavaScriptコードをWordPressのテーマのfunctions.phpファイル、またはカスタムJavaScriptプラグインなどで追加します。これは、CF7の送信成功イベントを捕捉し、GTMが読み取れるようにdataLayerに情報をプッシュするものです。

JavaScript

document.addEventListener( 'wpcf7mailsent', function( event ) {
    // フォーム送信成功時にdataLayerにイベントをプッシュ
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
        'event': 'cf7_mail_sent',
        'form_id': event.detail.contactFormId,
        'form_name': event.detail.contactFormTitle,
        'form_fields': event.detail.inputs // 送信されたフィールド情報（必要であれば）
    });
}, false );

// その他のイベント（必要であれば）
// wpcf7mailfailed: 送信失敗
// wpcf7submit: 送信試行（成功・失敗問わず）
// wpcf7invalid: 入力エラー
// wpcf7spam: スパムと判定された場合

/* 例: フォーム送信失敗時
document.addEventListener( 'wpcf7mailfailed', function( event ) {
    window.dataLayer.push({
        'event': 'cf7_mail_failed',
        'form_id': event.detail.contactFormId,
        'form_name': event.detail.contactFormTitle
    });
}, false );
*/

このコードの追加方法:

• WordPressテーマのfunctions.php: 非推奨ですが、テーマのfunctions.phpに<script>タグで囲んで直接書き込むこともできます。ただし、テーマを更新すると消える可能性があるので注意が必要です。
• カスタムJavaScriptプラグイン: 推奨される方法です。Code SnippetsプラグインやCustom CSS & JSプラグインなどを使用して、WordPressのフッターに上記のJavaScriptコードを追加します。
• GTMのカスタムHTMLタグ (非推奨): 理論的には可能ですが、GTMのコンテナが読み込まれる前にCF7のイベントが発生する可能性があるため、確実な捕捉ができません。上記のWordPressに直接コードを追加する方法を推奨します。

Googleタグマネージャー (GTM) の設定

上記のJavaScriptコードによってdataLayerにプッシュされたイベントをGTMで捕捉し、各種タグを配信します。

1. 変数の作成 (任意だが推奨)

プッシュされたform_idやform_nameをGTMで利用できるように変数を作成します。

1. GTM管理画面で「変数」→「ユーザー定義変数」→「新規」をクリック。
2. 「変数の設定」で「データレイヤー変数」を選択。
3. 「データレイヤーの変数名」に form_id と入力し、「データレイヤーのバージョン」は「バージョン2」のまま。「保存」。
4. 同様に form_name も作成。

2. トリガーの作成

cf7_mail_sent イベントを捕捉するためのカスタムイベントトリガーを作成します。

1. GTM管理画面で「トリガー」→「新規」をクリック。
2. 「トリガーのタイプを選択」で「カスタムイベント」を選択。
3. 「イベント名」に cf7_mail_sent と入力。
   • 重要: このイベント名は、上記JavaScriptコードで'event'としてプッシュした値と完全に一致させる必要があります。
4. 「このトリガーの発生場所」は「すべてのカスタムイベント」または「一部のカスタムイベント」を選択。
   • 特定のフォームIDやフォーム名でのみ発火させたい場合は、「一部のカスタムイベント」を選択し、form_idなどのデータレイヤー変数を条件に設定します。
5. トリガー名（例: CF7 - フォーム送信成功）を入力し、「保存」。

3. タグの作成

作成したトリガーを使って、Googleアナリティクスなどのタグを設定します。

例: Googleアナリティクス4 (GA4) イベントタグの設定

1. GTM管理画面で「タグ」→「新規」をクリック。
2. 「タグの設定」で「Google Analytics: GA4 イベント」を選択。
3. 「測定ID」にGA4の測定ID (G-XXXXXXXXX) を入力、またはGA4設定タグを選択。
4. 「イベント名」にGA4で表示したいイベント名を入力します。例えば form_submission や contact_form_success など。
5. 「イベントパラメータ」で、必要に応じてform_idやform_nameをGA4に送信します。
   • 「行を追加」をクリック。
   • 「パラメータ名」に form_id、「値」にGTMで作成した{{form_id}}変数を選択。
   • 同様に form_name を追加。
   • （任意） event.detail.inputs を利用して、どのフィールドが送信されたかなどを詳細にGA4に送ることも可能です。ただし、個人情報が含まれないように注意してください。
6. 「トリガー」で、2.2で作成したトリガー（例: CF7 - フォーム送信成功）を選択。
7. タグ名（例: GA4 - CF7 フォーム送信成功）を入力し、「保存」。

例: Googleアナリティクス (ユニバーサルアナリティクス – UA) イベントタグの設定 (現在では非推奨)

• 現在、GoogleアナリティクスはGA4が主流であり、UAは2023年7月1日にデータ処理が停止しました。新規で設定する場合はGA4をお勧めします。

テストとデバッグ

設定が正しく機能しているかを確認することが非常に重要です。

1. GTM管理画面で「プレビュー」をクリック。
2. サイトのURLを入力し、「Connect」をクリック。
3. 新しいウィンドウでサイトが開きます。GTMのデバッグコンソールも同時に表示されます。
4. サイト上でContact Form 7のフォームを送信します。
5. GTMのデバッグコンソールで、cf7_mail_sent イベントがデータレイヤーにプッシュされたことを確認します。
6. GTMのデバッグコンソールで、作成したGA4イベントタグが発火していることを確認します。
7. GA4の「リアルタイム」レポートで、イベントが受信されていることを確認します。

注意事項

• dataLayerの初期化: 上記JavaScriptコードの window.dataLayer = window.dataLayer || []; は、dataLayerがまだ存在しない場合に初期化するためのものです。GTMのコードスニペットがすでにdataLayerを初期化している場合でも、この記述があることで安全に利用できます。
• 個人情報の取り扱い: フォームの送信内容に氏名、メールアドレス、電話番号などの個人情報が含まれる場合、それをそのままGoogleアナリティクスに送信することはGDPRや日本の個人情報保護法などのプライバシー規制に抵触する可能性があります。絶対に個人情報をGAに送信しないでください。 送信する情報に注意し、匿名化されたデータのみを使用してください。
• jQueryとの競合: ごく稀に、WordPressのテーマや他のプラグインとのjQueryのバージョン競合により、CF7のJavaScriptイベントが正しく動作しない場合があります。
• CF7のバージョン: CF7のアップデートにより、イベントの仕組みが変更される可能性もゼロではありません。もしうまく動作しない場合は、CF7の公式ドキュメントを確認してください。

これらの手順で、Contact Form 7のイベントをGoogleタグマネージャーで効果的に追跡できるようになります。

問い合わせ・集客機能に強いテーマ TOP3

1. Emanon（エマノン）

ビジネス集客に特化したテーマで、今回のラインナップの中では「問い合わせへの誘導」において圧倒的に高機能です。

• CTA（Call To Action）機能： 記事の下やフックを利用して、「資料請求」や「お問い合わせ」へのバナーを戦略的に配置できます。
• ランディングページ（LP）作成： 問い合わせ専用の1枚ページを簡単に作れる機能が標準搭載されています。
• デザイン： フォームプラグイン（Contact Form 7等）と連動した際、ビジネス向けに清潔感のあるデザインが適用されやすいのが特徴です。

Emanon（エマノン）

2. THE THOR（ザ・トール）

「集客・収益化」をコンセプトにしており、プラグインなしで多くの機能を完備しているテーマです。

• お問い合わせフォーム標準搭載： 通常はプラグインが必要な「お問い合わせフォーム」がテーマ自体に内蔵されています。
• 共通ボタン・CTA： サイト全体のあらゆる場所に問い合わせボタンを設置できる機能が充実しており、操作も管理画面から一括で行えます。
• 高速レスポンス： フォーム入力時のストレスが少ない高速設計も魅力です。

THE THOR（ザ・トール）

3. LIQUID PRESS（リキッドプレス）

企業サイトやメディア運営に向いた、実用性の高い国産テーマです。

• フォームプラグインへの最適化： 定番の「Contact Form 7」や「MW WP Form」に対応しており、テーマ側でフォームのデザインを自動的に整えてくれます。
• カスタマイズ性： 企業サイトとしての信頼感を出すためのレイアウト（電話番号の表示や地図の埋め込みなど）が、直感的なカスタマイズ画面で完備されています。

LIQUID PRESS（リキッドプレス）

比較まとめ表

テーマ	問い合わせ機能の特徴	向いている用途
Emanon	最高クラスのCTA機能。資料請求や相談への誘導が非常に強力。	企業・個人事業の集客
THE THOR	フォーム標準内蔵。プラグインを減らして管理を楽にしたい場合に。	アフィリエイト・ブログ
LIQUID PRESS	高いデザインの親和性。フォームを綺麗に見せたい場合に。	コーポレートサイト