使用vue-gtag串接google analytics

其實這篇只是暫時紀錄，因為我還是搞不動為什麼可以運作....XD與其講Vue不如說是GTM和GA4串接上的一些狀況整理。

總之呢，準備要在Vue專案上串接GA(google analytics)，找了一下，通常會推薦vue-gtag(vue-analytics已經不維護了，建議用vue-gtag)。於是參考了https://matteo-gabriele.gitbook.io/vue-gtag/原作者說明就開始實作。

vue-gtag基本安裝

按照原說明文件，先安裝vue-gtag

$ npm add vue-gtag

然後在main.js引入vuegtag，GA_MEASUREMENT_ID就使用從GA服務開啟後取得的「評估ID」

import { createApp } from "vue";
import App from "./App.vue";
import VueGtag from "vue-gtag";

createApp(App).use(VueGtag, {
  config: { id: "GA_MEASUREMENT_ID" }
}).mount("#app");

理論上這樣就完成了。然而GA4的串流提示老樣子可能會等數小時才有反應，於是我就等了.....48小時，然後依然沒反應，登愣
由於GA4我還沒有用程式碼引入方式串接過，想說那誒啊捏，變這麼難接喔。
稍微查了一下，結果....毫無收穫XDDD
好吧，只好換方向來處理，既然GA4的很多說明跟GTM(google tag manager)有關係，那就用GTM來實作看看好了。

GTM串接GA4

基本流程如下：

1. 在GTM中開啟一個工作區
2. 加入代碼：選擇GA4設定
3. 評估ID填入GA中取得的「評估ID」
4. 觸發條件選擇：All page
5. 儲存設定，再來發布容器

回到Vue專案中，你申請完GTM工作區後應該會取的一組gtag，會長這樣：GTM-XXXXXX，將這個識別ID加回到到main.js，沒錯就是這串

import { createApp } from "vue";
import App from "./App.vue";
import VueGtag from "vue-gtag";

createApp(App).use(VueGtag, {
  config: { id: "GA_MEASUREMENT_ID" } <---這個
}).mount("#app");

設定完後，可以開啟GTM中的預覽來檢查，建議chrome可以裝一個擴充「Tag Assistant」以方便檢視是否有安裝順利。

遇到問題

其實上述做完後，我在GTM的預覽模式中還是會失敗，「Tag Assistant」提示我代碼有放，但會無法取得一個測試用的js，目前尚未找到原因，但在GA的即時模式中已經可以看到資料進來了，只好慢慢找問題與調整了，如果有人遇到類似問題歡迎一起討論。