issue #124 可於 Google 分析設定 Auto‐tracking - 3dw/auto20-next GitHub Wiki

bestian commented(https://github.com/3dw/auto20-next/issues/124#issue-2355288424)

優點: 可以追查用戶進到每一個route的情況
技術文檔

https://matteo-gabriele.gitbook.io/vue-gtag/auto-tracking

這個頁面是介紹如何在 Vue 應用程式中使用 vue-gtag 套件來實現 Google Analytics 的自動追蹤功能。

主要內容包括：

安裝 vue-gtag：
- 通過 npm 或 yarn 安裝 vue-gtag 套件。
基本設定：
- 在 Vue 應用程式中設定 vue-gtag，比如設定 Google Analytics 的追蹤 ID。
自動追蹤功能：
- 說明如何啟用自動追蹤功能，這樣就可以自動追蹤路由變更，並記錄到 Google Analytics 中。
- 提供一些範例代碼，展示如何進行這些設定。
客製化事件追蹤：
- 除了自動追蹤路由變更外，還可以設定一些自定義事件，這些事件可以是你在應用程式中特定操作時需要追蹤的。

具體步驟：

安裝 vue-gtag 套件：
```
npm install vue-gtag
```
或者
```
yarn add vue-gtag
```

在 main.js 中設定 vue-gtag：

import Vue from 'vue';
import App from './App.vue';
import VueGtag from 'vue-gtag';

Vue.use(VueGtag, {
  config: { id: 'GA_TRACKING_ID' }
});

new Vue({
  render: h => h(App),
}).$mount('#app');

啟用自動追蹤：
- 頁面會解釋如何在路由變更時自動發送頁面瀏覽事件到 Google Analytics。這可以通過設定 enabled 屬性來控制自動追蹤功能。
追蹤自訂事件：
- 可以使用 this.$gtag.event('event_name', { ...params }) 來手動追蹤事件。

總結：

這個頁面主要介紹如何使用 vue-gtag 來在 Vue 應用中集成 Google Analytics，並且自動追蹤使用者行為，包括頁面瀏覽和自定義事件。這樣可以幫助你更好地了解使用者如何與你的應用互動，從而進行更好的優化和改進。

在開始使用 vue-gtag 進行自動追蹤之前，首先需要在 Google Analytics 帳戶中進行一些設定。以下是詳細步驟：

步驟一：建立 Google Analytics 帳戶

登入 Google Analytics：
- 使用你的 Google 帳戶登入 Google Analytics。
建立屬性（Property）：
- 如果你還沒有任何屬性，點擊「建立屬性」。
- 輸入屬性的名稱、報告時區和貨幣等資訊。
取得追蹤 ID：
- 建立屬性後，你會看到一個追蹤 ID（格式類似於 UA-XXXXXXX-X）。這個追蹤 ID 是你需要在 vue-gtag 設定中使用的。

步驟二：設定資料流

新增資料流：
- 在 Google Analytics 屬性頁面，找到「資料流」。
- 點擊「新增資料流」，然後選擇「網站」。
輸入網站資訊：
- 輸入你網站的 URL 和資料流名稱。
- 確認資料流的追蹤 ID 與你在 vue-gtag 設定中使用的追蹤 ID 一致。

步驟三：設定自動收集事件

設定資料流：
- 在資料流設定頁面，可以啟用一些自動收集的事件，例如頁面瀏覽、滾動、點擊等。
啟用增強型測量（Enhanced Measurement）：
- 增強型測量可以自動收集更多的互動數據，如網站搜尋、影片觀看等。
- 在資料流設定中，啟用增強型測量，並根據需求選擇要追蹤的事件。

總結：

在 Google Analytics 帳戶中設定完成後，你就可以在你的 Vue 應用中使用 vue-gtag 來自動追蹤使用者行為。這樣，你可以獲得詳細的網站分析數據，幫助你更好地了解使用者互動情況。

在 `vue-gtag` 中，可以設定多個追蹤 ID。這對於需要同時追蹤多個 Google Analytics 屬性或使用多個 Google Analytics 服務的情況非常有用。

要設定多個追蹤 ID，可以使用以下方式：

設定多個追蹤 ID

你可以在 config 中定義多個 Google Analytics 屬性，方法如下：

import Vue from 'vue';
import App from './App.vue';
import VueGtag from 'vue-gtag';

Vue.use(VueGtag, {
  config: [
    { id: 'GA_TRACKING_ID_1' },
    { id: 'GA_TRACKING_ID_2' }
  ]
});

new Vue({
  render: h => h(App),
}).$mount('#app');

說明：

config 接受一個數組，每個數組項目是一個包含 id 屬性的物件。
每個物件中的 id 對應一個 Google Analytics 追蹤 ID。

進階設定：

如果你需要為不同的屬性設置不同的配置，可以在每個物件中增加更多屬性，例如 params：

Vue.use(VueGtag, {
  config: [
    { 
      id: 'GA_TRACKING_ID_1',
      params: {
        send_page_view: true
      }
    },
    { 
      id: 'GA_TRACKING_ID_2',
      params: {
        send_page_view: false
      }
    }
  ]
});

總結：

通過上述方式，你可以在 vue-gtag 中同時使用多個 Google Analytics 追蹤 ID，以便更靈活地管理和分析不同來源的數據。