Ajax依存サイトにおけるGoogle Analyticsトラッキングコードの正しい使い方(jQuery編)

Google Analyticsって便利だよね、うんうん

WEBサービスを作ったらアクセス解析をしたいですね。そうすると多くの人はGoogle Analyticsを利用することになります。言わずと知れたGoogle社製アクセス解析サービスです。

アカウントを作ってホストを登録しますとこんなJSのコード（トラッキングコード）が発行されます。
（これは拙作 http://j.inthemaking.net/ のもの）

<script>
  (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-48716649-1', 'inthemaking.net');
  ga('send', 'pageview');

</script>

Googleが解説するとおりにこのコードをページ(text/html)のどこかにペーストしておけばそれだけで、訪問者のページビューごとにリクエストの詳細がgoogle-analytics.comに送信されます。こんな簡単に高度なアクセス解析が始められるんですからたいしたものです。

しか〜し！Ajaxに弱くね？

しかし、一点困ったことがあります。言われたとおりにコードを設置しても、ページ内にある、非同期通信でリクエストされる他のコンテンツはカウントされません。上述のコードは「ページ」(document単位)での利用を前提にしているからですね。これはAjax依存サイトには手痛いです。

とりわけ、拙作 http://j.inthemaking.net/ の場合は、完全Ajaxサイトでして、GET / で返される text/html 中のJSによって、画面に表示されるすべての動的なコンテンツをjsonフォーマットで非同期取得する仕様です。ページ遷移はまったくありません。ユーザがページリロードを行わずにAjaxだけで利用し続ければ、その後はPVも訪問数まったくカウントされません。いやいや困った。。。

かんたん解決策

さて、前置きが重くなりましたが、解決策です。しかも、けっこう簡単です。

今回のサービスではAjaxライブラリとしてjQueryを使っています。
jQueryの場合、
ajaxSuccess( handler(event, XMLHttpRequest, ajaxOptions) )
というAjax設定メソッドが用意されています。これを使うとフロントエンドアプリケーションで Ajaxリクエストが成功に終わった場合に常に行うこと がグローバルに定義できます。

さっそくやってみます。

$(document).ajaxSuccess(function(event, xhr, settings){
    ga('send','pageview', settings.url);
});

これをお決まりのアレの直後にでも書いておきます。こんな感じ。
(直前に書いても、ready()の前にメソッドチェーンしてもいける気がしますが検証はしてません)

$(document).ready(function(){
    $(document).ajaxSuccess(function(event, xhr, settings){
        ga('send','pageview', settings.url);
    });

これだけです。あっさり。 ほらAnalyticsがXHRに反応してます。

カウントしたくないXHRがあればif文でフィルターするなりすればいいでしょう。

以上です！

---

告知

というか宣伝ですが、このエントリーも関係してますが、

2chまとめ巡査長β2

http://j.inthemaking.net/
というのを俺得用に作ってみました。2chまとめサイトのまとめです。PCでも見れますがスマホ用です。
よろしければ暇つぶしに使ってご感想いただければ嬉しいです。