Blog

ブログ

Google Tag Managerで、Contact Form 7の送信数を計測する方法

前田 大地

最近は、Google Analytics(以下GA)のトラッキングコードなどをGoogle Tag Manager(以下GTM)で管理するケースが多くなってきました。今回は、wordpressの定番メールフォームプラグインである「contact form 7(以下CF7)」の送信数をGTM+GAで計測する方法を紹介します。

1.GTMとGAの導入

事前準備としてGTMをサイトにインストールしてGAタグを導入します。

1-1.サイトへGTMをインストール

GTMにログインして、アカウントを作成。新しいコンテナを作成して、「管理」メニューからインストール用のコードを確認し、サイトのhead内およびbodyタグ直下にコピペします。これで、とりあえずサイトへのGTM導入は完了です。

1-2.GTMにGA計測タグを設置

GTMの管理画面から、コンテナに「新しいタグを追加」します。

  1. サイドバーの「タグ」をクリック。
  2. 「新規」をクリック。
  3. タグタイプの選択で「ユニバーサルアナリティクス」を選択。
  4. トラッキングIDを入力。
  5. トラッキングタイプは「ページビュー」を選択。
  6. トリガーは「All Pages」を選択。
  7. 名前を入力して「保存」をクリック。

これで、ひとまずすべてのページのアクセスが計測されるようになります。1番シンプルなGTM+GA導入のカタチですね。

2.CF7の計測

CF7からメールが送信されたときに計測できるよう準備します。

2-1.フォーム識別用の変数を作成

サイト内に複数のフォームがある場合、どのフォームから送信されたのかを判別するために、GTMの「ユーザー定義変数」を使用します。フォームがひとつしかないサイトでも、将来的に増える可能性がありますから、あらかじめ設定しておくと良いでしょう。

  1. サイドバーの「変数」をクリック。
  2. ユーザー定義変数のところにある「新規」をクリック。
  3. 名前を入力。今回は「フォーム名」としておきます。
  4. 変数タイプは「データレイヤーの変数」を選択。
  5. データレイヤーの変数名を入力。今回は「formName」としておきます。
  6. 「保存」をクリック。

これで変数が作成されました。フォーム送信時に、このデータレイヤー変数にフォーム識別用の値を入れることで、どのフォームから送信されたか判定できます。

2-2.フォーム送信用のトリガーを追加

  1. サイドバーの「トリガー」をクリック。
  2. 「新規」をクリック。
  3. 名前を入力。今回は「wpcf7送信」としておきます。
  4. トリガーのタイプは「カスタムイベント」を選択
  5. イベント名を入力。今回は「wpcf7」としておきます。
  6. 「保存」をクリック。

2-3.フォーム送信用のタグを追加

  1. サイドバーの「タグ」をクリック。
  2. 「新規」をクリック。
  3. 名前は「フォーム送信」とでもしておきましょう。
  4. タグタイプは「ユニバーサルアナリティクス」を選択。
  5. トラッキングIDを入力。
  6. トラッキングタイプは「イベント」を選択。
  7. カテゴリを入力。今回は「wpcf7」としておきます。
  8. アクションを入力。今回は「submit」としておきます。
  9. ラベルは入力欄横の+ボタンをクリックして、先ほど作成したフォーム識別用の変数を指定。「{{フォーム名}}」と入力されるはずです。
  10. トリガーは先ほど作成したカスタムイベント「wpcf7送信」を選択。
  11. 「保存」をクリック

2-4.CF7側の設定

CF7の管理画面で「その他の設定」に以下を記述。

on_sent_ok: "dataLayer.push({'event’:’wpcf7’,’formName’:’【フォーム識別名】’});"

これで、メールフォームから送信されたときにトリガーの条件となる「wpcf7送信」イベントが発動するようになります。フォーム識別名は、ラベルとして使用されます。

3.GAのコンバージョン設定

GA上からメール送信数をコンバージョン数としてカウントできるようにします。

GAの管理画面の「アナリティクス設定」から「目標」を設定します。
目標のタイプを「イベント」にして、目標の詳細のイベント条件で、カテゴリ、アクション、ラベルを設定します。カテゴリ、アクションは、GTMタグで指定したものを(今回は「wpcf7」と「submit」)。ラベルには、CF7のon_sent_okの箇所で指定した【フォーム識別名】を入力します。

完成

以上で完了です!
テスト送信して、GAのリアルタイムレポートで正常にカウントできているか確認してください。

余談

Google Tag ManagerとGoogle AnalyticsとContact Form 7の組み合わせは、wordpressでサイトを制作した際のメジャーな組み合わせのひとつですが、なかなかネット上に分かりやすい記事がないため、私もはじめてのときは苦労しました。私と同じ絶望を味わうことなく、ストレスフリーなGTMライフを送っていただけたら嬉しいです!

Web Designer / Developer

前田 大地

沼津高専中退。デザイン会社、システム開発会社を経てセブンシックスを設立。マーケティング、デザイン、テクノロジーに精通するオールラウンダーとして、県内の中小企業に向けた戦略型ホームページ制作を開始。一方で、都内の広告代理店からの要請で大企業案件にも多数参加。企業が本当に必要とするホームページ制作とは何か、を日々探求している。

Blog top