カテゴリー
WordPressプラグイン

Contact Form 7の送信をアナリティクスで計測する

人気のフォームプラグインContact Form 7から「どのくらい送信されたか」をアナリティクスイベント計測する方法を紹介します。

従来のon_sent_okを使う方法

前段として、これまでのContact Form 7での手法について軽く解説します。
Contact Form 7では、フォーム設定の「その他の設定」で”on_sent_ok”によりイベントを発生させることでアナリティクスでコンバージョン計測が可能でした。

on_sent_ok: "ga('send', 'event', 'from1', 'submit');"
on_sent_ok:"location='thanks';"

上記はサンクスページへのリダイレクトとともに記述している例です。
しかし、”on_sent_ok”とその兄弟設定 “on_submit” の廃止により、現状のContact Form 7でも一応動作はするものの、近い将来に使えなくなります。
ちなみに2行目は送信完了ページを表示するためのリダイレクト処理ですが、同様に動作しなくなります。

Contact Form 7へサンクスページをつける(最新版)

DOMイベントを利用する

今後はContact Form 7の送信をアナリティクスでトラッキングを行うためにスクリプトを記述します。
基本的には<body>内でも動作しますが、とくにこだわりがなければ、<head>内のアナリティクストラッキングコードの後にでも記述すればよいでしょう。
Contact Form 7の「その他の設定」では何も指定しません。

gtagトラッキングコード用のスクリプト

&lt;script&gt;
document.addEventListener(&#039;wpcf7mailsent&#039;, function(event) {
  gtag(&#039;event&#039;, &#039;submit&#039;, {
    &#039;event_category&#039;: &#039;問い合わせ&#039;,
    &#039;event_label&#039;: &#039;回数&#039;
  });
}, false);
&lt;/script&gt;

実際にフォームを送信を確認してみると、アナリティクスのリアルタイム計測でイベントが発生していることが確認できます。

イベントが発生している様子

gaトラッキングコード用のスクリプト

現在のアナリティクスで新規タグを取得すると、gtagというトラッキングコードが発行されますが、上記のスクリプトはこのgtag用です。
少し前のgaトラッキングコードでは下記のようなスクリプトとなります。
トラッキングコードのタイプと合っていなければ、動作しませんので注意が必要です。

&lt;script&gt;
document.addEventListener( &#039;wpcf7mailsent&#039;, function( event ) {
  ga(&#039;send&#039;,&#039;event&#039;,&#039;問い合わせ&#039;,&#039;submit&#039;,&#039;回数&#039;);
}, false );
&lt;/script&gt;

ちなみにgaでは下記のようなトラッキングコートとなります。
自身の環境と合わせて設置してください。

&lt;script&gt;
(function(i, s, o, g, r, a, m) {
  i[&#039;GoogleAnalyticsObject&#039;] = r;
  i[r] = i[r] || function() {
    (i[r].q = i[r].q || []).push(arguments)
  }, i[r].l = 1 * new Date();
  a = s.createElement(o),
    m = s.getElementsByTagName(o)[0];
  a.async = 1;
  a.src = g;
  m.parentNode.insertBefore(a, m)
})(window, document, &#039;script&#039;, &#039;https://www.google-analytics.com/analytics.js&#039;,
  &#039;ga&#039;);
ga(&#039;create&#039;, &#039;UA-XXXXXXXX-X&#039;, &#039;auto&#039;);
ga(&#039;send&#039;, &#039;pageview&#039;);
&lt;/script&gt;

アナリティクスでのコンバージョン設定

これでアナリティクスの行動タブ→イベントで送信状況はトラッキングされていますが、コンバージョンとしてカウントしたい場合が目標設定を行います。
アナリティクスの管理タブ→目標より新しい目標を作成します。

コンバージョン設定

目標設定:カスタムを選択
目標の説明:任意の名称をつけ、イベントを選択
目標の詳細:上記のスクリプトで充てた値を設定
正しく設定ができていれば、実際の集計がコンバージョンタブから確認できます。

コンバージョンの様子

profile image

執筆:R3098

WEBサービス構築・監修が生業です。WordPress 関連では Aurora Heatmap などのプラグイン開発も行っています。サイト運営者の力になりたいと考えます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトは reCAPTCHA によって保護されており、Google のプライバシーポリシー および 利用規約 に適用されます。

reCaptcha の認証期間が終了しました。ページを再読み込みしてください。