トラッキングが届いてない ?

以前、 Vue.js で実装した SPA を公開していましたが、

アクセスしても、 Google Analytics(以降、 GA )に反映されないことがありました。


原因はすぐわかりました。

それは、 非同期でページ遷移するため、「はじめのアクセス」しか、トラッキングが行われていなかった ためです。

対応として、 SPA でのページ遷移時にトラッキングを行うコードを追加します。

対応サンプル

app.blade.php

SPA の入口となる HTML ページです。

どうせすべてのページで利用するのですから、私はここに GA コードを設定しました。

 1<!DOCTYPE html>
 2<html lang="{{ config('app.locale') }}">
 3<!-- 略 -->
 4<body>
 5<div id="app"></div>
 6<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
 7<script>
 8  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 9    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
10    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
11  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
12
13  ga('create', 'UA-XXXXXXXX-XX', 'auto');
14</script>
15<!-- 略 -->
16</body>
17</html>

JavaScript

Vue Router のグローバルフックである、 afterEach を利用して、 GA トラッキングを行います。

afterEachは、ページ問わず、遷移が発生時に必ず呼び出されます。

1cons router = new new Router({
2  // いろいろ設定
3});
4router.afterEach((to, from) => {
5  if ("ga" in window) {
6    ga('send', 'pageview', to.path)
7  }
8})
9

このコードを追加することで、トラッキングが届くようになりました。

基礎から学ぶ Vue.js

mio
出版社:シーアンドアール研究所  発売日:2018-05-29

Amazonで詳細を見る

予定通り進まないプロジェクトの進め方

前田考歩,後藤洋平
出版社:宣伝会議  発売日:2018-03-29

Amazonで詳細を見る