Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124

[Vue]使用vue-gtag串接google analytics

內容目錄

使用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的即時模式中已經可以看到資料進來了,只好慢慢找問題與調整了,如果有人遇到類似問題歡迎一起討論。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *