2023.1.7
Contact form7のメール送信イベントをGA4で取得する
ホームページの運用する上で、目標（ゴール）はお問い合わせフォームや予約フォーム、エントリーフォームからメールが送信されること！が多いと思います。
実際に何件送信されているのか？どんなユーザーがお問い合わせされているの？どこから来た人がエントリーしたのなど、気になるところです。
今回はGA4でメール送信イベントを取得する方法をご紹介します。
コンバージョンを取得する方法
WordpressのContactForm7プラグインを利用しメールフォームを作成した場合、
メールを送信したかどうかを検証する方法として、以下の2つがあります。
- 「送信」ボタンをクリックされたイベントをタグマネージャーで取得し、アナリティクスで解析する方法
- ContactForm7で確認画面＆サンクスページを表示し、サンクスページが表示されたことがゴールとする方法
↓↓↓こちらについては以下のコラムで紹介していますので、参照ください。
「Contact Form 7 Multi-Step Forms を使い、確認画面、サンクスページを表示する方法」
今回は１の
「送信」ボタンをクリックされた時のイベントをタグマネージャーで取得し、アナリティクスで解析する方法を説明いたします。
タグマネージャーでメール送信イベントを取得しGA4で解析する方法
タグマネージャーとGA4を連携する
↓↓↓こちらについては以下のコラムで紹介していますので、参照ください。
【GA4移行ガイド】GA4のオススメ初期設定！GTMとの連携も解説
タグマネージャー：フォーム関連の変数を追加
まずはメール送信を取得するための設定をタグマネージャーで行います。
タグマネージャーを開き、左側の「変数」をクリックし、「設定」ボタンをクリックします。
組み込み変数の設定が表示されるので、フォーム関連の変数にチェックを付けます。
チェックが付けたら、組み込み変数の設定画面を×して閉じます。
組み込み変数にForm〇〇が追加されました。
Form〇〇を組み込んでおくと…
メールフォームなど送信されたフォームのHTML要素の値を取得します。
今回のようにClassで絞り込んだり、送信元のURLを取得したり、送信されたテキストを取得することのできます。
タグマネージャー：タグの設定
タグを開き「新規」ボタンをクリックします。
タグタイプは「Googleアナリティクス：GA4イベント」を選択します。
設定タグは「GA4設定」
イベント名は自分で分かりやすい名前を設定しましょう。今回は「Form_send」としました。
タグの名前を「メール送信イベント」などつけて、「保存」しましょう。
タグマネージャー：トリガーの設定
トリガーを開き「新規」ボタンをクリックします。
トリガータイプは「フォームの送信」を選択します。
このトリガーの発生場所は一部のフォームを選択し、「Form Classes」で「wpcf7-form」を「含む」として設定します。
フォームを指定したい場合は、「Page Path」などでページを設定してもよいと思います。
トリガーの名前を設定し、保存します。
ここまで設定出来たら、「公開」しましょう。
タグマネージャー：プレビューで正しく設定できているか確認
タグマネージャーでは、設定はしたものの正しく発火するか確認することができるツールを用意してくれています。
ワークスペースの右上の「プレビュー」ボタンをクリックします。
サイトのURLを入力し、「Include debug signal in the URL （URL にデバッグ シグナルを含める）」のチェックをオフにして「Connect」ボタンをクリックします。
プレビューモードで接続できない場合
Analyticsのトラッキングコードを設定する際に、「All in One SEO」等のように除外ユーザーを設定している場合は、管理画面にログインしているとAnalyticsのコードが記述されないため、プレビューモードを開始することができません。
その場合は管理画面からログアウトしてから、もう一度プレビューモードで開いてみましょう。
プレビューモードが起動されると以下のような画面が表示されます。
Tags Fired ：発火したタグの一覧
Tags Not Fired ：発火しなかったタグの一覧
今回の「メール送信」はTags Not Fired に含まれていますが、これで正解です！
メールを送信して初めてイベントが発生し、発火します。
それを試してみましょう！
プレビューモードで開いた際に表示された該当のサイト画面から実際にメールをしてみます。メールを送信後、Tags Fired の一覧に入れば、正しく設定されていることになります。
これで正しくタグマネージャーの設定ができました。
GoogleAnaryticsGA4で確認する
アナリティクスを開き、「レポート」の「リアルタイム」をクリックします。
イベント数の部分に上記で設定した「Form_send」が表示されていれば、正しく設定されています。
ただ、エンゲージメントの「イベント」に入ってくるのには少し時間がかかります。
まとめ
ユーザビリティの観点から考えるとサンクスページが開く方がよいのかもしれませんが、ContactForm7そのままの状態で比較的簡単にメール送信の取得が可能です。
今回紹介したのは、GA4のレポートで○件取得できた！ということしかわかりません。また別のコラムで見やすい探索レポートの作成方法などを紹介できたらと思います。
株式会社イケル Webディレクター
「イケルにお願いしてよかった！」と思っていただけるよう、お客様とのコミュニケーションを大事にして、ホームページを作成しています。デザイン・機能面はもちろん、ユーザーが使いやすく、直感的に分かるサイト作りを目指しています。コラムの一覧へ戻る
