Universal Analytics with jquerymobile

さてさて、先日のGoogle I/O 2013で数多くの新サービスが公開されました。その中の一つとして、Google Analyticsの進化版、Universal Analyticsがあります。まだβ版ですが早速使ってみようと思います

普通のサイトであれば、管理画面から表示されるスニペットコードをコピペすればうまく動くはずですがjquerymobileの場合は少し手直しが必要です。これについてはgoogle analytics時代から変わりませんね。jquerymobileはリンク先をajaxで読み込み、必要な部分(page)だけを更新する仕組みなので、ヘッダやフッターに記載されているjavascriptやcss関連はアクセス一発目の一度しか読み込まれません

このあたりのハック例はいくらでもあるので割愛。ga.jsからanalytics.jsに変わったUniversal Analyticsでの変更ハックを記載します

[javascript]

// ページ表示毎に呼びされるpageshowにon(bind)する
$(document).on("pageshow", function() {
ga(‘send’, ‘pageview’, $.mobile.activePage.jqmData(‘url’));
});

// 初回読み込み用 これは一度だけ呼び出されればよい
$(document).ready(function(){

(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-1’, ‘foobar.com’);
ga(‘send’, ‘pageview’);

});
[/javascript]

UA-XXXXXXXX-1、foobar.comは自分のトラッキングコードと置き換えてくださいね。こんなハックをする人には言うまでもないと思いますが、念のため！いや、こんなハックする人はこんなブログ読まないか

ga(‘send’)の引数についてはこちらをどうぞ

https://developers.google.com/analytics/devguides/collection/analyticsjs/advanced#send
https://developers.google.com/analytics/devguides/collection/analyticsjs/method-reference#send