Laravel + Vueで作ったSPAのサイトにGoogleAnalytics対応をする

やりたいこと

Laravel + VueのSPAサイトにGoogleAnalyticsを設定したい。 Userが入力をしてそのトラッキングIDからPVを計上できるような機能を作りたい。 GoogleAnalyticsにはユニバーサルアナリティクスとGoogleAnalytics4の2つがあり、両方似対応できるようにしたい。

やりかた

こちらに記載されているように、まずはhead内にgtag.jsの初期化コードを記載します。

その際に、多少変更を加えます。 バックエンドからトラッキングIDを渡してやります。そうすることで、ユーザーが個別に設定したり、環境ごとに変更できたりするためです。

index.blade.php
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id={{ $tracking_id }}"></script>
<script>
  var tracking_id = "{{ $tracking_id }}"
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', tracking_id);
</script>

つぎに、Vueでの設定です。 よくvue-gtagのようなライブラリが使用されているのを見ますが使用しません。

まずは、だいたいVueのルートファイルはこんな感じかと思います。

app.vue
import Vue from 'vue'
import Router from 'vue-router'
import page1 from '@/components/page1'
import page2 from '@/components/page2'
import page3 from '@/components/page3'

Vue.use(Router)

router = new Router({
  routes: [
    {
      path: '/',
      component: page1
    },
    {
      path: '/page2',
      component: page2
    },
    {
      path: '/page3',
      component: page3
    }
  ]
})

new Vue({
  el: "#app",
  router,
  components: { page1, page2, page3 }
});

次に、SPAの対応をしてやります。

if(tracking_id) {
  router.afterEach((to, from) => {
    gtag('config', tracking_id, {page_path: window.location.pathname}
  });
}

new Vue({
  el: "#app",
  router,
  components: { page1, page2, page3 }
});

Vue Routerのフック機能を用いて、遷移後に手動でpvを計上します。

ただし、これだけだとGoogleAnalytics4(GA4)では二重計測されてしまいます。 というのも、GA4からデフォルトで自動的にブラウザ履歴の変更をPVに計上するようになっています。

ga4_extension

自分が使用する分にはこのチェックを外せばよいですが、ユーザーにトラッキングIDを入れて貰う場合、このオペレーションは大変です。 なので、この遷移後に手動でpvを計上するのを、ユニバーサルアナリティクス(UA)でだけ行います。

if(tracking_id && /^UA/.test(tracking_id)) {
  router.afterEach((to, from) => {
    gtag('config', tracking_id, {page_path: window.location.pathname}
  });
}

new Vue({
  el: "#app",
  router,
  components: { page1, page2, page3 }
});

これでどちらも対応してPVを計上できました。 GA4は色々画面も変わり、大変ですが両方に対応できてよかったです。

About

現役フリーランスエンジニアの勉強・備忘録。
バックエンドがメイン。フロントからインフラまで色々やってます。