Google Analyticsのイベントトラッキング

Google Analyticsでページ単位ではなく、ページ内のアクション等でイベントを記録する方法を調べてみました。
ついでに、今時onclickイベントをHTML内に記述するのはダサいので、外部JSで実装しました。
通常は以下のように、scriptタグを適当な位置に記述します。スクリプト関係は、ロード時間の関係上、一般的にページの最下部に設置します。

<script type="text/javascript">
 
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
  _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>

そして、イベントを取得したい要素にonclick属性などを追加します。

<a href="#home" onclick="_gaq.push(['_trackEvent', 'カテゴリ名', 'アクション名','ラベル名', 値]);" >home</a>

カテゴリ名、アクション名は必須項目です。ラベル・値はオプションです。

HTML

<a class="home" href="#">Home</a>
<a class="drink" href="#drink">Drink</a>
<a class="food" href="#food">Food</a>
<a class="access" href="#access">Access</a>
<a class="gallary" href="#gallary">Gallary</a>

JavaScript

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
_gaq.push(['_trackPageview']);
...
$(document).ready(function(){
	...
	$('a.drink').click(function(){
		_gaq.push(['_trackEvent', 'nav', 'pageMove', $(this).attr('href')]);
		return false;
	});
	...
	(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);
	})();
});

問題がなければ、Google Analyticsの左メニューの「コンテンツ」「イベント」に表示されるようになります。上記の場合、ナビゲーションのページ移動をJSで制御し、href属性をそのまま記録するようにしています。一番上の画像を確認してみてください。

応用すれば、どんなタイプのイベントにも設定する事ができるので、ファイルのダウンロードカウント、Twitter/Facebookのアクション、ページの最下部まで読んだか（どこまで読んだか）、A/Bテストなんかにも使えますね。

そういったログ系の出力をGoogle Analyticsに任せられるというのは利点です。