July 3, 2019

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

增加 gtag 點擊事件


文 / 西打藍 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