vue-gtag

產品部/上德/ 2023-04-21

前端讀書會

B L U E P L A N E T

Google代碼(gtag.js)

• 「Google代碼」不是我取的，這是官方名稱 XD
• vue-gtag是gtag.js封裝的套件，所以會需要和gtag.js API搭配著看，主要參考以下：
• Google代碼 (gtag.js) ：主要的開發文件
• Google Analytics ：這個當輔助參考就可以了

註：要留意不要看錯文件看到 舊版ga (Universal Anaytics)

2

2

B L U E P L A N E T

vue-gtag

• 相關連結：
• github
• document
• 截至今天（2023/4/18），vue-gtag最後更新日是 2021-05-21，不曉得是沒在維護還是因為也沒有更新的需要
• 可以找到兩個版本分別是 vue-gtag以及 vue-gtag-next，兩個是獨立的 repo很容易混餚，Nuxt上文件範例是使用 vue-gtag-next，但我查了一下目前 vue-gtag才是最新版本

3

3

B L U E P L A N E T

幾個要注意的事情

1. vue-tag官方文件提供關於 gtag.js的連結是 Universal Anaytics的，要自行開啟新版 GA4的連結小心不要被誤導了
2. vue-gtag-next已經不是最新版的，要注意版本號使用 v2.x的
3. Nuxt官網的範例使用 vue-gtag-next，小心不要跟著用到舊版的

4

4

B L U E P L A N E T

安裝vue-gtag

import { createApp } from "vue";

import App from "./App.vue";

import VueGtag from "vue-gtag";

�createApp(App).use(VueGtag, {

  config: { id: "GA_MEASUREMENT_ID" }

}).mount("#app");

5

npm add vue-gtag

5

B L U E P L A N E T

Options API & Composition API寫法差異

export default {

  name: 'MyComponent',

�  methods: {

    login () {

      this.$gtag.event('login', { method: 'Google' })

    }

  }

}

6

import { event } from 'vue-gtag'

�export default {

  name: 'MyComponent',

�  setup() {

    const login = () => {

      event('login', { method: 'Google' })

    }

    return {

      login

    }

  }

}

6

B L U E P L A N E T

Bootstrap options

GDPR保護的網頁需在使用者同意之下才能進行追蹤。設定 bootstrap為 true以控制執行的時間點

7

import { createApp } from "vue";

import VueGtag from "vue-gtag";

�createApp(App).use(VueGtag, {

  bootstrap: false,

  config: {

    id: "GA_MEASUREMENT_ID",

  },

}).mount("#app");

import { bootstrap } from 'vue-gtag'

�export default {

  name: 'MyComponent',

�  methods: {

    enablePlugin () {

      bootstrap().then((gtag) => {

        // all done!

      })

    }

  }

}

7

B L U E P L A N E T

Auto tracking

• 將 VueRouter的 Instance放到第三個參數就可以啟動 auto tracking功能。
• 我自己實測是如果沒加的話，切換分頁時仍有累加到造訪使用者的紀錄，但不會有各分頁的資訊。

8

app.use(VueGtag, {

  config: {

    id: "GA_MEASUREMENT_ID",

  },

}, router); // <----- add your router here

8

B L U E P L A N E T

Screenview

• 看文件說明看不懂什麼意思，但我自己實測之後發現設為 true之後，後台就不會有各分頁的數據，而是全部累加在一起。
• 感覺好像沒什麼意義，就不要使用就好了。

9

app.use(VueGtag, {

  appName: 'My application',

  pageTrackerScreenviewEnabled: true,

  config: {

    id: "GA_MEASUREMENT_ID",

  },

}, router);

9

B L U E P L A N E T

Page tracker template

• 自訂義頁面名稱，這個無論是使用 pageviews或 screenviews都有相同的作用

10

app.use(VueGtag, {

  pageTrackerTemplate(to) {

    return {

      page_title: 'amazing page',

      page_path: to.path

    }

  },

  config: {

    id: "GA_MEASUREMENT_ID",

  },

}, router);

10

B L U E P L A N E T

Multiple domain tracking

• 如果要指定事件要發送到哪個ga，可以加上sent_to參數，參考：gtag文件

11

import { createApp } from "vue";

import App from "./App.vue";

import VueGtag from "vue-gtag";

�createApp(App).use(VueGtag, {

  includes: [

    { id: 'GA_MEASUREMENT_ID_2' },

    {

      id: 'GA_MEASUREMENT_ID_3',

      params: {

        anonymize_ip: true

      }

    }

  ],

  config: { id: "GA_MEASUREMENT_ID_1" }

}).mount("#app");

export default {

  name: 'MyComponent',

�  methods: {

    login () {

      this.$gtag.event('login', { method: 'Google' })

    }

  }

}

11

B L U E P L A N E T

Plugin hooks

12

import { createApp } from "vue";

import App from "./App.vue";

import VueGtag from "vue-gtag";

�createApp(App).use(VueGtag, {

  config: { id: "GA_MEASUREMENT_ID" },

  onReady () {

    // ready

  },

  onBeforeTrack () {

    // before!

  },

  onAfterTrack () {

    // after!

  }

}).mount("#app");

12

B L U E P L A N E T

screenview

• gtag文件事件建議參數中沒有這個，但是 API範例卻有？

13

export default {

  name: 'MyComponent',

�  methods: {

    track () {

      this.$gtag.screenview({

        app_name: 'MyApp',

        screen_name: 'Home page',

      })

    }

  }

}

​

13

B L U E P L A N E T

pageview

• gtag文件的事件建議參數中有

14

export default {

  name: 'MyComponent',

�  methods: {

    track () {

      this.$gtag.pageview({ page_path: '/about' })

      this.$gtag.pageview('/about')

      this.$gtag.pageview(this.$route)

    }

  }

}

14

B L U E P L A N E T

pageView 和 screenView的測試結果

• 兩者的參數都會被紀錄到事件當中，事件名稱分別為 screen_view 及 page_view，點擊進去之後可以再進一步看傳遞出來的參數
• 原本頁面切換的時候就會有page_view 和screen_view 的事件紀錄，手動傳遞事件會造成重覆的事件被紀錄。所以我覺得適用的情境可能是：特定的事件下沒有沒變更網址，被希望被紀錄下來為 page_view或screen_view的時候

15

15

B L U E P L A N E T

Event

• 可使用gtag文件上建議的事件參數，也可以自訂事件名稱和參數

16

export default {

  name: 'MyComponent',

�  methods: {

    track () {

      this.$gtag.event(<action>, {

        'event_category': <category>,

        'event_label': <label>,

        'value': <value>

      })

    }

  }

}

​

16

B L U E P L A N E T

事件的測試結果

• 分別使用文件中的建議名稱和自訂的變數名稱，兩者的測試結果並沒有差異。不曉得文件當中列的變數名稱是否還有其它的功能這個就不曉得了（比如能產出其它報告之類的）

17

17

B L U E P L A N E T

exception

18

export default {

  name: 'MyComponent',

�  methods: {

    track () {

      this.$gtag.exception({

        'description': 'error_description',

        'fatal': false

      })

    }

  }

}

18

B L U E P L A N E T

query

• 如果要直接操作 gtag可以使用 query，可直接使用 gtag的API

19

export default {

  name: 'MyComponent',

�  methods: {

    track () {

      this.$gtag.query('event', 'screen_view', {

        app_name: 'MyApp',

        screen_name: 'Home page',

      })

    }

  }

}

19

B L U E P L A N E T

安裝在Nuxt上

• 不要使用Nuxt官網的範例，官網範例是使用舊版 vue-gtag-next

20

yarn add –dev vue-gtag

// plugins/vue-gtag.client.js

import VueGtag from 'vue-gtag'�export default defineNuxtPlugin((nuxtApp) => {

    nuxtApp.vueApp.use(VueGtag, {

        config: {

            id: 'GA_MEASUREMENT_ID',

        },

    }, nuxtApp.$router)

})

參考：https://stackoverflow.com/a/72702062/6252471

20

B L U E P L A N E T

Q&A