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

ヘッダ画像

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トラッキングコード用のスクリプト

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
gtag('event', 'submit', {
'event_category': '問い合わせ',
'event_label': '回数'
});
}, false );
</script>

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

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

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

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

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
ga('send','event','問い合わせ','submit','回数');
}, false );
</script>

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

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=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,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXXX-X', 'auto');
ga('send', 'pageview');
</script>

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

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

コンバージョン設定

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

コンバージョンの様子

コメントを残す

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



関連記事

Contact Form 7の送信完了画面がでない ※このContact Form 7の送信完了画面についての記事はひと世代前の情報です。最新のContact Form 7...

Contact Form 7のラジオボタンを必須項目に(最新版) 今回はWordPressでの超定番のフォーム用プラグインContact Form 7でのラジオボタンの必須項目化について...

Contact Form 7で403エラー メールフォーム定番プラグインのContact Form 7で新規フォームの作成や既存データの編集を行おうとすると403エ...

KB Robots.txtの使い方 WordPressでは自動で仮想robots.txtが出力されます。ユーザに見せる必要のない/wp-admin/と/wp...