GA4＆GTMでContact Form 7のコンバージョンを計測する（複数フォーム対応）
以前Contact Form 7で申込数のコンバージョン（CV）を取得しようとしたことがありました。
その時はGoogleタグマネージャー（GTM）で計測するにはサンクスページを別途用意&リダイレクトで画面遷移させる形する必要があるという話を見て、その方法で実装していました。
しかしリダイレクトは公式非推奨なのでなるべく避けたいところ。
改めて調べつつ検証したところ、次のような仕様で実装することができました。
- サンクスページ不要（画面遷移なし）
- WPサイト側の編集は不要、GTM/Googleアナリティクス(GA)側の設定のみで済む
※ サイトへのGTM導入、GTMとGAの連携は済んでることが前提 - 複数フォームに対応
今回の記事では、上記の仕様でContact Form 7の送信イベントを取得してGTM経由でGA4のCVを計測する方法と、そのCVをGA4で見やすく設定する方法をまとめています。
Contents
CV取得までのイメージ
GTM・GA4・WPサイトそれぞれの挙動について下記イメージにまとめました。
全体イメージ図作成
アナリティクスでのレポートの表示イメージ
実際に設定する作業はおおまかに以下の3つ。
● GTM
A. サイト全体へ「CF7の送信成功イベント（wpcf7mailsent）が発生したらデータを送信する」コードを常時配信
B. 「A.のデータを受け取ったらGA4にイベントを送信する」という仕組みを設定
● GA4
C. CVの設定・CVをレポート上でカスタマイズする
C.のレポートはキャプチャの通りページ別のCVを表示する方法についてまとめていきつつ、フォーム種別CVの取得方法についても補足を入れていきたいと思います。
（フォーム種別…お問合せ、資料請求などのフォームがそれぞれ複数ページに設置されていて、ページ問わずフォーム種別にCVを計測したい場合など）
GTMでの設定
A. サイト全体へ「CF7の送信成功イベント（wpcf7mailsent）が発生したらデータを送信する」コードを常時配信
GTMのコンテナに入って、ワークスペースの左メニューからタグをクリック。
タグ画面の右上[新規]ボタンをクリックし、以下の内容を入力しましょう。完了したら、右上の[保存]ボタンをクリックします。
・タグ名：フォーム送信成功イベント用JSコード（任意の文字列）
・タグの種類：カスタムHTML
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
window.dataLayer.push({ 'event': 'wpcf7_submission' });
}, false);
</script>・トリガー：All Pages(ページビュー)
フォーム種別のCVをあげたい場合、eventとは別のキー（ここではwpcf7_type）を用意します。
event.detail.contactFormIdでContact Form 7フォームのIDが取得できるので、wpcf7_typeに渡してあげましょう。
（フォームID…[contact-form-7 id="000" title="コンタクトフォーム 1"]の000の部分）
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
window.dataLayer.push({ 'event': 'wpcf7_submission', 'wpcf7_type': event.detail.contactFormId });
}, false);
</script>なお、ここではContact Form 7で設定したフォーム名をJS上で取得するのが大変そうだったのでフォームIDのまま計測しています。
フォームIDじゃ分かりにくいという場合は、あらかじめevent.detail.contactFormIdの値別にフォーム名を用意してあげて、その文字列をwpcf7_typeに渡してあげると良さそう。
B. 「Aのデータを受け取ったらGA4にイベントを送信する」という仕組みを設定
トリガーの作成
ワークスペースの左メニューからトリガーをクリックします。
トリガー画面右上の[新規]ボタンをクリック、以下の内容を入力したら右上のボタンから保存しましょう。
・トリガー名：フォーム送信成功トリガー（任意の文字列）
・トリガータイプ：カスタムイベント
・イベント名：wpcf7_submission
・トリガーの発生場所：すべてのカスタムイベント
タグの作成
次に左メニューからタグをクリック、新規作成していきます。
・タグ：フォーム送信成功イベント（任意の文字列）
・タグの種類：Googleアナリティクス：GA4イベント
・設定タグ：Googleアナリティクス GA4設定
・イベント名：form_sent_OK（任意の文字列）
・イベントパラメーター：
パラメータ名：wpcf7_type（任意の文字列）、値：{{Page Path}}
・トリガー：フォーム送信成功トリガー
フォーム種類別のCVをあげる場合、タグの前に変数の設定をしてあげましょう。
その後、タグ設定を上記の内容から一部変更します。
● 変数の設定（ユーザー定義変数を新規作成）
・変数名：wpcf7_type（タグで設定した「パラメータ名」と一致する文字列）
・変数のタイプ：データレイヤーの変数
・データレイヤーの変数名：wpcf7_type（同上）
● タグ設定（「フォーム送信成功イベント」から変更部分）
・イベントパラメーター：
パラメータ名：wpcf7_type、値：{{wpcf7_type}} ※ ここを{{Page Path}}から変更
ここまでできたら、GTMのプレビューをしましょう。
図のように発火が確認できたら公開します。
GA4での設定
C-1.CVの設定
カスタムイベントの登録
まずはカスタムイベントを登録します。
GAを開き、管理＞イベントから[イベントを作成]ボタンをクリック。
「イベントの作成」画面から右上[作成]ボタンをクリックして、上から順に入力していきましょう。
完了したら[作成]ボタンをクリックします。
・カスタムイベント名：CV_form_sent_OK（GA上に表示される任意の文字列）
・パラメーター →「event_name」
・演算子→次と等しい
・値 →「form_sent_OK」（GTMで入力したイベント名）
コンバージョンの登録
次に作成したイベントをコンバージョンとして設定します。
管理＞コンバージョンから[新しいコンバージョンイベント]ボタンをクリック。
「新しいイベント名」に、先ほど新規作成したイベント名（CV_form_sent_OK）を入力し、[保存]をクリックしましょう。
追加したCVの「コンバージョンとしてマークを付ける」トグルボタンが有効になっていることを確認できたらOKです！
※ GA4はCVとして登録しないとカウントされない仕様のため、イベント作成→コンバージョン登録の流れが必要だそう
C-2.CVをレポート上でカスタマイズする
イベントパラメータをカスタムディメンションに登録していきます。
管理＞カスタム定義から[カスタムディメンションを作成]ボタンをクリックし、以下を順に入力します。
終わったら右上の[保存]ボタンをクリックしましょう。
・ディメンション名：ページ名（任意の名称）
・範囲：イベント
・イベントパラメータ：wpcf7_type（GTMで設定した「パラメータ名」と一致する文字列）
以上で準備はOKです。
GAホーム画面から左メニューレポートをクリックし、エンゲージメント＞コンバージョンを開きます。
表のデフォルトチャネルグループ右の「＋」をクリックし、カスタム＞ページ名を選択しましょう。
こうするとカスタムディメンションで登録した名称・パラメータで区分された状態で、レポートを確認できるようになります。
おわりに
この方法だと設定後にフォームを増やすことになっても、GA・GTM側の作業は特に必要がないので汎用的で便利だと思いました。
GTMやGA4の設定から正式な計測まで少し時間がかかるので、焦らず時間をおいて様子みると良さそう。
ちなみにGTMの設定がうまくいかない場合は、ひとまず先にGA4の設定を行ってからじっくりプレビューしつつ検証するのがおすすめです。（GTMがうまく動いたらすぐGAで確認ができる）
GTMとGA4の作業順は前後しても問題ありません。
以上、複数フォーム対応のGA4＆GTMでContact Form 7のコンバージョンを計測する方法についてでした！