Contact Form 7のコンバージョン計測をGA4・GTMで設定する方法
悩む人
・コンバージョン計測にコードを書く必要はある?
ホームページからの問い合わせが何件あったか。Web集客では、アクセス数以上に気になる数字です。
しかし、WordPressで定番のお問い合わせフォームプラグインContact Form 7では、送信してもページが切り替わりません。そのため「サンクスページが表示されたら1件」という一般的な計測方法が使えません。
とはいえ、サンクスページがなくても計測はできます。GTMを使えばサイトのファイルを編集せずに設定でき、GA4だけで計測する場合はテーマなどにコードを追加します。
本記事では、Googleタグマネージャー(GTM)を使う方法と、GA4だけで設定する方法の両方を解説します。
小さなウェブ集客のミカタ 阿部
あわせて読みたい
Googleタグマネージャー(GTM)とGoogleアナリティクス(GA4)の違いは?役割と使い分けを解説
この記事を読むサンクスページがなくても問い合わせ送信数は計測できる
問い合わせの計測でよく紹介されるのが、サンクスページ(送信完了ページ)の表示を数える方法です。送信後に「/thanks/」のようなページへ移動させ、そのページが表示された回数を問い合わせ数とみなします。
一方、Contact Form 7は同じページのまま「送信しました」というメッセージを表示する仕組み。ページが変わらないので、ページの表示では数えられません。
そこで今回計測に使うのが、送信が完了した瞬間に発生するイベントです。
| サンクスページ方式 | 送信完了イベント方式 | |
|---|---|---|
| 必要なもの | サンクスページ+リダイレクト設定 | イベントの取得設定のみ |
| ページ移動 | あり | なし |
| 直接アクセスでの誤計測 | 起こりうる | 起こらない |
小さなウェブ集客のミカタ 阿部
ボタンのクリックではなく「送信完了」を計測する
よくある間違いが、「送信」ボタンのクリック数を問い合わせ数として数えてしまうこと。
送信ボタンは、入力漏れやメールアドレスの形式ミスでエラーになったときも押されています。1人がエラーで3回押せば、それだけで3件分。これでは実際の問い合わせ数とズレてしまいます。
GA4の拡張計測機能にもフォーム送信を自動で拾う設定がありますが、Contact Form 7のようにページが切り替わらないフォームでは、正確に取れないことがあります。
成果として数えるべきなのは、送信が成功した回数。ここを基準にしましょう。
Contact Form 7の送信完了を計測する仕組み
Contact Form 7は、送信の結果に応じて次のようなイベントをページ上で発生させています。
・wpcf7invalid:入力内容にエラーがあったとき
・wpcf7spam:スパムと判定されたとき
・wpcf7mailfailed:メールの送信に失敗したとき
・wpcf7submit:上記すべて(送信ボタンが押されて処理が終わったとき)
小さなウェブ集客のミカタ 阿部
計測の流れはシンプルです。

上の図のように、Contact Form 7が発生させる送信完了イベント「wpcf7mailsent」を受け取り、GA4にイベントとして送るのが基本の流れ。
イベント名は自由につけられますが、Googleが推奨している「generate_lead」を使うのがおすすめです。あとはGA4でキーイベントに設定すれば、問い合わせ数として集計できます。
on_sent_okは古い設定方法
Contact Form 7のバージョン5.0より前は、「その他の設定」にon_sent_okという項目を書き込んで、送信成功時の処理を指定する方法が使われていました。
古い解説記事では今もこの方法が紹介されていることがありますが、on_sent_okはバージョン5.0で廃止済み。古いバージョンを使っている場合はContact Form 7を最新版に更新したうえで、wpcf7mailsentを使いましょう。
GTMを使うか、GA4だけで計測するか
設定方法はタイトルの通り以下の2つがあります。
・GA4だけの方法
以下にそれぞれの違いを入れたので確認しつつ、実際の計測実装に進んでください。
| GTMを使う方法 | GA4だけの方法 | |
|---|---|---|
| コードの編集 | 最初にGTMのコンテナの設置が必要 | テーマやプラグインにコードを追加 |
| 設定の変更 | 管理画面から可能 | コードの修正が必要 |
| 動作確認 | プレビューモードで確認できる | リアルタイムレポートで確認 |
| 向いている人 | ほかの計測も増やしたい人 | コードを触れる人、計測は最小限でいい人 |
すでにGTMを入れているなら、迷わずGTMで設定するのがおすすめ。電話タップやボタンクリックなど、今後ほかの計測を増やすときも同じ管理画面で済みます。
Googleタグマネージャーで計測する方法
GTMとGA4の設置が済んでいる前提で進めます。まだの方は、先に導入を済ませておいてください。
なお、GTMやGA4の設置がまだの方は、設置だけをお任せいただくこともできます(5,000円〜)。
またGA4の測定ID(G-から始まる番号)が必要になるのでGA4の「管理」→「データストリーム」から事前に確認しておきましょう。
送信完了イベントを取得する
まずは、Contact Form 7のwpcf7mailsentを受け取って、GTMに知らせるタグを作ります。
-
GTMを開き、サイドバーの「タグ」をクリックし、右側の「新規」をクリックします。

-
タグの名称は「CF7 – 送信完了リスナー」のようなわかりやすい名前をつけます。

-
タグの種類をクリックし「カスタムHTML」を選択。次のコードを貼り付けます。

<script> document.addEventListener('wpcf7mailsent', function (event) { window.dataLayer = window.dataLayer || []; window.dataLayer.push({ event: 'cf7_mailsent', cf7_form_id: event.detail.contactFormId }); }, false); </script> -
トリガーは「All Pages」を選び「保存」ボタンを押しましょう。

GA4イベントタグとトリガーを作成する
次に、その合図を受け取ったらGA4にイベントを送る設定です。
トリガーの作成
-
サイドバーの「トリガー」をクリックし「新規」をクリックします。
小さなウェブ集客のミカタ 阿部
トリガーが表示されていない場合、「さらに表示」をクリックすると「トリガー」が表示されます。
-
「トリガーの種類」をクリックし「カスタム イベント」を選択。

-
トリガーの名称は「CF7 – 送信完了」などわかりやすい名前をつけます。

-
イベント名に「cf7_mailsent」と入力して保存します。

GA4イベントタグの作成
-
「タグ」画面に戻り、さきほどと同様に「新規」をクリックし、「タグの種類」より「Google アナリティクス」→「Google アナリティクス: GA4 イベント」をクリックします。

-
表示された項目に以下の内容を入力します。
・測定ID:GA4の測定ID(G-から始まるもの)
・イベント名:generate_lead
-
トリガーをクリックし、さきほど作成した「CF7 – 送信完了」をクリックします。

-
タグ名称は「GA4 – CF7送信完了」とし、「保存」ボタンをクリックします。

プレビューモードで確認する
設定が終わったら、公開前にプレビューモードで動作を確認します。
-
GTMの画面右上の「プレビュー」をクリックします。

-
自分のサイトのURLを入力して「リンク」をクリックします。

-
別ウィンドウでサイトが表示されたら右下にタグアシスタントがあることを確認し、問い合わせフォームページに遷移し送信します。

-
左側のイベント一覧に「cf7_mailsent」が表示され、GA4イベントタグに回数がついていることを確認します。

あわせて、わざと必須項目を空にして送信し、エラーのときにはタグに回数がつかないことも確認しておきましょう。問題なければ、GTM画面に戻り右上の「公開」で本番に反映します。
GA4だけ(コード)で計測する方法
GTMを使わない場合は、GA4のタグ(gtag.js)が設置されているサイトに、次のコードを追加します。Site Kit by Googleやテーマの設定欄からGA4を設置している場合でも使えます。
送信完了時にGA4へイベントを送る
子テーマのfunctions.phpなどに追加します。
add_action('wp_footer', function () {
?>
<script>
document.addEventListener('wpcf7mailsent', function (event) {
if (typeof gtag !== 'function') return;
gtag('event', 'generate_lead', {
form_id: event.detail.contactFormId
});
});
</script>
<?php
});
親テーマのfunctions.phpに書くと、テーマの更新で消えてしまいます。子テーマか、コードを追加できるプラグインを使いましょう。
※GTMの中でGA4を設定している場合は、gtag関数がページに存在しないため、このコードでは計測できません。その場合はGTMで計測する方法を使いましょう。
リアルタイムレポートで確認する
コードを追加したら、フォームからテスト送信してみます。
GA4の「レポート」→「リアルタイムの概要」を開き、イベント数のカードに「generate_lead」が表示されれば成功です。

問い合わせ送信をキーイベントに設定する
現状のままでも数はカウントできますが、キーイベントを設定することでさらに集客の分析や広告に活かすことができるので設定していきましょう。
キーイベントとして登録する
-
GA4の「管理」→「データの表示」→「イベント」を開く
-
イベント一覧から「generate_lead」を探す
-
「キーイベントとしてマークを付ける」をオンにする
イベント一覧に表示されるまでには、最初の送信から1日ほどかかることがあります。すぐ出てこなくても時間を置くことで表示されるので表示されるまで触らずに待ちましょう。
問い合わせ数を確認する方法
キーイベントに設定すると、「レポート」→「エンゲージメント」→「キーイベント」から問い合わせ数を確認できます。
小さなウェブ集客のミカタ 阿部
問い合わせフォーム計測でよくあるトラブル
まず計測が正常にとれない時は以下の3つが原因となることが多いです。
・広告ブロッカーが有効なブラウザでテストしていないか
・イベント名のスペルが、トリガーとタグで一致しているか
またキーイベントを設定してから、GA4の通常のレポートは反映まで24〜48時間かかるため、確認はリアルタイムレポートかDebugViewで行いましょう。
送信数が実際の問い合わせ数と合わない
GA4の数値が多い場合は、スパムが送信成功として通っている可能性があります。
逆に少ない場合は、広告ブロッカーやCookieの同意設定によって計測されていないユーザーがいるため。GA4の数値は「目安」と考え、実際の問い合わせ件数は受信メールで確認するのが確実です。
同じ問い合わせが複数回計測される
よくある原因は次の2つです。
・送信完了リスナーのタグに、複数のトリガーが設定されている
特にGA4で計測を行っていてGTMに切り替えたときは、GA4コードの削除忘れに注意が必要です。
ブラウザで重複を確認する方法
-
F12でデベロッパーツールを開き、Networkタブを選ぶ

-
フィルタ欄に
collect?v=2と入力する
-
フォームからテスト送信する
-
en=generate_leadを含むリクエストが2行あれば二重計測です。ステータスが「204」なら、正常に送信されています。
キャッシュやJavaScript最適化の影響
キャッシュ系のプラグインやサーバーの設定で「JavaScriptの遅延読み込み」を有効にしていると、GTMやgtag.jsの読み込みが遅れ、送信完了イベントを取りこぼすことがあります。
計測がうまくいかない場合は、GTMやgtag.jsのスクリプトを遅延読み込みの対象から除外してみてください。
上記を確認しても計測がうまくいかない場合は、原因の調査からご相談いただけます。
当サイトではどのように問い合わせを計測しているか
当サイトでは、本記事で紹介したGTMの方法でContact Form 7の送信完了を計測しています。そのうえで、運用のために次の2つもあわせて設定しています。
・計測が止まったら通知が届くようにする
自分のアクセスやイベント計測を無効にする
方法はいくつかありますが、一番手軽なのがGoogle公式の「Google アナリティクス オプトアウト アドオン」です。
Google Analytics オプトアウト アドオン (by Google)
Chromeなどのブラウザにインストールして有効にするだけで、自分のアクセスやイベントがGA4に送られなくなります。
ただし、アドオンを入れたブラウザではGA4への送信そのものが止まるため、フォームのテスト送信も記録されません。計測を確認したいときは、シークレットウィンドウ(拡張機能は通常オフ)や別のブラウザでテストしましょう。
計測が止まったら通知が届くようにする
プラグインの更新やキャッシュの設定変更をきっかけに、いつの間にか計測が止まっていた、というのは実はよくあるトラブルです。
GA4の「カスタムインサイト」を使えば、問い合わせ数が0件のときにメールで知らせてもらえます。
-
GA4の「ホーム」の一番下にある「すべての統計情報を表示」を開く

-
右上の「作成」→「新規作成」を選ぶ

-
「ゼロから作成」内の「新規作成」をクリックします。

-
評価の頻度を「月別」、指標に「キーイベント」を選び、条件を「次の値以下」にし「0」を入力します。

-
インサイト名に「問い合わせ0件アラート(月次)」を入力、受信者リストに通知を受け取りたいメールアドレスを入力し右上の「作成」をクリックします。

小さなウェブ集客のミカタ 阿部
まとめ|Contact Form 7の送信完了はGA4・GTMで計測できる
いつのまにか長編になってしまいましたが、Contact Form 7の計測方法を書いてみました。
最初の設定は少々面倒ですが、お問い合わせの計測ができるのは大きなアドバンテージとなるためぜひトライしてみてください。
特に重要なのは
・wpcf7submitではなくwpcf7mailsentを使う
です。
計測の設定、まるごとお任せいただけます
悩む人
「GTMの画面を触るのが不安で、なかなか手が出ない」
小さなウェブ集客のミカタでは、GA4・GTMの設置を5,000円〜、問い合わせの計測設定込みで15,000円〜(税抜)で承っています。設定後は、問い合わせ数の確認方法もあわせてお伝えします。他社で制作されたサイトでも対応できます。