Vue-Analytics 埋 GA：v-ga directive 使用

文 / 西打藍 Siddharam

前言

如果只是單純埋 GA 的話，可以在 index.html 中處理就好。但如果有 router 切換的話，可能會追蹤不到。

因此我選了 vue-analytics 這個套件來處理 Vue 埋 GA 的問題，也因行銷那邊需要埋 gtag，這裡也會一併說明。此篇目錄：

1. vue-analytics

2. directive：v-ga

vue-analytics

先安裝套件：

npm install vue-analytics

官方文檔的 router 切換設定是放在 router/index.js 底下，但因為我有額外做設定，所以是寫在 main.js：



// main.js

import VueAnalytics from 'vue-analytics'

// GA初始化

Vue.use(VueAnalytics, {
  id: 'UA-12345678-6', // 讀取 GA id
  disableScriptLoader: true, // 在 html 中初始化
  router, // 路由切換統計
  autoTracking: {
    pageviewOnLoad: false // 避免 GA onLoad 時重複統計
  },
  // 這是我自定義的 gtag 追蹤事件，下方會教大家怎麼用
  commands: {
    trackEvent (category = 'unknown', label = 'unknown') {
      this.$ga.event(category, 'Click', label)
    }
  }
})

directive：v-ga

以 header 的 logo 點擊追蹤為例：



// 使用 v-ga 就能追蹤到自定義的事件，非常方便的 directive
<img v-ga="$ga.commands.trackEvent.bind(this, '/indexsch', 'S-sis_click')" class="header-logo" src="@/assets/synergies-logo.png" alt="logo">

你也可以手動一個個綁定事件追蹤：



onSwipe () {
    this.$ga.event({
    eventCategory: '/reportsch',
    eventAction: 'Click',
    eventLabel: 'S-sis_click'
    })
}

教學到此告一段落，這個套件沒什麼坑，就是 v-ga 研究了一下而已。然而 GA 的問題之一，就是中國那邊有部分地區跑很慢，追蹤不到，所以接下來會研究當地的追蹤方式。

閱讀量次

聯絡與合作

訂閱電子報，領「我當前 10+ 以上收入源有哪些」一文。

有文字採訪、網站開發，或是諮詢需求，皆可至個人網站參考作品，並聯繫 IG。

或是想分享心情、聊聊天、交朋友，可以來秘密通道找我唷。

Email: frank@siddharam.com

前言

1. vue-analytics 2. directive：v-ga

vue-analytics

directive：v-ga

聯絡與合作

1. vue-analytics

2. directive：v-ga