Copyright © 2008 ~ 2024 MUKI space* / omegaBook theme All Rights Reserved.

一直以來,都覺得 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 的喔。
  • 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

關於不同的觸發條件

我在寫文章之前的所有事件實作,都是使用自訂事件。但在寫文時,發現有一個「點擊」的觸發條件類型,可能更適合用在這個情境上(點擊聯絡我們按鈕)。
也許以後有空,再來研究各種內建的觸發條件,有新的心得再跟大家分享 XXD。

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

最後你的代碼可能會長這樣:有一個正確的評估 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 了

Tags Fired

Tags Fired 表示我們有正常啟動該事件。
Tags Not Fired 表示我們有設定事件,但沒有被啟動,原因有可能是它不符合我們的觸發條件,或是沒有觸發條件。

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

提交你的 GTM 代碼

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

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

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

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

後記

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

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

歡迎給我點鼓勵,讓我知道你來過 :)

15
Subscribe
Notify of
guest

1 則留言
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
muka
muka
5 months ago

user id 寫一下吧