動的遷移のサイトでもGoogleアナリティクスで正しく計測する

Googleアナリティクスは通常だとページ遷移毎にデータを送信するので、動的遷移(Ajaxでページ内の一部を書き換えるなど)ではデータの送信が行われません。

そこで今回は、動的遷移でもデータ送信を行う方法を試してみました。

実装方法

今回はサンプルとして、PJAXを使った動的遷移での実装を試してみます。

HTML

#contentsの中が動的に書き変わります。

<div id="page">
	<nav id="gnav">
		<ul>
			<li><a href="index.html" class="pjax">ナビ1</a></li>
			<li><a href="index2.html" class="pjax">ナビ2</a></li>
			<li><a href="index3.html" class="pjax">ナビ3</a></li>
		</ul>
	</nav>

	<div id="contents">
		<p>コンテンツA</p>
	</div>
</div>

JavaScript

PJAXで用意されているコールバックでデータの送信を行います。

$(function() {
	$.pjax({
		area: '#contents', // 書き換える要素
		link: 'a.pjax', // pjax対象のリンク
		callback: function(event, setting) {
			ga('send','pageview', location.pathname.slice(1));
		}
	});
});

動的遷移でGoogleアナリティクスにデータを送信するデモページ
Googleアナリティクス上でデータが確認できました。

今回はPJAXで試しましたが、他の実装の場合でも基本は同じで、コンテンツが書き変わった後に「ga(‘send’,’pageview’, 遷移後のURLのパス)」を実行するようにすればOKです。
　

【参考サイト】

• Ajax依存サイトにおけるGoogle Analyticsトラッキングコードの正しい使い方(jQuery編) – Qiita