一直以來，都覺得 Google Analytics 的串接非常複雜，但這次認真研究了一下，雖然某些要轉換的條件還是似懂非懂，但至少能成功用 GTM 以及 GA4 串接事件，並且測試帶入了 User ID。

也許以後還會用到類似的需求，所以我就把自己的做法紀錄起來，有任何錯誤都歡迎指正與留言

安裝 GA 以及 GTM

什麼是 Google Tag Manager (GTM)？

GTM 是 Google 的一個代碼工具，我們可以利用 GTM 來管理代碼，讓行銷人員可以操作設定。

他跟 Google Analytics 一樣都是免費的工具，在網站安裝追蹤碼後就能直接使用：https://tagmanager.google.com

用 Vue3 開發：安裝 GA 以及 GTM

我使用的是 Vue3，所以這邊跟大家分享怎麼用 Vue3 安裝與定義事件。

如果你使用的是原生的 JavaScript，可以直接到 Google Analytics 以及 Google Tag Manager 的網站，安裝他們提供的追蹤碼即可。

▼ GA 安裝代碼示意圖，GTM 同樣也有代碼需安裝

我們也可以安裝套件來嵌入代碼：

• Google Analytics：vue-gtag-next
  他的 production 版本是 vue-gtag，但我當時因為某個設定只有在 vue-gtag-next 有，所以我就改用了 vue-gtag-next，但很抱歉寫文章的時候熊熊忘了是什麼設定導致我轉用 vue-gtag-next QAQ。未來如果有想起來再補充，但部落格的語法都是用 vue-gtag-next 的喔。
  • vue-gtag-next 官方文件：https://matteo-gabriele.gitbook.io/vue-gtag/v/next/
• Google Tag Manager：@gtm-support/vue-gtm
  我用的是 vue-gtm，但寫文後發現 vue-gtm 已經沒有再維護，作者建議轉使用 @gtm-support/vue-gtm，因此 demo code 可能會有些許出入

▼ 我只用了基本的設定含 key，更詳細的說明可以參考他們的 NPM 網站

import VueGtag from 'vue-gtag-next'
import { createGtm } from 'vue-gtm'

app.use(VueGtag, {
  property: {
    id: 'G-xxxxxxx'
  },
  useDebugger: true
})

app.use(createGtm({
  id: 'GTM-xxxxx',
  debug: true,
  defer: true,
  vueRouter: router,
  trackOnNextTick: false
}))

要追蹤的事件與情境

以一個後台網站為例子，我希望可以記錄使用者點擊「聯絡我們」按鈕的次數。

因此我要追蹤點擊該按鈕幾次。

使用 GTM 串接事件

建立 GA4 基本追蹤碼

我們可以在 GTM 建立一個 GA4 的追蹤碼，未來建立新事件時，就能直接套用評估 ID，不需要先設定變數。

▼ 建立代碼的步驟：「工作區」→ 「總覽」→「新增代碼」

▼ 點擊「代碼設定」的框，會跳出所有的代碼類型，我們第一次先選擇「Google 代碼 (原名：Google Analytics (分析)：GA4 設定)」

▼ 代碼 ID 要跟 GA4 整合，所以請填寫 GA4 的評估碼 ID：G-xxxxxxx

配置設定欄位的配置參數，填寫 debug_mode，值為 true，可以使用 GA4 報表中的 DebugView。

▼ 再往下拉，有一個觸發條件的框，點開後選擇 Initializatioin - All Pages，表示我們會在頁面渲染後，載入這個 Google 代碼。

設定好後，記得取一個容易識別的名稱，再選擇右上角的「儲存」，如此就完成基本的串接。

也可以在首頁的「工作區」→ 「代碼」看到你建立的事件

建立自訂事件

如前述，我們要追蹤的事件為點擊「聯絡我們」按鈕的次數

▼ 一樣從新增代碼開始，但這次在代碼設定的選單中，我們要選「Google Analytics (分析)」→「Google Analytics (分析)： GA4 事件」

▼ 記得先幫你的事件取個名字，然後依序輸入評估 ID 與事件名稱。

▼ 你在這裡輸入的「事件名稱」，會顯示在 GA4 的事件中，所以我都寫中文，這樣給行銷跟老闆看的時候，會比較清楚

回到事件，我們還有最後一個步驟要設定唷！就是最下面的「觸發條件」

▼ 列表是所有的觸發條件，也可以點右上角的「+」新增一個觸發條件

▼ GTM 有非常多的觸發條件可使用，我自己也還沒摸全，所以我們先拉到最下面選擇自訂事件 😂，這個是我目前用最多的，設定也相對簡單的 QQ

▼ 這邊的事件名稱請填英文，因為我們之後要在網頁埋自訂事件，就是要用這邊的事件名稱當作參數，所以用英文比較適合，我這邊設定的事件名稱為 click__ContactUs

新增好觸發條件後，記得回到你的代碼，選擇剛剛建立的觸發條件。

▼ 最後你的代碼可能會長這樣：有一個正確的評估 ID，有一個自訂的事件名稱，以及選擇好的觸發條件

在網頁埋入自訂事件

在 GTM 設定好代碼後，要怎麼跟我們的網頁連接呢？我們需要在網頁埋入剛剛設定好的事件，也就是觸發條件的事件名稱 click__ContactUs

在網頁埋事件有兩種方法，一個是使用原生的 JavaScript，另一種就是用套件，我把兩種方法寫在下面，選一種使用即可。

▼ 如果你使用原生 JavaScript，可以直接用 window.dataLayer 定義事件。

// 點擊聯絡我們按鈕時，執行的 function
const onClickContactUs = () => {
  console.log('Clicked!')
  // 在這裡埋入事件 code
  window.dataLayer = window.dataLayer || []
  // click__ContactUs 為自己定義的事件
  window.dataLayer.push({ event: 'click__ContactUs' })
}

▼ 如果你使用套件 vue-gtag-next，可以使用以下語法

<script setup lang="ts">
import { useGtag } from 'vue-gtag-next'

// 點擊聯絡我們按鈕時，執行的 function
const onClickContactUs = () => {
  const { event } = useGtag()
  event('click__ContactUs')
}
</script>

因為我有安裝套件，所以我使用的是套件的語法，而且他有支援非常多的 methods，更多內容歡迎參考官方文件。

覆盤串接事件的流程

至此，先讓我們休息一下，確定所有的流程跟達成條件。

我覺得串接 GTM 事件真的有點複雜，但弄懂流程後，就能發現他是一個流水線。不過在熟練之前，我們還是要先弄懂流程，對吧！

因此，我們來復盤整個串接事件的流程，讓大家可以更加熟悉整個運作

1. 安裝 GA4 以及 GTM 代碼
2. 新增 GTM 的 Google 代碼
   • 設定觸發條件
3. 新增 GTM 的 GA4 自訂事件
   • 設定觸發條件
4. 在網頁埋入第三步驟的 GA4 自訂事件

從以上步驟可以發現兩件事情

• 只要在 GTM 新增代碼，都必須要設定觸發條件
• 往後新增自訂事件，就是第 3 跟第 4 步的循環

以上流程確定沒問題的話，我們可以先將網頁更新至伺服器，然後測試代碼正常與否

發布前，使用 Tag Assistant 測試代碼是否運作正常

我們在 GTM 做的所有更動，並非立刻會更新，他也有一個 commit 跟 push 的過程 XXD。但我們可以先用 Tag Assistant 來測試代碼有沒有正常。

建議每次提交前都先預覽測試過，等確定沒問題再發布，不然會有太多無用的版本

▼ 在 GTM 網站的右上方，有一個「預覽」按鈕，點下去會連到 Tag Assistant 頁面

▼ 我們需要填上自己的測試網址，像我們公司會先發布到 staging，因此我們就填寫 https://staging.muki.tw 這樣的網址，他會根據你在 GTM 註冊的容器與埋入的程式碼，來判斷網域是否被認證

▼ 連線正常後，會跳出你的網站，右下角會顯示 Tag Assistant Connected

接下來，我們在這個網站做的所有動作，都會被記錄在 Tag Assistant 網站上，動作包含但不限於 DOM / Windows 事件的變動

還記得我們一開始有設定觸發條件為「Initializatioin - All Pages」，並且埋入了 GA4 設定的事件。

▼ 可以在 2. Initializaion 看到這個條件被觸發，然後我們設定的事件也 Fired 了

▼ 接下來，我回到自己的網站點擊「聯絡我們」按鈕，再回到 Tag Assistant 觀看結果，發現他立刻有抓到這個事件與對應的觸發條件。表示我們的設定都正常，就能準備提交了！

提交你的 GTM 代碼

最後回到 GTM 網站，選擇右上角的提交按鈕，再輸入 commit 內容就可以成功提交囉。

提交後大概要等一天的時間，才會整併至 GA4 的事件

▼ 可以登入 GA4，進入「管理」→「事件」看到你在 GTM 設定的所有事件

至此，就能正常閱覽這些事件的計數，以及做出更進階的分析囉。

後記

原本想要一次把追蹤 User ID 的方法也寫進來，但是篇幅拖得有點長，只好等下次有機會，再整理一篇分享給大家。

對上述內容有任何問題，都歡迎留言告訴我，謝謝。

16

發生錯誤。