jQuery MobileでGoogle Analyticsを使う方法 - へっぽこプログラマーの日記

jQuery Mobileもβ版になって触る人が増えてきました。jQuery MobileでGoogle Analyticsを使ったお話もちらほらでてきたようなので、私のやり方もひとつ紹介してみようと思います。
jQuery Mobileでは、普通にGoogle Analyticsのコードをコピペしても最初のページしかトラッキングしてくれません。ひとつのファイルにすべてのページをまとめている場合は当然としても、複数のページに分割している場合でも正しくトラッキングできません。

jQuery MobileでGoogle Analyticsがうまく動かない理由

jQuery Mobileでページ遷移する場合、ajaxで遷移先のページのHTMLを読み取って取り込んでいます。そのため、遷移先のdata-role="page"で指定された要素以外の部分はまったく読み込まれません。文字だけだとよくわからないと思うので次のサンプルをみてください。

遷移先のページ

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
	<title>遷移先ページ</title>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
	<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
</head>
<body>

<!-- ここから〜 -->
<section data-role="page">
	<header data-role="header"></header>
	<article data-role="content"></article>
	<footer data-role="footer"></footer>
</section>
<!-- 〜ここまで -->

</body>
</html>

jQuery Mobileは、上記のサンプルのコメントで明記した「ここから〜」「〜ここまで」の間しか読み込みません。そのため、それ以外の場所に書いたコードはすべて無視されます。Google Analyticsはもちろん、その他のスクリプトやスタイルも読み込まれないので注意が必要です。

jQuery MobileでGoogle Analyticsをうまく動かす方法

次のコードを貼り付けるだけです。

/*
 * Google Analytics 設定
 */
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-****-*']);

// ページトラッキング
$(document).bind('mobileinit', function(){
	$(':jqmData(role="page")').live('pageshow', function (event, ui) {
		_gaq.push(['_trackPageview', $.mobile.activePage.jqmData('url')]);
	});
}

// Google Analytics 読み込み
$(document).ready(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);
});

上記コードは、必ずjQueryとjQuery Mobileのスクリプトの間に埋め込んでください。もしページを複数のファイルに分割している場合は、jsファイルに保存してすべてのページで読み込んでください。複数のファイルに分割した場合、どのページがスタートページになるかわからないためです。（スタートページ以外ではこの記述は無視されるので重複することはありません。）

<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<!-- ここに埋め込む  -->
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>

解説

jQuery Mobileに対応している部分は以下のコードだけです。

// ページトラッキング
$(document).bind('mobileinit', function(){
	$(':jqmData(role="page")').live('pageshow', function (event, ui) {
		_gaq.push(['_trackPageview', $.mobile.activePage.jqmData('url')]);
	});
}

jQuery Mobileのページ表示イベントで、そのページのURLを取得してトラッキングしているだけです。そのページのURLは、リンク先の指定に"#page-id"のようなID指定であれば"#"を除いたpage-idに、URLで指定した場合はそのままURLが入ります。

おまけ

IDで遷移している場合に、Google Analyticsのレポートに"top"だとか"home"だとかIDが指定されて微妙だと思っている方がいるかもしれません。実はjQuery Mobileでは、data-url属性を使って任意のURLをページ遷移に使う方法があります。

<a href="/test.html">test.htmlへ</a>

<section data-role="page" data-url="/test.html">
	<!-- 略 -->
</section>

この指定方法でも正しくページ遷移ができます。この場合、トラッキングされるのは"/test.html"になるので普通のページのように見えます。ちなみにdata-urlは、本来jQuery Mobileが自動生成する属性ですが、このように任意の値を指定することができます。（data-urlを指定すると#page-idによる遷移ができなくなるので気をつけてください。）
これを応用すると次のようなこともできます。

<a href="/test.html">test.htmlへ</a>

test.html

<section data-role="page" data-url="/hoge.html">
	<!-- 略 -->
</section>

分割したtest.htmlへアクセスしていますが、トラッキングされるのは"/hoge.html"です。また、読み込み後は、/hoge.htmlという指定でこのページ遷移することもできます。擬似的なリダイレクトのような扱いにもなるので、うまく使ってみてください。

あとなんかおまけ2的なことを書こうと思ったのに忘れてしまった。。