[アクセス解析]Google Universal AnalyticsでAjaxイベントをトラッキング

ブログやウェブサイトを運営しているウェブマスターであれば、アクセス解析には大体みなさんGoogleアナリティクスを利用されているんじゃないかと思います。

通常のページビューのトラッキングは、下記のようにheadタグ内に記述し、ページが表示されたタイミングでアナリティクスのサーバーに「このページが表示されたよ~」という情報が送信され、記録されます。
下記は2013年に新しくベータリリースされたUniversal Analyticsの analytics.js を使うタイプのトラッキングコードです。

	<head>
		<script>
		  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
		  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
		  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
		  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
		
		  ga('create', 'UA-xxxxxxxx-x', 'xxxxx');
		  ga('send', 'pageview');
		
		</script>
	</head>

ここ最近のウェブサイトは、動作を軽くするためにページ全体の表示を最小限にし、なるべくAjaxを使用して、その画面内で必要な情報をその都度小出しでサーバーから取得して表示するようになってきています。

このようなAjaxによるリクエストではページ遷移しませんので、上記のスクリプトが実行されず、ページビューとしてカウントされません。

画面内の小さな情報をAjaxするのであればページビューを記録する必要は無いかと思いますが、ページ全体の構造が変わるような大きな情報の取得を行う場合は、ページビューを記録したいと思う場面が出てきます。

Googleアナリティクスを利用しており、analytics.jsを使用するタイプのトラッキングコードで、Ajax通信をページビューとして記録するには下記関数をJavascript内で呼び出すようにします。

<script type="text/javascript">
	// 例)トップページのページビューを記録する場合
	ga('send', 'pageview', '/');

	// 例)bbsディレクトリのページビューを記録する場合
	ga('send', 'pageview', '/bbs/');
</script>

参考:https://developers.google.com/analytics/devguides/collection/analyticsjs/


サンプル

実際に私が運営している小さなサイトでの使用例を書いておきます。
このサイトで上記トラッキングを埋め込んだ箇所はいくつかありますが、その内のトップページの埋め込みになります。
トップページでは初期アクセス時に縦5000px程度のスクロールが必要となる画面を生成します。マウスのスクロールにより画面の下端に近づくと、jQueryのスクロールイベントによりAjax送信をサーバに行い、結果として追加となる画面要素を受け取り、トップページの下端にappendします。
ツイッターなどでよく見かけるような動作ですが、閲覧者視点で見ると、トップページを表示して残念ながら興味がないという場合は、マウスホイールを8~9回もカリカリとスクロールする前にブラウザバックするなりして別のページに移動されると思います。
別のページに移動せず、まだ見たいという方は、トップページをもう一度再表示するのと同等だと判断しましたので、このAjaxイベントにページビューの記録を設定しています。

$(function(){
	$(window).scroll(function(){
		:
		if(($(window).scrollTop() + $(window).height()) > ($(document).height() - 100)) {
			:
			var url = "example";
			$.ajax({
				type: "POST",
				url: url,
				data: {param:param},
				dataType: "html",
				timeout: 10000,
				async: true,
				cache:false,
				success: function(ret) {
					$("#append").append(ret);
					:
				},
				error: function(ret) {
					:
				},
				complete: function(ret) {
					:
					ga('send', 'pageview', '/');
				}
			});
		}
		:
	});
});

セミコロンの部分は色々と省略していますが、ここでは画面の下端から100px以内にスクロールした際にAjax通信を行い、完了時に毎回トップページのページビューを記録しています。

以上になります。

urchinTracker();

pageTracker._trackPageview();
とかがGoogleの機能拡張により使えなくなってきていますので、古い記述を使用されており、Javascriptエラーが発生している場合は新仕様に合わせてみるのもいいのではないでしょうか。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>