GoogleタグマネージャでContact Form7の送信を測定できるようにする イベントトラッキング

  • 2
  •  
  •  
  •  
  •  
  •  

WordPressでサイトを構築している方で、メールフォームのプラグインに「ContactForm7」を使っている人も多いのではないでしょうか。
このプラグインですが簡単に設定はできるもので使い勝手はいいのですが、フォーム送信をコンバージョン目標と設定する場合のイベントトラッキングは測定ができるようにするまで手間がかかります。
今回はGoogleタグマネージャを使ってDontactForm7からの送信をトラッキングできるようにする方法です。




GTMでのフォームトリガー

通常GTMではフォーム送信時にタグが発動させるためのフォームトリガーを使います。ContactForm7の場合、非インタラクティブでの集計をしない場合はフォームトリガーは起動しないためタグが動きません。つまりこの場合は、正しくメールが送信されたかは確認せず「フォーム送信」という処理が行われたとする場合のみだけ使えるということです。

プラグインではなく直接Formを構築するのであればフォームトリガーも有効ですが、Contact Form 7ではカスタムイベントを作り処理を行う必要があります。

データレイヤーを使う

データレイヤーとは、GTMに渡す情報を含むように設定できるオブジェクトです。何かの理由でトラッキングできない場合にデータの受け渡しをスムーズに行えるようになります。このデータレイヤーがあることで、Contact Form 7の送信をGTMでトラッキングできるようになります。

ではデータレイヤーを使って何をするかということですが、アナリティクスのイベントトラッキングに必要な「contact Form 7で発生したイベント」を格納させます。

contact Form 7ではDOMイベントで送信時のアナリティクスのトラッキングを推奨しています。

on_sent_ok を DOM イベントに置き換えるより

add_action( 'wp_footer', 'mycustom_wp_footer' );
 
function mycustom_wp_footer() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
    if ( '123' == event.detail.contactFormId ) {
        ga( 'send', 'event', 'Contact Form', 'submit' );
    }
}, false );
</script>
<?php
}

※’123’の部分はフォームのショートコードのid。フォーム毎での判定をするのであれば必要です。

このコードの<script>~</script>の部分だけGTMにタグを作ります。今回はフォームのIDを識別する必要はないのでifの条件式部分は削除します。

<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
        ga( 'send', 'event', 'Contact Form', 'submit' );
}, false );
</script>

以上のようなものをワードプレスの関数に追加して送信時に読み込ませるようにということですが、これをGTMで管理します。
PHPの関数をワードプレスのfunction.phpに追記する方法もありますが、極力ファイルは書き換えない方向なので上記のスクリプト部分だけのタグ「フォーム用データレイヤー追加」を用意します。
また、フォームが送信されたらトリガーが発動してイベントをトラッキングするタグ「フォーム送信」も用意します。

動作としてはやりたいことをまとめると以下の内容になる。

①ページが読み込まれた時にタグ「フォーム用データレイヤー追加」によって、データレイヤーのカスタム変数「event」に「wpcf7mailsent」を格納する。
このタグにフォームのselectの値を取り、その値をカスタム変数「Contact_Label」に追加する。selectが変更されたら改めて値を取る。

②フォームが送信されたことでタグ「フォーム送信」が読み込まれる。

③Analyticsのイベントラベルには「Contact_Label」の値が計測される。

この処理をGTMの上で処理させます。

変数を作る

dataLayer.pushメソッドを使いcontactForm7のメール送信のイベント「wpcf7mailsent」をデータレイヤーに格納するための変数「event」と、お問い合わせの種類を入れる変数「Contact_Label」を作ります。

「wpcf7mailsent」を格納するカスタムイベントの変数「event」

Contact Form 7のようなフォームの送信をトラッキングしたいけど、フォームのデフォルトの動作が変更されているためトラッキングできないイベントについては、カスタムイベントを使用します。そしてそのカスタムイベントで発生するイベント(フォームの送信など)を格納する変数に「カスタムイベント」を使用します。

1・ユーザー定義変数でを赤い「新規」を選択します。

2・変数の名前を「event」にして、変数のタイプをユーティリティの中の「カスタムイベント」にします。

カスタムイベント

3・右上の「保存」をクリックします。

フォームの値から決定する値を格納するデータレイヤーの変数「Contact_Label」

「event」と一緒にデータレイヤーに格納する変数「Contact_Label」を作ります。この値はフォームのある要素を.getElementByID(●)で取得し、その要素の持つ値によって変更される内容を入れるために使うデータレイヤー変数です。
今回の設計ではselect要素の値が変わるごとにデータレイヤーに入れる値が変わるようにするために使っていますが、フォームからデータを取ろうと思わない場合は不要です。

1・ユーザー定義変数でを赤い「新規」を選択します。

2・変数の名前を「Contact_Label」にして、変数のタイプを「データレイヤー変数」にします。

データレイヤー変数

3・右上の「保存」をクリックします。

カスタムイベントのトリガーを作る

フォームが送信されたというイベントをキャッチして、そのイベント名を条件に稼働するトリガーを作ります。

1・赤い「新規」をクリックします。

2・トリガーに名前をつけ、トリガーのタイプで「カスタムイベント」を選択します。

3・イベント名を「wpcf7mailsent」と設定します。(ここにはデータレイヤーに格納されるイベントと同じ名前にする必要があります。)

トリガー

4・ウェブサイトで複数のイベントがある場合は「一部のカスタムイベント」を選び条件を設定します。
この場合は「event」「含む」「wpcf7mailsent」です。この設定をすることでイベント名に「wpcf7mailsent」を含まない別のカスタムイベントがあってもトリガーが発動しません。(条件を等しいでも構いません。)
特に条件がなければ「すべてのカスタムイベント」でOKです。

タグを作る

今回、タグは最初にページが読み込まれた時にデータレイヤーへの追加処理を行うタグと、フォーム送信時のイベントトラッキングを行うタグの2種類になります。

データレイヤーへの追加処理を行うタグ

タグ「フォーム用データレイヤー追加」にデータレイヤーへ追加するには.dataLayer.pushメソッドを使い、データレイヤー変数とそれに格納する値が必要になります。
しかも今回はフォームのセレクトボックスの値により、データレイヤーへ格納する値を変えます。

1・赤い「新規」をクリックします。

2・タグの名前をつけ、タグのタイプでカスタム「HTML」を選択肢ます。

3・下記のコードを記入します。

<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
  
 function myfunc() {
  	   if(myobj.value=='●●1'){
      		dataLayer.push({'event':'wpcf7mailsent','Contact_Label':'●●問い合わせ'});
       }else if(myobj.value=='●●2'){
     		dataLayer.push({'event':'wpcf7mailsent','Contact_Label':'▲▲問い合わせ'});
       }else if(myobj.value=='●●3'){
     		dataLayer.push({'event':'wpcf7mailsent','Contact_Label':'■■問い合わせ'});
       }else {
     		dataLayer.push({'event':'wpcf7mailsent','Contact_Label':'問い合わせ'});         
       }
 }  
var myobj = document.getElementById("contact_contents");
myobj.onchange = myfunc();  
}); 
</script>

この中の以下の部分がデータレイヤーに値を入れる文になります。なお、フォームのIDで識別したい場合はifを追加してください。

dataLayer.push({'event':'wpcf7mailsent','Contact_Label':'●●問い合わせ'});

Contact Form 7のアナリティクトラッキングではga( 〜〜 );となっていますが、GTMでイベントを集計するためにdataLayer.push( 〜 );に変更になっています。

そして、以下の文でセレクトの要素を取得し、その値が変更になったら関数myfunc()が実行されるように.onchangeメソッドがついています。

var myobj = document.getElementById("contact_contents");
myobj.onchange = myfunc();  

contact_contentsは<select>に設定するのIDです。

myobj.valueでセレクト要素の値を取り出し、その値を条件にデータレイヤーの変数「Contact_Label」に格納する値が変わっています。

4・トリガーはページビューの「All Page」を選択肢します。最初にページが読み込まれたことでタグがセットされるため、ワードプレスに関数を直接書き込む必要がなくなります。

フォーム送信でイベントトラッキングするタグを作る

フォームで送信が行われた際にカスタムイベントをトリガーに稼働させるタグを作ります。

1・赤い「新規」をクリックする。

2・タグに名前をつけ、タグのタイプでユニバーサルアナリティクスを選択する。

タグ

3・トラッキングタイプで「イベント」を選択する。

4・「カテゴリー」は任意のものにする。(例では{{Page Path}}にしています。)

5・「アクション」は「お問い合わせ」にします。

6・「ラベル」はカスタム変数である「{{Contact_Label}}」にします。(例ではここでお問い合わせ内容を取得します。)

7・「非インタラクション」は「偽」にします。

8・「Googleアナリティクス設定」は「{{ユニバーサルアナリティクスID}}」にします。

7・「トリガー」に先ほど設定したカスタムイベントを選択します。

送信後のメッセージのCSS処理

ついでに送信後のメッセージ画面を変更します。配信後のメッセージを表示するのにCSSを使います。

送信が行われると<form>に「.sent」というクラスが追加されます。このクラスが追加される前と後を「display:none;」と「display:blobk;」でコントロールします。

1・フォーム内を<div>で「入力部分」と「メッセージ」部分に分けそれぞれにクラスを付けます。(例:「.form-inner」「.form-mess」)

<div class="form-innner">
     ーーーー入力フォームーーーー
</div>
<div class="form-mess">
     ーーーー送信後に表示するメッセージーーーー
</div>

2・CSSに以下の文を追記します。

.wpcf7-form .form-mess,.wpcf7-form.sent .form-inner {
  display: none;
}
.wpcf7-form.sent .form-mess{
  display: block;
}
.wpcf7-form.sent .wpcf7-mail-sent-ok {
  display: none !important;
}

一番上のCSSで送信前の「メッセージ」と送信後の「入力部分」が非表示になります。
二番目のCSSでは送信後に「メッセージ」が表示されます。
三番目のCSSではもともtContact Form 7にあるメッセージ画面を強制的に非表示にします。

この処理によりサイトにあった送信完了画面を構築することができます。

wordpressのプラグインでContact Form 7のアナリティクプラグインが公開されています。ワードプレスのテンプレートが合うのであれば使ってみるのもいいかもしれません。




About ash-d 38 Articles
広告代理店や飲食業を経てECへ。その後ウキウキワクワクしながら独立、フリーでアクセス解析やリスティング広告運用代行、ホームページ制作もはじめました。 小さい子供の相手をしながら、いろいろなことをマーケティング(特にツール系の)備忘録でまとめます。 最近はスーパードラマチャンネルやFOXのドラマにどハマり中で、「Scorpion」「Walking Dead」が面白いです。

Be the first to comment

Leave a Reply

Your email address will not be published.


*