Contact Form 7 のイベントを捕捉するためのGTMの設定

Contact Form 7 (CF7) のイベントをGoogleタグマネージャー (GTM) で設定する方法です。CF7の送信成功やその他のイベントをGTMで捕捉し、Googleアナリティクスなどに送信するための手順を説明します。

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タグマネージャーで効果的に追跡できるようになります。