2014-07-19

hitCallbackを使ったUnUTMの実行

UnUTMはGoogle Analyticsなどで使われるutm_*パラメーターを削除するものなので、当然それらを利用した解析機能は失われることになる。一応ユニバーサル・アナリティクスのga()を使って呼ぶことにより、うまくすればトラッキング出来るんじゃないかと考え、そうしていたが、どうもダメそうだ。ga()を直接使う代わりにトラッカーによるデータ送信後に発動する関数を指定できるhitCallbackフィールドを使うのが良さそう。

普通に書くと以下の様なコードになる。

ga('create', 'UA-XXXXXXXX-X', 'auto');
ga('send', 'pageview', {
  'hitCallback': function () {
    var l = location;
    var h = history;

    if (!l.search || !h.replaceState) {
      return;
    }

    var u = l.pathname +
      l.search.replace(/[?&]utm_[^&]+/g, '').replace(/^&/, '?') +
      l.hash;
    h.replaceState(null, '', u);
  }
});

ga('send', 'pageview')にオブジェクトを引数として追加し、そのオブジェクトのhitCallbackキーに対してutm_*を消す操作を行う関数を割り当てる。これでトラッカーがデータを送信してからutm_*パラメーターが削除される。

UnUTMにはunutmという関数を追加するだけのunutm_ga.jsも追加して、v0.2.0にしておいた。これを使ってGoogle Analyticsのコードを書き換えればきっと機能するだろう。

<script src="/bower_components/unutm/unutm_ga.js"></script>
<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-XXXXXXXX-X', 'auto');
  ga('send', 'pageview', {
    'hitCallback': unutm
  });
</script>

後で他から特定のトラッカーにちゃんとフィールドを追加する方法がわからなかったので、独立したライブラリにはできなかった。正確に言うと、追加自体は問題なくできるけれど、ga('send')が既にある場合はフィールドが追加される前にsendされてしまうので、フィールドに設定した値が反映されることはないという感じ。例えばhitCallbackの場合は値に設定した関数が発動しない。そのため利用はこのようにAnalyticsのコードを書き換えるという形しかなさそう。