やりたいこと
Google Analytics 4(GA4)とGoogle Tag Manager(GTM)でWordPressのContact form 7 (CF7)で成功した送信をイベント計測できるようにする。
経緯・背景
Google Analytics 4(GA4)になってから旧バージョンではデフォルトで使えてたお気に入りの機能がいくつか使えなくなっている。ややこしそうなのと、コンバージョンに残っている類似したものである程度推測を立ていたり、実際の登録者数の数値は取れていたので後回しにしていた。
だがGoogleリスティング広告(検索時に表示されるやつ)を試しに再開してみようということになって、広告経由できたのかどうかや、自然流入などとの違いを計測して費用対効果をみていく必要があった。
旧版のときからアナリティクスのコードはGoogle Tag Manager(GTM)を使って挿入し運営していた。仕組みを理解したり使いこなせているとはいえないレベルだけれど知りたい情報は手に入る。マーケティング強化したいなら本番環境を触らずGTMを通じて設定追加変更したり、プレビューで実行確認できるので便利。
計測したい対象サイトはWordPress(WP)で運営されており、登録フォームはContact form 7 (CF7)。最後の登録ボタンを押すとform_submitというイベントが検知できるものの、必須項目が未記入で登録（送信）失敗でも出てくるので仮に何回も登録をミスった人がいたらそれだけで数値が大きく変わってしまう。そんなミスでもコンバージョンに大きく影響がでてしまうので、しっかりと登録完了（送信完了）まで至ったものだけを計測していく必要がある。
ただ、それぞれのツールはメジャーではあるもののGA4自体がまだ比較的新しいため情報が少ないうえニッチなので参照サイトを探す必要がある。
今回はその解決になったサイトがあったので、あんま理解できていないのとすぐ忘れるだろうから他のフォームにも使えるように（参照サイトではそのような利用を前提としてはつくっていないと注釈有り）ここでメモをしておく。
理解間違ってるかもしれないけど。（以下の自分の解釈による情報は間違っている可能性があるので注意必要）
解決方法
参考サイト：https://www.analyticsmania.com/post/contact-form-7-event-tracking-with-google-tag-manager/
細かい手順をスクショや動画でも説明してくれているので英語がわからなくてもなんとなくわかる。
この手のツールでテキストのレクチャーはわかりにくいのでありがたい。この点まだGPTでは難しい。
おおまかな流れはこのように理解している。
- まずGTMでGA4で検測（トリガーがAll pagesになっていたのでこの機会に望ましいとされるInitialization All Pages）
- CF7の送信成功時にイベントを検知できるようにHTMLtagを挿入
- GTMプレビューで実行し検知した送信成功イベント情報からフォームのidなどの情報を取得
- 取得した情報を元にGA4へイベント結果を送信するトリガーや変数やtagを作成
- プレビューでテストしてGA4のDebugViewで計測可能か確認
- テストが成功したらGTMの変更内容を公開して完了
詳細は参考サイトやその動画を見てほしい。
自分の場合には他のフォームでも計測していく可能性があるので、被らないようにフィルタリングしたり変数作成端折ったりしているので若干異なるもののプレビューとDebugViewで期待する動作の確認ができたので「いまのところ」良しとする。
そのまま真似するだけが無難そう。
参照サイトでもふれているがContact Form 7の開発者の公式サイトでは送信（今回でいう登録ボタン）が成功したかどうかについてDOMイベントを提供しているので、上記の参考サイト以外でもそれをどう扱うかで個別に設定できそう。
イベントハンドラーというものらしい。書き方によってformの入力内容とかも引っ張ってこれるので知っておくと便利そう。
個人的に躓いたところ
久しぶりに触ると余計ちんぷんかんぷんだった以外に気をつける点があった
- SafariでGTMプレビュー画面が起動しないのでChromeで作業すると解決
- GA4でDebug Viewに上記で作成したイベントが検知できない問題でChromeの拡張機能オプトアウトをオフにすると解決
内容おかしなところあるとおもうけどだいたいはこんなかんじ。
他の方にも参考になれば。
