【最新版】Contact form 7 の送信をコンバージョン目標に設定する方法【GoogleTagManager v2】

【最新版】Contact form 7 の送信をコンバージョン目標に設定する方法【GoogleTagManager v2】

2015年1月22日に日本語版のUIが公開されたGoogleTagManagerですが、全開のバージョンからあまりにもユーザインタフェースが変わっていたり、使い勝手も使い方も微妙に変わっていてとっつきにくい点が多いと思います。
しかも、

【参考リンク】

フォーム送信を Google Analytics でトラッキングする

ContactForm7公式ページで紹介されているやり方が既に古く現在のGoogleTagManagerに対応していないので余計に混乱してしまい最初は結構苦しみましたがGoogleTagManagerやJavascriptからのpushの仕組みなどを理解すれば簡単に実装できました。

今回はその超ベンリなContactForm7とGoogleTagManagerとGoogleAnalyticsの設定方法について書いていこうと思います。

 

この記事の対象者

  • ContactForm7を使ってお問い合わせフォームを作ろうとしている方
  • ContactForm7を使ってフォームを作ったがGoogleAnalytics設定方法が分からない方
  • GoogleTagManagerとGoogleAnalyticsの連携設定方法が分からない方
  • 何でもいいからContactForm7を使ってコンバージョン設定をしたい!という方

 

ContactForm7の送信をコンバージョン設定する

WordPressに非常に簡単にお問い合わせフォームを作成できる優秀なプラグイン”ContactForm7″を使ってお問い合わせフォームの作成を行い、サイト上から何度お問い合わせを受領することが出来たかを測るためにコンバージョン設定を行います。

以下の手順に従って設定を行っていきます。

  1. ContactForm7の設定を行う
  2. GoogleTagManagerの設定を行う
  3. GoogleAnalyticsの設定を行う

とりあえず、上記の通り登録していけば問題なくコンバージョンの確認を行うことができるはずです。
ただ、検証サーバなどで動かそうとしている場合は、GoogleTagManagerやGoogleAnalyticsの設定で検証サーバを除外していないことをまず確認してから作業を行うようにしましょう。

 

ContactForm7の設定を行う

ContactForm7側の設定は非常に簡単です。
作成したコンタクトフォームの「その他の設定」に以下のコードを追加します。
※追加の際には改行等は絶対に行わず1行になるようにして下さい。

on_sent_ok: "dataLayer.push({'event': 'SakanaTech.contactForm7Submitted'});"

 

GoogleTagManagerの設定を行う

GoogleTagManager側の設定を行います。

TagManagerでは以下のスクリーンショットの様に設定を行います。

【最新版】Contact form 7 の送信をコンバージョン目標に設定する方法【GoogleTagManager v2】 【最新版】Contact form 7 の送信をコンバージョン目標に設定する方法【GoogleTagManager v2】

大文字とか小文字とかは厳格に判断するので間違えないようにして下さい。

 

GoogleAnalyticsの設定を行う

GoogleTagManager側の設定が完了したので、次はGoogleAnalytics側の設定を行います。

今の時点では、こんな状況なので何の意味もありません。

  1. イベントとその発動条件は作った
  2. 発動したイベントを誰も見てない

意味を持たせるために、発動したイベントをキャッチする物を作ります。
今回は、問い合わせフォームから何回問い合わせがあったのかを計測したいのでコンバージョン目標を設定します。
設定方法については、こちらも以下のスクリーンショットのように設定を行います。

【最新版】Contact form 7 の送信をコンバージョン目標に設定する方法【GoogleTagManager v2】 【最新版】Contact form 7 の送信をコンバージョン目標に設定する方法【GoogleTagManager v2】 【最新版】Contact form 7 の送信をコンバージョン目標に設定する方法【GoogleTagManager v2】

特に難しい設定もなく、上記の様に設定を行えば問い合わせフォームの送信ボタンの押下を検知してGoogleAnalytics側が目標達成としてくれます。
あとはGoogleTagManagerのプレビューモードで確認したり、GoogleAnalyticsのリアルタイム>イベントから実際にフォーム投稿をしてみてイベントが正常に発火し、GoogleAnalyticsにキャッチされているか確認するとより安心感を得られると思います。

 

らいか
GoogleTagManagerのUIって変わる時は劇的に変わるので混乱するよね。次変わった時もまた覚えなおさないといけないのかぁ・・・
【最新版】Contact form 7 の送信をコンバージョン目標に設定する方法【GoogleTagManager v2】

SNSへのシェアはこちらから!

ABOUTこの記事をかいた人

工業高等専門学校を卒業後、NTTグループのSI企業に就職。数々の炎上案件を鎮火するために日本各地を5年間転々とする。2015年に一般ユーザ向けのWebシステム開発案件のチームリーダとして業務に従事し、改めて”Webのものづくりの楽しさ”に気付きWeb制作会社に転職。Web制作やアクセス解析を使ったオウンドメディアの運用改善などを行っていく中で、もっとユーザー目線でWebをただ制作するだけではなく企画や運用まで幅広い領域で仕事がしたいと感じるようになり、Webディレクターのキャリアを目指す。日本中のビジネスホテルに詳しく、犬や猫よりも鳥派。