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で利用できるように変数を作成します。
- GTM管理画面で「変数」→「ユーザー定義変数」→「新規」をクリック。
- 「変数の設定」で「データレイヤー変数」を選択。
- 「データレイヤーの変数名」に
form_idと入力し、「データレイヤーのバージョン」は「バージョン2」のまま。「保存」。 - 同様に
form_nameも作成。
2. トリガーの作成
cf7_mail_sent イベントを捕捉するためのカスタムイベントトリガーを作成します。
- GTM管理画面で「トリガー」→「新規」をクリック。
- 「トリガーのタイプを選択」で「カスタムイベント」を選択。
- 「イベント名」に
cf7_mail_sentと入力。- 重要: このイベント名は、上記JavaScriptコードで
'event'としてプッシュした値と完全に一致させる必要があります。
- 重要: このイベント名は、上記JavaScriptコードで
- 「このトリガーの発生場所」は「すべてのカスタムイベント」または「一部のカスタムイベント」を選択。
- 特定のフォームIDやフォーム名でのみ発火させたい場合は、「一部のカスタムイベント」を選択し、
form_idなどのデータレイヤー変数を条件に設定します。
- 特定のフォームIDやフォーム名でのみ発火させたい場合は、「一部のカスタムイベント」を選択し、
- トリガー名（例:
CF7 - フォーム送信成功）を入力し、「保存」。
3. タグの作成
作成したトリガーを使って、Googleアナリティクスなどのタグを設定します。
例: Googleアナリティクス4 (GA4) イベントタグの設定
- GTM管理画面で「タグ」→「新規」をクリック。
- 「タグの設定」で「Google Analytics: GA4 イベント」を選択。
- 「測定ID」にGA4の測定ID (G-XXXXXXXXX) を入力、またはGA4設定タグを選択。
- 「イベント名」にGA4で表示したいイベント名を入力します。例えば
form_submissionやcontact_form_successなど。 - 「イベントパラメータ」で、必要に応じて
form_idやform_nameをGA4に送信します。- 「行を追加」をクリック。
- 「パラメータ名」に
form_id、「値」にGTMで作成した{{form_id}}変数を選択。 - 同様に
form_nameを追加。 - （任意）
event.detail.inputsを利用して、どのフィールドが送信されたかなどを詳細にGA4に送ることも可能です。ただし、個人情報が含まれないように注意してください。
- 「トリガー」で、2.2で作成したトリガー（例:
CF7 - フォーム送信成功）を選択。 - タグ名（例:
GA4 - CF7 フォーム送信成功）を入力し、「保存」。
例: Googleアナリティクス (ユニバーサルアナリティクス – UA) イベントタグの設定 (現在では非推奨)
- 現在、GoogleアナリティクスはGA4が主流であり、UAは2023年7月1日にデータ処理が停止しました。新規で設定する場合はGA4をお勧めします。
テストとデバッグ
設定が正しく機能しているかを確認することが非常に重要です。
- GTM管理画面で「プレビュー」をクリック。
- サイトのURLを入力し、「Connect」をクリック。
- 新しいウィンドウでサイトが開きます。GTMのデバッグコンソールも同時に表示されます。
- サイト上でContact Form 7のフォームを送信します。
- GTMのデバッグコンソールで、
cf7_mail_sentイベントがデータレイヤーにプッシュされたことを確認します。 - GTMのデバッグコンソールで、作成したGA4イベントタグが発火していることを確認します。
- 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タグマネージャーで効果的に追跡できるようになります。
