【手順】Googleタグマネージャで「Contact Form 7」で作成したフォームの送信完了をアナリティクスで計測する方法

今回は、フォーム送信完了をGoogleタグマネージャで計測する方法をご紹介します。
フォームは「Contact Form 7」で作成している場合に限ります。最近こちらのWordpressプラグインでお問合せフォームを作成しているサイト増えていますね。

最終的にGoogleアナリティクスで計測した送信完了を目標設定まですると、アクセス分析しやすくなります。

以下
Google Tag Manager : GTM
Google Analytics : GA

実現できること

「Contact Form 7」で作成したお問合せのフォームの送信完了をGoogleアナリティクスのイベントとして計測します。
目標設定することで、コンバージョンとしてもカウント可能です。

Googleタグマネージャにログイン

まずは、GTMにログインします。
権限がない場合には管理者にご連絡ください。
別の人にお願いする場合には、Googleアカウントを聞いて権限を付与してください。

前提条件

  • Googleタグマネージャがサイトに設置されている
  • Googleアナリティクスでアクセス数が計測できている
  • サイトをWordpressで構築
  • Wordpressのプラグインの「Contact Form 7」のお問合せ完了を計測したい
  • 以前の「on_sent_ok:」は現在非推奨。利用できなくなる予定

イベント発生用スクリプトのタグ作成

フォーム送信完了時にカスタムイベントが発生するように、「Contact Form 7」指定のスクリプトを設置します。
ここでは、トリガー(配信ページ)は、すべてのページとします。

タグ:カスタムHTML
トリガー:All Pages (すべてのページ)

トリガーの作成

上記の設定で、カスタムイベント「wpcf7successfulsubmit」が発生するようになりますので、それを検出するためのトリガーを作成します。
ここでは名前は「イベント:wpcf7successfulsubmit」とします。

Googleアナリティクス イベントタグの作成

作成したトリガーを条件として、配信するGAのイベントタグを作成します。
トリガーは、上記の「イベント:wpcf7successfulsubmit」を紐づけます。

タグ:ユニバーサルアナリティクス
トリガー:イベント:wpcf7successfulsubmit

ここでは、Googleアナリティクス設定の部分は、変数の「Googleアナリティクス設定」を使用しています。

公式ヘルプ Google アナリティクス – タグマネージャ ヘルプ
support.google.com/tagmanager/answer/6107124?hl=ja#tags

GTMのプレビューモードで動作確認

GTMのプレビューモードで動作確認します。
画面右上のプレビューを押します。

Googleアナリティクス 計測確認

GAにログインします。GAのリアルタイムレポートのイベントでお問合せイベントが発生していることを確認します。
発生してればOKです。

Googleタグマネージャを公開

作成したGTMの変更を本番環境に反映します。

Googleアナリティクス 目標設定

必要に応じて、目標設定も忘れずに行ってください。
基本的な目標設定ですので、ここでは割愛します。

参考

フォーム送信を Google Analytics でトラッキングする | Contact Form 7 [日本語] contactform7.com/ja/tracking-form-submissions-with-google-analytics/

不明点ありましたら、ココナラ(スキル売買サービス)でお手伝い活動もしていますので
お気軽にご相談してください。

Googleアナリティクスのお手伝いメニュー | ココナラ
coconala.com/users/156256

告知:スクロール計測の新しい手順作成しました!

【手順】新機能!Googleアナリティクスでスクロール計測する方法(Googleタグマネージャ要素の表示)

2017.10.25