AjaxでのAnalyticsによるトラッキング

Ajaxでは、スクリプト内で複数のページ遷移があっても実際のPVが1となってしまいます。(正確にはページ遷移というよりも要素の読み込み。読み込むものがページで、そこにGAタグが設定されている場合はページとしてトラッキングされるはずです)

この場合のAnalyticsによるトラッキング方法をご紹介します。

Analyticsのトラッキングでは、リンククリックなどの際に擬似的にPVを発生させることができますので、この方法をAjaxのEvent発生時に実装します。
Ajaxの動作速度低下を防ぐため、Analyticsの非同期タグの使用を強く推奨します

では、早速具体的な方法をご紹介していきましょう。
まず、使用するAnalyticsのコードは以下の形です。
Ajax読み込み元となるページにGAの非同期タグが設定されていることが前提条件です。

_gaq.push(['_trackPageview','/example/01.html']);

上記コードの /example/01.html の部分を擬似的なURLとします。
Ajax内で読み込んでいる素材のURLとするなど、必要に応じて変更してください。

実際の使用例として、画像要素を入れ替えるスクリプト内で、読み込まれた画像のURLをトラッキングする方法をご紹介しておきます。
まずはhtmlコードから。

<img src="/images/01.jpg" width="640" height="480" id="target" />
<ul class="links">
<li><a href="/images/02.jpg">画像2</a></li>
<li><a href="/images/03.jpg">画像3</a></li>
<li><a href="/images/04.jpg">画像4</a></li>
</ul>

このコードのul内のリンクをクリックされた時に、Ajaxで最初のimgタグのsrcを変更し、Analyticsにトラッキングさせるというものです。

<script type="text/javascript">
$('.links a').click(function(){
	var linksrc = $(this).attr("href");
	$("#target").attr("src",linksrc);
	var trackimage = linksrc.replace(".jpg",".html");
	_gaq.push(['_trackPageview',trackimage]);
	return false;
});</script>

Google Analyticsでは、拡張子jpgをトラッキングしてくれませんので、トラッキングさせる際に拡張子をhtmlにリプレースしています。
ここではシンプルなコードに書き換えていますが、Lightboxを用いてフォトギャラリーを作ったりという場合に、どの程度どの画像が見られているかを知ることができ、便利です。