[筆記] Vue3 加入 Google Analytics 4 心得 @地瓜大的飛翔旅程

章節連結

內容

步驟
程式碼

參考資料

Google Analytics 通用版即將在 2023 年 7 月終止服務，於是便有了在現有的 Vue 專案導入 GA4 的需求。在 Vue 中已經有方便容易上手的 vue-gtag 套件已經封裝好不少服務，可以降低導入的門檻。

內容

[ 套件官網 ]：https://matteo-gabriele.gitbook.io/vue-gtag/

套件本身是支援 Vue2、Vue3 的。若你要在 Nuxt 中引入的話，那你可以自行撰寫 Plugin，僅在 Client 端運行即可。

步驟

1. 透過 npm, yarn … 等工具安裝 vue-gtag 套件。
2. 在根目錄的 main.js 或是 main.ts 導入。你可加上 vue-router，這樣一來可以監聽 SPA 的頁面切換。頁面的名稱會以 vue-router 設定中的 name 來呈現
3. 傳送自訂事件的話，可以引入 event 方法來進行。事件的名稱可以自行定義，傳送的值也可以。不過若你有要傳送「非 Google 預設的 key 」，那你需要在 GA4 的設定進行定義。

程式碼

import App from './App.vue'
import router from '@/router'

// 引入 gtag
const vueGTagSettings = {
  config: { id: `${import.meta.env.VITE_GA4_MEASUREMENT_ID}` }
}

const app = createApp(App)

app.use(VueGtag, vueGTagSettings, router)

import { event } from 'vue-gtag'
event('export_order_btn', {
    event_label: 'Export Data Xlsx',
    event_value: 1
})

import App from './App.vue'

import router from '@/router'

// 引入 gtag

const vueGTagSettings = {

config: { id: `${import.meta.env.VITE_GA4_MEASUREMENT_ID}` }

}

const app = createApp(App)

app.use(VueGtag, vueGTagSettings, router)

import { event } from 'vue-gtag'

event('export_order_btn', {

event_label: 'Export Data Xlsx',

event_value: 1

})

參考資料

1. vue-gtag documentation page
2. 詳解Google Analytics 4 事件追蹤——自訂事件
3. GA4 事件設定錯誤？教你在 GA4 介面直接修改事件

按讚加入粉絲團

內容

步驟

程式碼

參考資料

延伸閱讀