Google Analyticsのイベントトラッキングを使う

このエントリを最後に更新してから1446日が経過しており、すでに内容が現状とそぐわなくなっている場合が考えられます。エントリの内容を参考にされる場合には、あわせて最新の情報をご確認されることを推奨いたします。

「ダウンロードリンクのクリック数」みたいな、ページ遷移じゃないアクセスを解析したくなったのでGoogle Analyticsのイベントトラッキングを使ってみました。

とりあえず非同期型のトラッキングスニペットを使っていることが前提です。


<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-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>

こういう奴ね。

トラッキングの仕方

トラッキング自体はいたって簡単。_gaqオブジェクトを使って


_gaq.push(['_trackEvent', 'カテゴリ', 'アクション', 'ラベル', 値]);

という呼び出しをしてあげるだけです。各パラメータの内訳はGoogle様の説明をコピると、

  • カテゴリ(必須)
    トラッキングするオブジェクトのグループに付ける名前。
  • アクション(必須)
    各カテゴリとペアになる固有の文字列で、ウェブ オブジェクトのユーザー操作のタイプを定義するために一般的に使用されます。
  • ラベル(オプション)
    イベント データにディメンションを追加するためのオプションの文字列。
  • 値(オプション)
    ユーザー イベントに関する数値データを指定するために使用できる整数。

だそうです。カテゴリとアクションは必須。ラベルと値はなくても良い。カテゴリ、アクション、ラベルは文字列だけど、値は数値(整数)ってことですね。ちなみに値に負数は使えないみたいです。

例えばダウンロードリンクのクリックをトラッキングするには


<a href="#" class="download" onClick="_gaq.push(['_trackEvent', 'download', 'zip', 'filename']);">ダウンロード</a>

てな感じで、クリックイベントのonClickで呼び出してあげます

毎回onClick書くのはめんどくさいのでjQueryでラクする

onClickなんて毎回書いていられないのでjQueryでラクをします。例えばさっきのダウンロードリンクだったら、HTMLのほうは


<a href="#" class="download" >ダウンロード</a>

こうしておいて


jQuery(document).ready(function(){
	jQuery('a.download').click(function(){
		var url      = jQuery(this).attr('href');
		var file     = url.match(".+/(.+?)$")[1];
		var ext      = 'none';
		var fary     = file.split('.');
		if(fary.length !== 0){
			ext = fary.pop();
		}
		_gaq.push(['_trackEvent', 'download', ext, file]);
	});
});

こんな感じのコードを書いてあげれば、class名がdownloadのリンクをクリックしたときにトラッキングしてくれるようになります。

トラッキングしたイベントはどこで確認するの?

Google Analyticsのコンテンツイベントのトラッキングから確認できます。

img

こんな感じです。笑えるほどアクセスが少ないのは気にしない!

さぁ君もレッツアナル!