- WordPressでContactForm7プラグインを使っている
- フォームの送信数をGA4で確認したい
- GTM(Googleタグマネージャーも使っている)
WordPressで問い合わせフォームを構築する時に、ContactForm7というプラグインを使っている人も多いです。そして、1番気になるのは問い合わせフォームから何回「送信ボタン」が押されたか?ということですよね。
ここでは、サンクスページ(問い合わせ完了ページ)を特に用意しなくても、GTM(Googleタグマネージャー)を使ってGA4(Googleアナリティクス)で計測できるように設定していきます。
![ContactForm7のフォーム送信数GA4・GTMの設定フロー](https://create-link.jp/clb/wp-content/uploads/2024/07/contact-gtm-ga4-flow-1024x217.png)
1.Googleタグマネージャーの設定をする
1-1. 変数を追加する
Googleタグマネージャーにアクセスし、左メニューの「変数」をクリックします。
![GTM変数を追加](https://create-link.jp/clb/wp-content/uploads/2024/07/cf7_gtm_01-1024x542.png)
画面右上の「設定」ボタンをクリックします。
![GTM変数雨設定](https://create-link.jp/clb/wp-content/uploads/2024/07/cf7_gtm_03-1024x210.png)
組み込み変数の設定画面の「フォーム」の下にある変数すべてにチェックを入れます。
![GTM組み込み変数を追加](https://create-link.jp/clb/wp-content/uploads/2024/07/cf7_gtm_02-1024x712.png)
画面上の「×」を押すと、変数一覧に今チェックを入れたFormシリーズの変数が増えました。
![GTM組み込み変数一覧](https://create-link.jp/clb/wp-content/uploads/2024/07/cf7_gtm_04-1024x475.png)
1-2. タグを追加する
変数の設定が終わったら、次はタグを追加していきます。左メニューの「タグ」をクリックし、画面右上の「新規」ボタンをクリックします
![GTMタグを追加する](https://create-link.jp/clb/wp-content/uploads/2024/07/cf7_gtm_05-1024x325.png)
「タグの設定」の右側にある鉛筆アイコンをクリックします
![GTMタグを追加する](https://create-link.jp/clb/wp-content/uploads/2024/07/cf7_gtm_06-1024x364.png)
タグタイプを選択画面から「Googleアナリティクス」をクリックします
![GTMでGA4イベント追加](https://create-link.jp/clb/wp-content/uploads/2024/07/cf7_gtm_07-1024x563.png)
表示された中から「Googleアナリティクス:GA4イベント」をクリックします
![GTMでGA4イベント追加](https://create-link.jp/clb/wp-content/uploads/2024/07/cf7_gtm_08-1024x436.png)
次に、「測定ID」と「イベント名」を入力します。
- 測定ID(ContactForm7が設置されているサイトに設定したGA4のトラッキングコード)
- イベント名:contact-finished(GA4で表示されるイベント名)
![GTMタグの設定](https://create-link.jp/clb/wp-content/uploads/2024/07/cf7_gtm_09-1024x449.png)
イベント名を入力します。ここでは、「問い合わせ送信イベント」としました。
![GTMイベント保存](https://create-link.jp/clb/wp-content/uploads/2024/07/cf7_gtm_10-1024x347.png)
1-3. トリガーを追加する
イベントの設定が終わったら、次はトリガーを追加していきます。トリガーとは、イベントを発生させるタイミングのことです。ここでは、フォームの送信ボタンが押された時とします。
画面右上の鉛筆アイコンをクリックします。
![GTMトリガー追加](https://create-link.jp/clb/wp-content/uploads/2024/07/cf7_gtm_11-1024x143.png)
さらに、画面右上の「+」をクリックします。
![GTMトリガー追加](https://create-link.jp/clb/wp-content/uploads/2024/07/cf7_gtm_12-1024x183.png)
トリガーの設定画面で、鉛筆アイコンをクリックします。
![GTMトリガー設定](https://create-link.jp/clb/wp-content/uploads/2024/07/cf7_gtm_13-1024x187.png)
「トリガーのタイプを選択」は「ユーザーエンゲージメント」の「フォームの送信」を選択します。
![GTMトリガータイプを選択](https://create-link.jp/clb/wp-content/uploads/2024/07/cf7_gtm_14-1024x806.png)
「このトリガーの発生場所」は「一部のフォーム」を選択し、「イベント発生時にこれらすべての条件がtrueの場合にこのトリガーを配信します」では、1番左を「Form Classes」、1番右に「wpcf7-form」と入力します。
ホームページをWordpress以外で作っている場合でも、お問い合わせフォームってありますよね。その場合は、1番左を「Page Path」、1番右を問い合わせページのファイル名(例 /contact/)にすることで同じように動作します。また、1番左を「Page URL」、1番右を問い合わせページのURL(例 https://create-link.jp/contact/)に設定してもOKです。
![GTMトリガー設定](https://create-link.jp/clb/wp-content/uploads/2024/07/cf7_gtm_15-1024x492.png)
イベント、トリガーの設定が終わったら、「保存」ボタンを押します。
これまで設定した内容を公開するために、「公開」ボタンを押します。
![GTM公開ボタンを押す](https://create-link.jp/clb/wp-content/uploads/2024/07/cf7_gtm_16_2-1024x243.png)
バージョン名や説明は、今回どんな作業をしたのか?何を追加したか?変更したか?が分かるようにしておくと便利ですが、空白でもOKです。「公開」ボタンを押します。
![GTM公開ボタンを押す](https://create-link.jp/clb/wp-content/uploads/2024/07/cf7_gtm_16_3-1024x333.png)
1-4. 正しく設定されているか確認する
ここまで、イベントやトリガーの設定をしてきましたが、正常に設定されているのか?不安になりますよね。Googleタグマネージャー上でテストができるので、早速確認してみます。
画面右上の「プレビュー」をクリックします。
![GTMプレビュー画面](https://create-link.jp/clb/wp-content/uploads/2024/07/cf7_gtm_17-1024x280.png)
「Your website’s URL」には問い合わせページのURL(https://….)を記入し、その下の「Include debug signal in the URL」はチェックを外します。「Connect」ボタンを押します。
![GTM Connect Tag Assistant to your site](https://create-link.jp/clb/wp-content/uploads/2024/07/cf7_gtm_18-1024x746.png)
問い合わせページが表示され、画面右下に「Tag Assistant Connected」と表示されれば、ひとまずタグ設定はできています。この画面は後ほど使いますので、閉じないでくださいね。
![Google Tag Assistant](https://create-link.jp/clb/wp-content/uploads/2024/07/cf7_gtm_19-1024x530.png)
Googleタグマネージャーの画面に戻り、「Continue」ボタンを押します。
![GTM Connected](https://create-link.jp/clb/wp-content/uploads/2024/07/cf7_gtm_20-1024x562.png)
Summary画面の「Tags Not Fired」に、さきほど設定したイベント名(問い合わせ送信イベント)が表示されていればOKです。Tags Not Firedというのは、発火していない、つまり送信ボタンが押されていないという状態なので問題ありません。
![GTMのTagsNotFired](https://create-link.jp/clb/wp-content/uploads/2024/07/cf7_gtm_21-1024x582.png)
では、さきほど残しておいた問い合わせページ画面に戻り、問い合わせ内容を記入して送信ボタンを押してみます。その後、GoogleタグマネージャーのSummary画面に戻り、「Tags Fired」にイベント名(問い合わせ送信イベント)が表示されていれば、正しく設定されています!
![GTMのTagsFired](https://create-link.jp/clb/wp-content/uploads/2024/07/cf7_gtm_22-1024x538.png)
2.GA4(アナリティクス)で確認する
Googleタグマネージャーの設定が終わったので、本来の目的であるGA4で確認してみます。そのために、もう1度問い合わせフォームから問い合わせを入れてみます。
「レポート」から「リアルタイム」を開き、Googleタグマネージャーで設定したイベント名「contact-finished」が表示されたらOKです!
![GA4でイベント数を確認する](https://create-link.jp/clb/wp-content/uploads/2024/07/cf7_gtm_23-1024x676.png)
3.GA4(アナリティクス)でキーイベントに設定する
最後に、設定(画面左下のネジマーク)から、「プロパティ設定」ー「データの表示」ー「イベント」をクリックし、「既存のイベント」一覧に表示されたイベント名(ここでは「contact-finished」)の「キーイベントとしてマークを付ける」をONにします。
これで、問い合わせ数が「イベント」回数として表示されるようになります。
![GA4のキーイベント設定](https://create-link.jp/clb/wp-content/uploads/2024/07/cf7_gtm_24-1024x312.png)