セブンシックス・ブログ

SEVENSIX BLOG

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

wordpress

Share this 8 Bookmark this 4

最近は、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の管理画面で「その他の設定」に以下を記述。

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

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

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

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

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

余談

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

前田 大地

Designer / Developer

前田 大地

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

関連記事

制作のご相談・見積依頼

CONSULTATION

お気軽にお問い合わせください。ご相談いただいた方には無料でご提案書とお見積書を作成しています。

ご相談・見積依頼はこちら