console.lealog();

@leader22のWeb系に関する勉強めもブログですのだ

いわゆるSPAでGoogleAnalyticsを使う

日本語の記事引っかからなさすぎてちょっとひいた!
みんな知ってて当たり前ってだけ?

いわゆる最近のanalytics.jsってやつの話です。

気になってたポイント

  • 何がどうなったらトラックされたことになってるか
  • # のルートをどうトラックするか

仕組み

// お決まりのトラッキングコードを仕込んでから
ga('send', 'pageview');

ってするとビーコンのリクエストが発生する。
で、Cookieにいろいろつけた情報と一緒にサーバーに飛んで行く。

どうやら1pxのgifを投げてるので、DeveloperTools -> Network -> Imagesで見れたりする。
まぁ、以下の拡張いれたほうがわかりやすいし早いのでオススメです。

Google Analytics Debugger - Chrome Web Store

#!/

なんしかよしなにやってくれるんかと思いきや、そんな甘い話はどこにもなく・・。

hashchangeで上述の通りサーバーにデータ投げないとダメです。
いわゆるpageviewとしてカウントしたいタイミングで、それのリクエストを投げるってのが鉄則。

注意点はもうひとつあって、デフォルトでサーバーに送られるのは、

var location = window.location.protocol +
    '//' + window.location.hostname +
    window.location.pathname +
    window.location.search;

という値になるので、hash以下がつきません。
なので、

// ページのロードで1回
ga('send', 'pageview', (location.pathname + location.search  + location.hash));

// その後、ページ内で遷移したら飛ばす
window.addEventListener('hashchange', function() {
  ga('send', 'pageview', (location.pathname + location.search  + location.hash));
});

// もちろん最初に
// ga('set', 'page', (location.pathname + location.search  + location.hash)); しておいて
// ga('send', 'pageview'); でもおkなはず

ってな具合にデフォルトを上書きして送信しなきゃダメ。

そのほか

データの更新頻度はなんと、

  • プレミアムは4時間ごと
  • 無料版はなんと24時間以上n時間ごと

130万/月も払えない平民といたしましては、
適当にデータとっといて、後から頑張ってフィルタする方が精神衛生上よさそうという結論に達しました。

Google アナリティクス プレミアムの機能一覧 – Google アナリティクス