なぜCF7は通常の計測設定が使えないのか
CF7はAjax(非同期通信)でフォームを送信するため、送信後もURLが変わりません。UA時代に使っていた「サンクスページのURLで計測」という方法が使えないのです。代わりにCF7が提供しているのがwpcf7mailsentというJavaScriptイベントです。フォームの送信が成功したタイミングでdataLayerにこのイベントが送信されるため、GTMで検知することができます。
GTMでの設定手順
STEP 1:トリガーを作成する
- GTM管理画面 →「トリガー」→「新規」
- トリガーのタイプ:「カスタムイベント」を選択
- イベント名:
wpcf7mailsentと入力 - トリガーの発生場所:「すべてのカスタムイベント」
- 名前を「CF7 – フォーム送信成功」として保存
STEP 2:GA4イベントタグを作成する
- GTM管理画面 →「タグ」→「新規」
- タグのタイプ:「Google アナリティクス: GA4 イベント」
- 設定タグ:既存のGA4設定タグを選択
- イベント名:
generate_lead - トリガー:STEP 1で作成した「CF7 – フォーム送信成功」を選択
- 名前を「GA4 – CF7フォーム送信」として保存
STEP 3:GTMをプレビューして動作確認する
- GTM管理画面 →「プレビュー」
- サイトでフォームを実際に送信
- GTMプレビューの「Tags Fired」に「GA4 – CF7フォーム送信」タグが表示されることを確認
STEP 4:GA4でコンバージョンにマークする
- GA4管理画面 →「イベント」
generate_leadイベントを見つけて「コンバージョンとしてマーク」をオン
STEP 5:GTMをサイトに公開する
プレビューで正常に動作を確認したら、GTM管理画面右上の「送信」→「公開」で本番環境に反映します。
複数フォームを識別する方法
CF7のdataLayerにはcontactFormIdというデータが含まれているため、GTMでdataLayer変数を作成してGA4にパラメータとして送信することができます。
- GTM →「変数」→「新規」→「データレイヤーの変数」
- データレイヤーの変数名:
contactFormId - GA4イベントタグの「イベントパラメータ」に
form_idとして追加
まとめ
CF7のフォーム送信計測は、GTMの「カスタムイベント」トリガーでwpcf7mailsentを検知することで正確に計測できます。この設定が完了すれば、どの記事からのお問い合わせにつながっているかをGA4で把握できるようになります。設定の代行についてはお気軽にご相談ください。
→ 無料サイト診断・お問い合わせはこちら