読者です 読者をやめる 読者になる 読者になる

わどぅー

記事については、中間出力の場合も多いので間違ってたらごめんなさい。twitter は waddlaw です。どうぞよろしく。

jQuery Mobile 1.3.1 で Google Analytics を設定するよ!

jQuery とか jQuery Mobile とか全然わかんないせいでめっちゃはまった・・・。

ネット上を検索すると、有益な情報がたくさん出てくるんですけど、jQuery Mobile の公式通りに

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

とすると、ネット上の情報は使えません・・・。なぜなら、jQuery のバージョンが上がり、関数が新しくなったから!

同じような人がいるかもしれないので、メモとして残しておきます。
ajax によるページ遷移もこれで取得できるようになります。

以下のコードを外部ファイル (ga.js) に保存して読み込ませるようにしてます。
アカウントの部分は自分のものに変更してください。

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-########-#']);
(function () {
    var ga = document.createElement('script');
    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);
})();
$(document).on("pageshow", '[data-role="page"]', function () {
    var url = location.pathname + location.hash;
    url ? _gaq.push(['_trackPageview', url]) : _gaq.push(['_trackPageview']);
});

具体的に変わった部分としては、live の代わりに on を使うようになったってとこかな。
最後に、スクリプトを読み込めば完成。順番決まってるので注意 (推奨)。jsファイルのパスは各自読み替えで!

<head>
...
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="./js/ga.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
....
</head>