Contact Form 7の送信数をアナリティクスで計測する方法【2019年最新】

「今まで計測できていたのに、ある日突然、Contact Form 7からの送信件数がアナリティクスに反映されなくなった・・・」

以前、GoogleアナリティクスやContact Form 7などの仕様変更によって、これまでの計測設定で計測できなくなったことがありました。

設定を変えていないにもかかわらず計測できなくなったので、また何らかの仕様変更だろうとは思いましたが、原因・対処方法の調査に非常に時間がかかりました。

アナリティクス側の公式情報でもContact Form 7についての言及や案内はなく、Contact Form 7側の公式情報でも、アナリティクスタグに新バージョンと旧バージョンがあることまで言及されていなかったため、なかなか解決策にたどり着けませんでした。

「これまではアナリティクスで計測できていたのに、いきなり計測ができなくなってから設定方法がわからない」
「初めてContact Form 7を導入し、コンバージョン計測設定をしたい」
という方向けに、現状最新の「Contact Form 7からの送信件数(コンバージョン数)を計測してGoogleアナリティクスに反映する方法」をご紹介させていただきます。

Googleタグマネージャーを利用しない場合の方法です。

前提条件：Googleアナリティクスのトラッキングコードは新gtag.jsバージョンを設置

Googleアナリティクスのトラッキングコードには、旧analytics.js、新gtag.jsの2種類あります。
2017年8月～β版として新gtag.jsが提供開始されました。

新gtag.jsの正式リリース時期の情報は見つかりませんでしたが、昨年夏頃以降は、アナリティクス管理画面からトラッキングコードをコピーする際、ほぼすべてのアカウントで新gtag.jsに切り替わってきていたと思います。
今のところ、旧analytics.js、新gtag.jsどちらも使用可能ですが、今回の計測設定のためには、新gtag.jsのトラッキングコードが設置されていることをご確認ください。

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-115892529-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'UA-1234567xx-1');
</script>

上記のトラッキングID（太字のところ）はサンプルなので、固有のものに差し替えていただけたらと思います。

Googleアナリティクス「管理」→プロパティ「トラッキング情報」→「トラッキングコード」の「グローバルサイトタグ（gtag.js）」よりコピペしていただくと確実です。

WordPressテーマファイルのfunctions.phpに記述を追記する

次に、WordPressテーマファイルの中のfunctions.phpを編集します。

以下のコードをfunctions.phpの末尾に追記してください。
計測するフォームの数が1つか、2つ以上かによって変わります。

計測するコンタクトフォームが1つの場合

 add_action( 'wp_head', 'contactform7_hook' ); //「contactform7_hook」関数を内で実行します
 function contactform7_hook() {
 $output = "<script>
            document.addEventListener( 'wpcf7mailsent', function( event ) { //フォーム送信が完了した時
              if ( '12345' == event.detail.contactFormId ) { //contactform7のid
                gtag('event', location.href, {'event_category': 'フォーム送信','event_label': 'お問い合わせ'});
              }
            }, false );
            </script>";
 echo $output; //「output」定義された内容を出力します
 }

計測するコンタクトフォームが2つ以上の場合

 add_action( 'wp_head', 'contactform7_hook' ); //「contactform7_hook」関数を内で実行します
 function contactform7_hook() {
 $output = "<script>
            document.addEventListener( 'wpcf7mailsent', function( event ) { //フォーム送信が完了した時
              if ( '12345' == event.detail.contactFormId ) { //contactform7のid
                gtag('event', location.href, {'event_category': 'フォーム送信','event_label': 'お問い合わせ'});
              }
              else if ( '10123' == event.detail.contactFormId ) {
                gtag('event', location.href, {'event_category': 'フォーム送信','event_label': 'セミナー申し込み'});
              }
              else if ( '10456' == event.detail.contactFormId ) {
                gtag('event', location.href, {'event_category': 'フォーム送信','event_label': '個別相談'});
              }
            }, false );
            </script>";
 echo $output; //「output」定義された内容を出力します
 }

上記のContact Form 7の「ID」と「コンバージョン名」（太字のところ）を適宜ご編集ください。

Contact Form 7の「ID」は、WordPress管理画面の左メニュー「お問い合わせ」→「コンタクトフォーム」の「ショートコード」の中に記載があります。

IDをそれぞれfunctions.php内の上記のコードのところに転記し、それぞれ「お問い合わせ」「セミナー申し込み」など、重複せず判別しやすいコンバージョン名をつけておきます。

この「コンバージョン名」は、次のGoogleアナリティクスの目標設定のところで必要になります。