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に直接コードを追加する方法を推奨します。
WordPressテーマ
【THE THOR(ザ・トール)】
は、
収益化に特化した機能が豊富に搭載されており、ブログやアフィリエイトサイトで収益を最大化するのに非常に適したテーマです。THE THORは、アフィリエイト収益の最大化を考慮して設計されています。
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タグマネージャーで効果的に追跡できるようになります。