2016年3月17日木曜日

SPA(Vue.js)でGoogle Analyticsを使って各ページのPVを取得してみた

SeekGeeksはVue.jsで作っていて、いわゆるSPA(Single Page Application)というやつに分類されます。
SPAはサーバー側でゴリゴリテンプレートをいじる必要が無いので個人的にすごく好きなのですが、GoogleアナリティクスでPVを取得しようとすると、TOPページしかトラッキングできないという問題がありました。
ググってみると、どうやらタグマネージャーというのを使えばトラッキングできるらしいです。が、そもそもGoogleアナリティクス自体全然いじったことないのに他のこと勉強してる余裕は無いなーと。。

でもできることなら何とかしたかったので、詳しい人に相談したり調べたりしてみたら、コード一行追加するだけで解決できたので書き残しておきます。

コードは、これ。

ga('send', 'pageview', '/'+window.location.hash); 

このコードを、各ページのルーティングで必ず通って、かつ$(document).readyの後のタイミングのところに書いてあげるだけでOKです。SeekGeeksの場合はルーティングにSammy.jsっていう別のフレームワークを使ってるのでそのルーティング処理の中に書きました。Vue.jsにもルーティングの機能が出来たっぽいのでそちらでも同様にできると思うし、Angular.jsでも$routeChangeStartとか$routeChangeSuccessとかのコールバックの中に書けばできるはず。
ルーティングのタイミングで自分でpageviewってのを追加すると統計情報に反映してくれる、っていうものみたいですね。便利。「'/'+window.location.hash」にしてるのは私の好みなので、ここの値は各自好きなように設定して良いのだと思います。

これで、SeekGeeksのどのプランにアクセスがあったかを確認できるようになってすごく便利になりました。
SPA作ってる方は是非試してみてください。