Vue3でGoogleAnalyticsを利用する一つの解決法

安全かどうかは全く保証できないけど、vue-gtagのissueに解決法が載っていたのでご紹介。正直vue-analyticsはもうアップデートはしないからバグフィックスだけだって書いてあるし、vue-gtagはなんか知らんが$gtagが見つからんって言われるし意味がわからんかったので、これで動いたからよしとしています。

解決法：vue-gtag-nextを使う

　ここのMatteoGabriele commented on 15 Sep 2020 に解決策っぽいのが載ってたのでこれをやります。わたしはnpm環境なので、適宜置き換えます。

SHELL:

$ npm install vue-gtag-next
+ vue-gtag-next@1.14.0

main.js:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import VueGtag from "vue-gtag-next"; //ここ追加

createApp(App).use(router).use(VueGtag, { property: { id: 'UA-XXXXXXXX-X', router } }).mount('#app')

router/index.js:

...>8.cut...
import { trackRouter } from "vue-gtag-next";
...>8.cut...
...>8.cut...
trackRouter(router);

export default router

最初routerの方書き忘れててカウントされてないなぁ…と不思議がったのは内緒。

エラーが出なければブラウザの画面がきちんと表示されているはずです。ついでにAnalyticsもきちんとカウントされてます（画像は色々あってダブルカウントされてるだけでちゃんと１人としてカウントされてます。）

参考文献

Vue 3 Support ? #168 https://github.com/MatteoGabriele/vue-gtag/issues/168