Ajaxで他のページを取ってきて、コンテンツをガリガリ書き換えてしまうようなサイトを先日案件で作ったのですが、従来の方法ではGoogle Analyticsで遷移先のページビューを取得できないことに気づいて、実験を行ってみました。
実験のために作成したデモがこちらです。
何をやっているかを解説していきます。
以下のような部分がAjaxでページを書き換える処理の例です。
今回はjQuery 1.7.1を使うことを前提にしてコードを書いています。"ul a"セレクタ（いかにもやっつけですが。。）で選択されたa要素をクリックすると、href属性値で指定されたURLをAjaxリクエストし、その内容で <div id="contents"/> の中身を書き換えちゃうよ、というものです。
$(function() {
$(document).on('click', 'ul a', function (e) {
if (this.href) {
$.ajax(this.href, {
dataType: 'html',
success: function(data) {
$('#contents').empty().html(data);
}
});
}
e.preventDefault();
});
}); Google Analyticsの設定を行っていきましょう。
まずはhead要素内で普通にトラッキングコードを埋め込みます。
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-TRACKINGID']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>UA-TRACKINGIDの部分は適切なトラッキングIDに置き換えてください。
さて、本題です。
Ajaxで読むページのページビューを取るには、_trackPageview()という機能を使います。リンクをクリックしたイベントをトリガーに、このコードを呼び出してやればOK。
それが以下のコードです。
$(function() {
$(document).on('click', 'a', function () {
if (_gaq && this.href) {
_gaq.push(['_trackPageview', this.href]);
}
return true;
});
});.on()というメソッドはjQuery 1.7の新機能なので、古いバージョンのjQueryを使わなければいけない場合、.live()とか使えばいいと思います。
$('a').live('click', function() { ...という感じに。
なお、今回はhref属性値に目的のURLがセットされているのが前提のコードになっています。もし特定のページを計測したい場合、this.hrefの部分は特定の文字列に置き換えても問題ないです。
_gaq.push(['_trackPageview', '/contact/email.html']);というようになりますね。
リアルタイムレポートでページビューを確認する
Google Analyticsはリアルタイムなレポート機能を実装してきました。ログインして、リニューアルされたUIになっていたら、その機能が使えます。（まだ使えない人はここから申し込めるみたいですね）
メニューの「リアルタイム」→「コンテンツ」を選択し、ページ中央の「ページビュー数（直前の30分間）」をクリックします。これで、直近30分間のページビュー数をリアルタイムにウォッチしている状態になるので、先ほどのデモなどをいじくってこちらで確認する、ということができます。Ajaxで読むページのURLが、ページビュー数としてカウントされているかどうかを確認しましょう。
弊社は本日が仕事納めです。
今年は震災などがあり大変な年になりましたが、来年はよりよい年となるよう、この場を借りてお祈り申し上げます。
来年もどうぞよろしくお願いいたします。
