Google Analyticsの仮想ページビューとトラッキングコード
Google Analyitcsでは、閲覧したページのURLをページビューとしてカウントしています。
じゃあ、ページのURLが変わらない、PDFなどファイルダウンロード、外部サイトへのリンクはどうすればよいのか。
こういったケースの場合、URLの代わりに別の値をページビューに指定し、計測する方法が仮想ページビューです。
リンクをクリックしたタイミングでビーコンを飛ばして計測してみます。
さらに、いい加減そろそろユニバーサルアナリティクスが正式ローンチされるだろうと思われるので、ユニバーサルアナリティクスバージョンで記述してみます。
でもってさらに、HTMLは汚したくないのでJSで処理しちゃいます。
jQuery使う方が簡単なんでjQuery前提で。
例としては以下のようなPDFダウンロードリンクにしてみます。
|
1 |
<a href="hoge.pdf" target="_blank">about hoge (PDF)</a> |
計測用のjavascriptは
|
1 2 3 4 5 6 7 8 9 |
$(function() { var pdf; $('a').on('click', function() { pdf = this.href; if (pdf.indexOf('.pdf') > -1) { ga('send', 'pageview', '/VIRTUAL/' + pdf; } }); }); |
以上です。
割とシンプルです。
※リンク先がPDFであるかどうかのif文が暴力的なのはご愛嬌としてください。
ただ、このままだとレポート画面でのページタイトルがクリック元のページタイトルになりますので、リンクテキストをタイトルに設定してみます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(function() { var pdf; $('a').on('click', function() { pdf = this.href; if (pdf.indexOf('.pdf') > -1) { ga('send', { 'hitType': 'pageview', 'page': '/VIRTUAL/' + pdf, 'title': encodeURI($(this).text()) }); } }); }); |
これでページタイトルが「about hoge(PDF)」となりレポートに表示されます。
複数の情報を渡す場合はオブジェクトでハッシュ化してから渡す必要があります。
ここでhitTypeというキーが出てきますが、値として以下の4種類設定できます。
- pageview
- event
- social
- timing
詳細はGoogle Developersを参照してください。
今回は仮想ページビューなので、pageviewを使いました。
ちなみにこのhitTypeは省略可ですが、省略するとすべてのヒットに対して適用されますので、
仮想ページビューとイベントに同じ値を適用することもできます。
hitCallback
例は別ウィンドウを開くようになっていますが、同窓で遷移する場合はビーコンが飛ぶ前に遷移してしまって計測できないことがあります。
そういったことがないように、hitCallbackというメソッドを使ってビーコンを飛ばしてから遷移するということができます。
手順としては以下のようになります。
- リンクイベントを止める
- hrefの値を取得する
- ビーコンを飛ばす
- 飛ばし終えたらJavascriptでリンク先へ遷移
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(function() { var pdf, target; $('a').on('click', function(e) { e.preventDefault(); e.stopPropagation(); pdf = this.href; target = this.target; if (pdf.indexOf('.pdf') > -1) { ga('send', { 'hitType': 'pageview', 'page': '/VIRTUAL/' + pdf, 'title': encodeURI($(this).text()), 'hitCallback': function() { target != "_blank" ? location.href = pdf : window.open(pdf); } }); } }); }); |
こんな感じになります。
hitCallbackはよくありがちなcallback関数で、わかりやすくてよいです。
