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 的問題之一,就是中國那邊有部分地區跑很慢,追蹤不到,所以接下來會研究當地的追蹤方式。



技術文章與合作


有網站設計(UI/UX)、平面設計、網站工程外包需求,皆可以來信詢問,在 關於下方 有參考作品。

想定期收到技術文章,或想一起探討前後端程式的朋友,建議加入 line 群組,或是官方帳號,大家可以互相交流,一起學程式,歡迎加入:

Email: aaa24295234@gmail.com

Line 群組:群組

Line 群組 QR Code:

Line 官方帳號:@184railx

Line 官方帳號 QR Code:



閱讀量