---
tags: bahamut-pie, side project
---
# bahamut-pie - chapter5: Vue with Google Analytics🔍
Vue 專案導入 GA，google 結果大都是用 [**vue-analytics**](https://github.com/MatteoGabriele/vue-analytics) 就可以輕鬆設定完成
不過當時開發遇到了一些意外，這邊順便紀錄一下

## vue-analytics
按照 vue-analytics 教學/官方文件的方式安裝並設定

npm install vue-analytics

在 main.js (注入點)設定好以下幾行，就會有基本的頁面追蹤功能
套件會自動加載需要的 js，不用再額外載入ga後台提供的原始碼

// main.js
import Vue from 'vue'
import VueAnalytics from 'vue-analytics'
import router from './router'

Vue.use(VueAnalytics, {
  id: 'UA-XXX-X', // ga 的 id
  router // 記得加上router
})

ga 事件設定起來也很方便

this.$ga.event('category', 'action', 'label', value)

更多設定細節可以到 [**github page**](https://github.com/MatteoGabriele/vue-analytics) 去查閱

## something wrong...
設定完後測試，結果發現GA處於"半殘廢"狀態
- 後台接收到的資料只有document title + location，沒有頁面路徑
依照官方文件自訂資料回傳格式結果也是一樣
- ga 事件都沒有觸發

在設定過程中也有一些奇怪的地方
- 在設定追蹤碼ID的時候發現，大多文件都是寫著 **UA-XXX-X**
但是我新開設的GA資源，ID卻是 **G-XXXXXX** 的格式
- 套件自動載入 js 是無效的，我必須關掉自動載入再把後台提供的 js 引入到網頁
GA 才收得到資料

對比**實際後台介面**與**教學/官方文件**之後認為有可能是GA在2020年底有改版過

最後在 vue-analytics 的 issues 看到這則最近被關閉(已解決)的討論串
[Tracking each page using Google Analytics 4](https://github.com/MatteoGabriele/vue-analytics/issues/290)

這篇貼文的情況跟我如出一轍，原來真的是GA改版導致套件運行出問題
套件開發者回應說 vue-analytics 是基於 analytics.js 實作
而新版 GA4 則是使用 gtag.js 的作法，詳細可以參考這篇 [gtag.js 還是 analytics.js ?](https://medium.com/@ennovysun0629/gtag-js-%E9%82%84%E6%98%AF-analytics-js-de39f799fe7c)

## how to fix?
作者在討論串說可以改用基於 gtag.js 實作的套件，比如 [vue-gtag](https://matteo-gabriele.gitbook.io/vue-gtag/)
vue-gtag 有支援 Vue2 和 Vue3 兩種版本，設定方式也很容易
以下為 Vue2 版本的使用方式

npm install vue-gtag

一樣在 main.js 設定好路由就有基本的頁面追蹤功能

// main.js
import Vue from "vue";
import router from './router'
import VueGtag from "vue-gtag";

Vue.use(VueGtag, {
  config: { id: 'G-XXXXXXX' },
}, router);

設置 ga 事件如下

this.$gtag.event('action', {
  event_category: 'category',
  event_label: 'label',
  value: value,
});

## 結論
- **舊版 GA 請用 [vue-analytics](https://github.com/MatteoGabriele/vue-analytics)，新版 GA4 改用 [vue-gtag](https://matteo-gabriele.gitbook.io/vue-gtag/)**
- 被關閉的 issue 也要翻出來看清楚
- 技術迭代很快，別以為不會剛好遇到版本更替的蠻荒時代

## reference
- [Google Analytics 4 代出來了？告訴你15個舊版與 新版 GA 的差別](https://datasupplied.com/google-analytics-4/meet-ga4/)