GoogleタグマネージャーでWordPressのContactForm7のメール送信完了を測定するイベントトラッキングの仕方

Pocket

覚えに、ごく簡単にメモします。

はじめに

Google Tag Manager(Googleタグマネージャー)を使うと、Google Analytics(グーグルアナリティクス)の管理が楽になるのですが、これは特にイベントトラッキングにおいて顕著です。

しかし、WordPressでよく使われるお問合せフォーム機能のプラグインであるContactForm7を利用すると、少し厄介です。

これまでなら、on_sent_okの「その他の設定」で簡単に設定できましたが(参考:WordPress×Contact Form 7のお問い合わせフォームで、Google Analyticsのイベント計測を行う方法)、現在on_sent_okが使えなくなっているため(参考:on_sent_ok は廃止されます)、対処が必要です。

 

ここでは、Googleタグマネージャーで、データレイヤーを使って対応する方法をメモとして残します。

Google Analyticsの目標の設定

GoogleAnalytics目標の設定

まずは、Google Analytics側で、目標の設定をしておきます。

  • カテゴリー:CV
  • アクション:submit
  • ラベル:e-mail

として、ここではイベント形式で目標の設定をしておきます。

Googleタグマネージャーの「変数」の設定

続いてGoogleタグマネージャーの設定です。

変数は二つ設定します。

一つは、カスタムイベントで、「event」という名前で設定します。

カスタムイベント:event

※Eventとすると、既存の「Event」と同じになるので、「event」です。

二つ目は、「Contact_Label」と名前を付けて、デイタレイヤーの変数を作成します。

データレイヤーの変数:Contact_Label

Googleタグマネージャーの「トリガー」の設定

続いて、トリガーの設定です。

トリガーは一つ設定します。

ContactForm7で使用される「wpcf7mailsent」という文字列を使っています。

トリガー:wpcf7mailsent

上記で、一部のカスタムイベントに絞っていますが、ここでは「event」を選びます。

Googleタグマネージャーの「タグ」の設定

「タグ」は2つ設定します。

一つは、ContactForm7の公式ページで紹介されているDOMイベントを使った代替コードを模して、カスタムHTMLを作ります。

カスタムHTML①

コード:

  1. <script type=“text/javascript”>
  2. document.addEventListener( ‘wpcf7mailsent’, function( event ) {
  3.  function myfunc() {
  4.   dataLayer.push({‘event’:‘wpcf7mailsent’,‘Contact_Label’:‘e-mail’});
  5.  }
  6. var myobj = document.getElementById(“contact_contents”);
  7. myobj.onchange = myfunc();
  8. });
  9. </script>

トリガーは、

カスタムHTMLのタグのトリガー

もう一つのタグが、イベントトラッキングの母体となる、タグです。

イベントタグ①

上記のように、ここでラベルは「e-mail」が入るように、「{{Contact_Label}}」を選択します。

※トラッキングIDは、Google AnalyticsのトラッキングIDを入力します。

こちらのトリガーは、「wpcf7mailsent」を選びます。

イベントタグ②

念のため、プレビューで動かしてみる。

タグマネージャーのプレビュー画面

ページビューだけなら、上記のようになり、「wpcf7mailsent」は各ページで発火している。

「e-mail_event」は送信完了時のみ、発火します。

実際にメールを送信してみると、下記のように発火していることを確認できます。

GAリアルタイム①

ついでに、ラベルが取れていることを確認するため、「CV」をクリックすると、

GAリアルタイム②

最後にタグマネージャーを公開するのを忘れない

Googleタグマネージャーを公開して終了です。

 

今回は、WordPressにContactForm7のメールフォームが一つだけの時に使える方法を紹介しています。

カスタムHTMLのところで、うまく分岐を入れられれば、複数のContactForm7にも対応できます。

 

追記:
ContactForm7の問い合わせフォームが複数ある場合に、それらを分けて扱う場合は、下記のように分岐を入れて行います。

  1. <script>
  2. document.addEventListener( ‘wpcf7mailsent’, function( event ) {
  3.   function myfunc() {
  4.     if(‘●●●’ == event.detail.contactFormId){
  5.       dataLayer.push({‘event’:’wpcf7mailsent’,’Contact_Label’:’e-mail’});
  6.     }else if(‘●●●’ == event.detail.contactFormId){
  7.       dataLayer.push({‘event’:’wpcf7mailsent’,’Contact_Label’:’enquete’});
  8.     }else{
  9.       dataLayer.push({‘event’:’wpcf7mailsent’,’Contact_Label’:’others’});
  10.     }
  11.   }
  12. var myobj = document.getElementById(“contact_contents”);
  13. myobj.onchange = myfunc();
  14. });
  15. </script>