BLOGブログ

Contact Form 7の送信をGoogle広告のコンバージョンにする方法|GTMとdataLayerで正しく計測する

竹節 大輝 /

Web制作・ホームページ制作 Webマーケティング

Google広告を配信するなら、「広告を見た人のうち、何人がお問い合わせしてくれたか」を正しく数えることが欠かせません。数えられていないと、広告の成果がわからず、Google広告の自動入札もうまく働きません。

WordPressのお問い合わせフォームでよく使われる Contact Form 7 の場合、送信に成功したときのイベントで、Googleタグマネージャー(GTM)にデータを送り、GTMからGoogle広告のコンバージョンタグを動かす のが、数え間違いの少ない方法です。

この記事では、Cruwが自社のランディングページ(サイト改善おまかせパック)で、Google広告の配信に合わせて実際に設定した手順を、コードとあわせて紹介します。

  • 送信成功のイベント(wpcf7mailsent)で、dataLayer にデータを送るコード
  • GTMのトリガー・タグの設定と、プレビューでの確認のしかた
  • 数え間違い・取りこぼしを防ぐための注意点

結論:送信成功のイベントで dataLayer に送り、GTMでCVタグを動かす

全体の流れは、次のとおりです。

  1. Google広告で、コンバージョンアクションを作る(コンバージョンIDとラベルを控える)
  2. Contact Form 7 の送信成功のイベント(wpcf7mailsent)で、dataLayer に generate_lead を送る
  3. GTMで、generate_lead を条件にしたトリガーを作り、Google広告のコンバージョンタグを動かす
  4. GTMのプレビューでテスト送信をして、タグが動くことを確かめてから公開する
お問い合わせフォームの送信から、GTMを通ってGoogle広告とGA4に成果が届くまでの流れの図
フォームの送信成功 → dataLayer → GTM → Google広告・GA4 の流れ

dataLayer(データレイヤー)は、Webページから GTM に「今こんなことが起きた」と伝えるための入れ物です。ページ側は「送信に成功した」ことだけを伝え、どこに送るかは GTM で決める役割分担にしておくと、あとから広告が増えても対応しやすくなります。

サンクスページのURLで計測する方法との違い

Contact Form 7 では、送信後にサンクスページ(「お問い合わせありがとうございます」のページ)へ移動させ、そのURLが表示されたらコンバージョンとして数える方法もよく使われます。設定がかんたんな一方で、次のような数え間違いが起きやすくなります。

サンクスページのURLで計測送信成功のイベントで計測(この記事の方法)
設定のしやすさかんたんコードの追加が少し必要
ページの再読み込み・ブックマークからのアクセス数えてしまうことがある数えない
複数のフォームの見分けサンクスページを分ける必要があるフォームごとに名前を付けて見分けられる
送信に失敗したときサンクスページへ移動しなければ数えない数えない

Cruwのランディングページでは、送信成功のイベントで計測したうえで、送信後にサンクスページへ移動させています。サンクスページは、検索結果に出ないように noindex にしています(設定方法はサンクスページはnoindexにすべき?で紹介しています)。

手順1:Google広告でコンバージョンアクションを作る

Google広告の管理画面で、「目標」→「コンバージョン」→「新しいコンバージョンアクション」→「ウェブサイト」を選び、手動で設定します。

項目設定の例
カテゴリ見込み顧客フォームの送信
コンバージョン名〇〇 お問い合わせ(あとで見てわかる名前)
カウント方法1回(同じ人が何度送っても1件と数える)

作成すると、コンバージョンID(数字)とコンバージョンラベル(英数字)が表示されます。GTMの設定で使うので控えておきましょう。

手順2:送信成功のイベントで dataLayer に送るコード

Contact Form 7 は、送信の結果に応じて、ページ上でイベントを発生させます。お問い合わせの計測に使うのは、メールの送信まで成功したときの wpcf7mailsent です。

イベント発生するとき
wpcf7mailsent送信に成功し、メールが送られたとき(これを使う)
wpcf7invalid入力内容にエラーがあったとき
wpcf7spamスパムと判定されたとき
wpcf7mailfailedメールの送信に失敗したとき
wpcf7submit結果にかかわらず、送信ボタンが押されたとき

次のコードを、フォームのあるページで読み込まれるJavaScriptに追加します。Cruwのランディングページで使っているものを、汎用的な形にしたものです。

document.addEventListener('wpcf7mailsent', function (e) {
  // 計測したいフォームだけに絞る(123 はフォームの投稿ID)
  if (Number(e.detail.contactFormId) !== 123) return;

  // 計測が終わってから、サンクスページへ移動する
  var moved = false;
  var go = function () {
    if (moved) return;
    moved = true;
    window.location.href = '/contact/thanks/';
  };

  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event: 'generate_lead',  // GTMのトリガーで使うイベント名
    form_name: 'contact',    // どのフォームかを見分ける名前
    eventCallback: go,       // GTMのタグが動き終わったら移動
    eventTimeout: 2000       // 2秒たっても終わらなければ移動
  });

  // GTMが読み込まれていない(広告ブロックなど)ときも、必ず移動する
  setTimeout(go, 2500);
});

ポイントは3つです。

  • フォームを絞る:e.detail.contactFormId には、フォームの投稿ID(管理画面でフォームを編集するときのURLの post= の番号)が入ります。サイト内に複数のフォームがあるときは、計測したいフォームだけに絞り、form_name で見分けられるようにします
  • 計測が終わってから移動する:送信後すぐにサンクスページへ移動すると、Google広告にデータを送る前にページが切り替わり、取りこぼすことがあります。GTMの eventCallback を使うと、タグが動き終わってから移動できます
  • 必ず移動する:広告ブロックなどでGTMが読み込まれないと、eventCallback が呼ばれません。setTimeout で、一定時間たったら必ず移動するようにしておきます

イベント名の generate_lead は、GA4(Googleアナリティクス4)で「見込み顧客の獲得」を表す推奨イベントの名前です。GA4でも同じ名前で受け取れるので、おすすめです。

なお、Contact Form 7 の古いバージョンにあった「その他の設定」の on_sent_ok は、現在は使えません。送信後の処理は、この記事のようにイベントで書きます。

手順3:GTMでトリガーとタグを設定する

GTMの管理画面で、次の5つを作ります。

種類名前の例設定
変数DLV - form_name「データレイヤーの変数」。変数名は form_name
トリガーCE - generate_lead「カスタム イベント」。イベント名は generate_lead。「一部のカスタムイベント」で、DLV - form_name が contact に等しいとき
タグGoogle広告 - コンバージョンリンカー「コンバージョン リンカー」。トリガーは「All Pages(すべてのページ)」
タグGoogle広告 - CV - お問い合わせ「Google 広告のコンバージョン トラッキング」。手順1のコンバージョンIDとラベルを入力。トリガーは CE - generate_lead
タグGA4 - generate_lead「Google アナリティクス: GA4 イベント」。イベント名は generate_lead。トリガーは CE - generate_lead

コンバージョンリンカーは、広告をクリックして来た人の情報(どの広告から来たか)を保存しておくためのタグです。これがないと、広告から来た人のお問い合わせを、広告の成果として正しく結び付けられないことがあります。忘れずに入れておきましょう。

GA4のタグは必須ではありませんが、入れておくとGA4でもお問い合わせの数を見られます。GA4の管理画面で generate_lead を「キーイベント」にしておくと、レポートで見やすくなります。

手順4:プレビューでテスト送信して、公開する

設定ができたら、GTMの「プレビュー」でフォームのあるページを開き、テスト送信をします。

  1. GTMの「プレビュー」を押し、フォームのあるページのURLを入力する
  2. フォームに入力して送信する(テスト送信も、通常のお問い合わせと同じようにメールが届きます)
  3. プレビューの画面の左側に generate_lead が出ていることを確認する
  4. generate_lead を選び、「Google広告 - CV」と「GA4 - generate_lead」が Fired(配信済み) になっていればOK
  5. 問題なければ、GTMで「公開」する

公開してから数時間〜1日ほどで、Google広告のコンバージョンアクションのステータスが「記録あり」に変わります。なお、広告をクリックせずにテスト送信した分は、Google広告の成果には数えられません。

うまく計測できないときに確認したいこと

Cruwが実際に設定したときに気をつけたこと、つまずきやすいことをまとめました。

  • ログイン中はGTMが読み込まれない設定になっていないか:Cruwのサイトでは、管理者が見ているときのアクセスを数えないように、WordPressにログインしているときはGTMを読み込まない設定にしています。この場合、ログインしたままテストしても何も起きません。ログアウトするか、別のブラウザで確認しましょう
  • reCAPTCHAなどで送信が止まっていないか:送信がスパムと判定されると、wpcf7mailsent は発生しません。フォームが送れない原因と対処法は、Contact Form 7で「メッセージの送信に失敗しました」と出る原因と対処法で紹介しています
  • コードが読み込まれ、フォームの投稿IDが合っているか:ページごとにJavaScriptを分けている場合は、フォームのページで読み込まれているか確認します。フォームを作り直すと、投稿IDも変わります
  • 使われなくなったタグが残っていないか:Cruwでも、GTMの中に、すでに終了したユニバーサルアナリティクス(UA)やGoogleオプティマイズのタグが残っていました。動かないタグは、整理しておくと設定を見直しやすくなります
  • Google広告で「主要」のコンバージョンになっているか:入札に使うのは「主要」に設定したコンバージョンです。ほかのコンバージョンも「主要」になっていると、キャンペーンの目標がぶれることがあります

よくある質問

サンクスページのURLで計測する方法ではだめですか?

だめではありません。設定がかんたんなので、まず計測を始めたいときには向いています。ただ、ページの再読み込みなどで数えすぎることがあるため、広告の成果を正確に見て、自動入札にも使いたい場合は、送信成功のイベントで計測する方法がおすすめです。

計測の精度をもっと上げる方法はありますか?

Google広告の「拡張コンバージョン」を使うと、フォームに入力されたメールアドレスなどを、保護した形でGoogleに送り、計測の精度を上げられます。個人情報の扱いにかかわるため、プライバシーポリシーの内容もあわせて確認してから導入しましょう。

まとめ

  • Contact Form 7 のお問い合わせは、送信成功のイベント(wpcf7mailsent)で dataLayer に送り、GTMでGoogle広告のコンバージョンタグを動かすと、数え間違いを防いで計測できます
  • 計測が終わってからサンクスページへ移動する(eventCallback)、GTMが読み込まれなくても必ず移動する(setTimeout)、の2つで取りこぼしを防げます
  • コンバージョンリンカーを入れ、プレビューでテスト送信して、タグが動くことを確かめてから公開しましょう

Google広告は、成果を正しく数えられてはじめて、改善のサイクルを回せます。広告の考え方については、Google広告の成果を最大化するCV設計とAI活用の鍵でも紹介しています。「計測の設定が合っているか見てほしい」「広告の運用をまとめて任せたい」といったご相談も承っています。Web広告・集客サポートをご覧のうえ、お問い合わせからお気軽にご相談ください。

/

GoogleのAI検索で「Cruwのブログ」を優先表示しませんか?

Googleの最新機能では、お気に入りのサイトを「優先するソース」として登録できるようになりました。登録していただくと、GoogleのAIモードやAI Overviewsが回答をつくる際、当サイトの情報を優先的に参照・表示してくれるようになります。

これからも地域ビジネスに役立つ最新のWebマーケティング情報を発信していきますので、ぜひ優先ソースへのご登録をお願いいたします!