Google Tag Manager(GTM)がリリースされてから、徐々に事例が出てきておりますが、今回はAjaxのページャーを仮想ページビューを利用して計測する方法をご紹介します。
今までのAnalyticsであればonclickとして、trackPageviewを発行してあげればいい訳です。
「 onclick="_gaq.push(['_trackPageview', '/services/']);" 」
GTMの場合は、dataLayerを利用しますが、onclickの場合は「dataLayer.push」ですね。
企業側のサイトにはこれから反映させて行く予定ですが、個人環境でテストを実施した内容で一度ご説明いたします。
企業サイトは既にこんな状況でして・・・、ちゃんと整理しないといけない状況に陥っていたりしますが・・・
dataLayerとは・・・
Google側で予め用意しているグローバルオブジェクトなのですが、GTMのコードよりも前に配置します。
<script>
dataLayer = [{
'event': 'transaction'
}];
</script>
使い方としては様々なものが考えられますが、現在私の方で使っているものを少しご紹介します。
1.AnalyticsのEventを利用して、http statusで404や500を計測する。
例えば、こんなdataLayerを404ページに仕掛けておき、404ページに来る手前のページとアクセスした先のページURLをデータで取得できます。<script>
dataLayer = [{
'event': 'error',
'eventaction' : 'Errorevent',
'eventlabel' : '404.html?page=' + document.location.pathname + document.location.search + '&from=' + document.referrer
}]; </script>
この場合、事前に「eventaction」 「eventlabel」をdataLayerタイプとしてマクロに登録しておく必要があります。
GMT側の設定はこんな感じですね。
トラッキングタイプを「イベント」にして、イベントトラッキングのパラメータを指定してあげる。
この部分はマクロでセットした変数を入れてあげればOKです。
2.仮想ページビューをセットする
Analyticsでよく利用される仮想ページビューの計測もdataLayerを用いて行えます。ちょっと寂しいのですが、仮想ページビューを発生させたいページには、こんなものを埋め込みます。
<script>
dataLayer = [{
'pageUrl': '/service/',
}];
</script>
もちろん、GTM側で「pageUrl」をdataLayer変数としてマクロ設定しておく必要があります。
で、GTM側の設定ですが、
こんな感じですね。
通常のAnalyticsのトラッキング設定に「基本設定」項目で指定しましょう。
dataLayer.pushとは・・・
では、dataLayer.pushとは何でしょうか？今まで説明してきたdataLayerはGTMで発行されたタグよりも前に置くということは説明しましたが、eventトラッキングにしても、仮想ページビューにしても、ページが読み込まれたと同時に発火するのです。
つまり、ページ内でのクリック計測など、今までonclickイベントで取得していた部分が実現出来ないわけです。そこで、dataLayer.pushが登場するわけです！
dataLayer.pushはjavascriptのevent listenerであるとGoogleの説明がありますが、要するにGTMのタグの後に置いて、onclickなどで発火させる事ができるものです。
Googleのサイトの例で言うと、こういう書き方になります。
<a href="#" name="button1" onclick="dataLayer.push({'event': 'button1-click'});" >Button 1</a>
onclickでdataLayer.pushを呼び出すわけです。
クリックイベントの計測であれば、例えば、こういう設定です。
<a href="#" name="button1" onclick="dataLayer.push({'event': 'variable1' , 'eventaction' : 'variable2' , 'eventlabel' : 'variable3'});">Button 1</a>
＜ここでハマったポイント＞
「dataLayer.push」は、「dataLayer」の付属のように紹介されますが、何度もdataLayer.push設定をしてもデータが取得出来ない時がありました。
eコマースなどのtransactionデータを計測する時もそうなのですが、「dataLayer」を利用したデータ取得を再度考えてみると、「dataLayer」の中に識別させるフラグを1つ用意して、
<script>
dataLayer = [{
'event': 'transaction',
'transactionId' : '●●●●●●●●●',
'transactionDate' : 'yyyy/MM/dd', ・・・
で、配信ルールとしては、その値をトリガーとする訳です。
例えば・・・
これはdataLayerの変数名「event」が、「transaction」と等しい時に発火！
という事です。
dataLayer.pushも考え方は同様
先程の例で言うと・・・
<a href="#" name="button1" onclick="dataLayer.push({'event':
'variable1' , 'eventaction' : 'variable2' , 'eventlabel' :
'variable3'});" >Button 1</a>
dataLayerの変数「event」 が「variable1」の時に、イベントトラッキングを発動させるのです。
では、本題！GTMを利用してAjaxのページャーをクリックし、仮想ページビューとしてカウントする方法は？
今までの応用編なだけで、特別な事はありませんが2日間くらい悩んでしまいました。ページャー。即ちこういうものですが、
Ajaxだと、この部分をクリックしてもページ自体がリフレッシュせずに、ページの内容だけ変わる場合があります。その部分を仮想ページビューを利用してPVとしてカウントしていきます。
また、今回も仮想ページビュー発動条件としてdataLayerの変数「event」を利用すると、例えばonclickにこんな仕掛けをしておけばOKです。
onclick="dataLayer.push({'event':'ajaxpager' , 'pageUrl': '/service2/'});"
で、GTM管理画面で通常のAnalyticsのトラッキングタイプ「ページビュー」の配信ルールに
{{event}} 等しい ajaxpager
という設定を追加しておけばOKです。
即ち、発火したら仮想ページビューとして計測されるべきdataLayer変数「pageUrl」の値が入るという仕組みです。
考えてみれば、至極簡単なのですがdataLayerとdataLayer.pushを全く同じものという考えが頭に浮かばなかった事と、未だにjavascriptの動きをちゃんと検証していないということもあって、だいぶ時間を潰してしまいました。
ちなみに！
別にdataLayer.pushを無理に使わなくても、現在は今までの「_trackEvent」を普通に利用してもデータが取得出来るようで、おそらくそれは今後も問題なく利用出来るのではないかと思われます。