ZeBeVogue別館 このページをアンテナに追加 RSSフィード

2012年09月21日

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

f:id:zebevogue:20120921122504p:image

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に任せられるというのは利点です。

投稿したコメントは管理者が承認するまで公開されません。

トラックバック - http://d.hatena.ne.jp/zebevogue/20120921/1348199303
リンク元
人気の記事

『d.hatena.ne.jp』 の人気エントリー - はてなブックマーク

1. CentOS 5.8にNode.jsをインストール - ZeBeVogue別館
2. meta の viewport - ZeBeVogue別館
3. jQueryで複数のイベントを割り当てる - ZeBeVogue別館
4. MacでPutty形式の秘密鍵を変換する - ZeBeVogue別館
5. DropboxのDatastore APIをさっそく使ってみた - ZeBeVogue別館
6. ChromeでAccess-Control-Allow-Originを停止させつつ、別アプリとして動かす - ZeBeVogue別館
7. Smarty で携帯絵文字 - ZeBeVogue別館
8. ExpressJSでのバリデーション(express-validator) - ZeBeVogue別館
9. Twitter Bootstrapのカルーセルをキーボードとスワイプで操作 - ZeBeVogue別館
10. PhantomJSでスクリーンショットを撮る&HTML2PDF - ZeBeVogue別館
11. PHPで簡単XPath(ATOM/RSS1.0) - ZeBeVogue別館
12. Node.jsでAmazon S3にアップロードする方法 - ZeBeVogue別館
13. ApacheとNode.jsを連携させる - ZeBeVogue別館
14. neu.Nodeを触ってみました - ZeBeVogue別館
15. PDFKitを使ってNode.jsからPDFを作成する - ZeBeVogue別館
16. gruntでJavaScript/CSSを結合・minify - ZeBeVogue別館
17. node.jsからPhantomJSを使ってPDFを生成する - ZeBeVogue別館
18. Node.js/ExpressJSでのファイルのアップロード - ZeBeVogue別館
19. Node.jsでjQueryを利用する - ZeBeVogue別館
20. Node.js/PHPでの様々な文字列ハッシュの生成 - ZeBeVogue別館
21. node.jsのMVCフレームワークSails.jsを使ってみた - ZeBeVogue別館
22. nodeコマンド以外の起動コマンド(node-dev/forever/npm start/npm test) - ZeBeVogue別館
23. ExpressJSのルーティングの自動化(Node.js) - ZeBeVogue別館
24. nodemailerでNode.jsからメールを送る - ZeBeVogue別館
25. PhalconのWebToolsを使ってみる - ZeBeVogue別館
26. Titaniumでadmobを利用する(Android編) - ZeBeVogue別館
27. ImageMagickでGIFアニメを作る - ZeBeVogue別館
28. Node.jsでの画像処理 - ZeBeVogue別館
29. reveal.jsで格好いいプレゼンを作ってみた - ZeBeVogue別館
30. ZeBeVogue別館