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

やりたいこと

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

やりかた

こちらに記載されているように、まずは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 }
});

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

app.vue

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に計上するようになっています。

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

app.vue

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は色々画面も変わり、大変ですが両方に対応できてよかったです。