vue-routerをつかってシングルページアプリケーション的なサイトを構築して、そこでGoogleアナリティクスの計測をしたいときの方法。
環境
- Vue.js 2
- vue-router 2
- サーバサイドはLaravel５.5（Laravel-Mix）
analytics.jsの読み込み
スクリプトの読み込み
いろいろ方法があると思うけど、新しいブラウザ（async属性を認識するやつ）の場合は以下のコードがパフォーマンスがよいらしいです。
シングルページアプリケーションにする時点である程度古いブラウザは切り捨てると思うのでこちらのコードを使いました。
UA-XXXXX-Y はアナリティクスのIDです。
<!-- Google Analytics -->
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- End Google Analytics -->
ナビゲーションガードをつかってアナリティクスへの送信
vue-routerにはナビゲーションガードという、ページ遷移にフックする処理がいろいろとあります。
その中の「グローバルなAfterフック」を使って、ページ遷移が起きるたびにGoogleアナリティクスにパスを送信してあげます。
Laravelでの開発なのでapp.jsに書き込みましたが、適宜グローバルなJSファイル（vueやrouterを定義しているところ）にコードを書きます。
app.js
// 最初のアクセスのとき
ga('set', 'page', router.currentRoute.path);
ga('send', 'pageview');
// ページ遷移のとき
router.afterEach(( to, from ) => {
ga('set', 'page', to.path);
ga('send', 'pageview');
});
以上です。
ただ、vue-routerをhistoryモードで使っている場合、アナリティクスが発行するトラッキングコードをそのまま貼り付けただけでもある程度計測はしてくれるみたいです。（ちゃんと計測していないんですが、あまり変わらない数字が計測されました。）