← → 翻页 · ESC 索引
Digital Marketing 70hrModule Seven
5 hours4 units
Module Seven · 5 hours · 4 units

數據追蹤
工程

Google Tag Manager × GA4 × 事件設計

GA4 看的是結果,GTM 決定什麼會被看到
這 5 小時,把行銷人從「貼一段碼」升級到「設計一套追蹤」。

Tag Manager·Data Layer·Event Schema
Duration · 5 小時授課 · 4 單元
M7 · GTM 數據追蹤工程 01 / 26
The Premise
The Premise · 課程主張

沒被追蹤的事件, 就等於沒發生

行銷的循環是:投放 → 觀察 → 修正。中間斷一節,整個飛輪就停。

Tracking ≠ Reporting·Design Before Implement
M7 · GTM 數據追蹤工程 02 / 26
Outcomes
OUTCOMES · 學完之後,你能做到

四件事

不是「裝過 GTM」,而是「為任何網站設計一套追蹤」。

01 · Concept 用容器 / 代碼 / 觸發 / 變數,講清任何追蹤需求。
02 · Setup 7 把 GA4 透過 GTM 正確安裝並驗證上線。
03 · Events N 為按鈕 / 表單 / 捲動 / 外連設計命名一致的事件。
04 · Advanced +1 再裝 Meta Pixel 與 ecommerce Data Layer 不慌。
M7 · GTM 數據追蹤工程 03 / 26
Act I · Unit 7-1 · 1 hr
04 / 26
Act I · Unit 7-1 · 1 hour

四元素

容器 · 代碼 · 觸發 · 變數

理解這四個字,就理解了整個 GTM。
之後所有畫面操作,都是把這四件東西排列組合

M7 · Act I · GTM 概念 04 / 26
Why a middle layer?
Compare · 為什麼要多一個中間層

把追蹤碼從網站剝離出來

過去 · Without GTM
每加一個追蹤
就改一次程式

GA、Meta Pixel、LINE、TikTok 各塞一段 script,改文案要動工程師、上線要排版本。

現在 · With GTM
網站只裝一段 GTM
之後全在 GTM 改

行銷自己改、自己測、自己發布,工程師只需要在 Data Layer 預留欄位。

Decoupling·行銷自治·版本可回滾
M7 · 7-1 · 為何要 GTM 05 / 26
The Four Primitives
Concept · GTM 四元素心智模型

容器 · 代碼 · 觸發 · 變數

容器是工地,代碼是工人,觸發是叫工人上工的鈴,變數是工人帶著的工具袋。

01 容器 Container 一段 GTM-XXXX 的 script,網站全站只裝一次。所有 tag 都活在這個容器裡。
02 代碼 Tag 真正要送出去的東西:GA4 事件、Meta Pixel、自訂 HTML。一個 tag = 一個任務。
03 觸發 Trigger 什麼時候要送?頁面載入、點擊、表單送出、捲動到 50%。觸發 = if 條件。
04 變數 Variable 送什麼內容?按鈕文字、頁面 URL、商品價格。變數 = 動態值的容器。
M7 · 7-1 · 四元素 06 / 26
Trigger Pipeline
07 / 26 · Space / → 推進 講義 · M7-1
Pipeline · 一次點擊在 GTM 裡走的路

使用者動作GA4 報表

FROM CLICK TO REPORT · 五步
01
使用者點擊

瀏覽器發出 click 事件。

02
GTM 監聽

內建 Click Listener 抓到並推進 dataLayer。

03
觸發比對

逐一檢查每個 Trigger 的條件是否成立。

04
代碼執行

符合條件的 Tag 帶著變數值送出。

05
GA4 收件

事件落入 GA4,3-5 秒後在即時報告可見。

Listener·dataLayer.push·條件比對·Tag fire
M7 · 7-1 · 觸發流程 07 / 26
Naming Convention
Naming · 一個容器活三年的關鍵

好的命名
三個月後還看得懂

GTM 容器養兩年會堆到 80+ 個 tag。沒命名規則,第三個月就找不到自己上週做了什麼。

建議把 類型 - 平台 - 動作 - 對象 寫進每個 Tag / Trigger / Variable 名字。

Tag GA4 - Event - Form Submit - Contact 類型 / 平台 / 事件 / 對象
Trigger CE - Form Submit - Contact Page CE = Custom Event
Variable DLV - product_id DLV = Data Layer Variable
Folder M7-Events / Pixel-Meta / Debug 用資料夾分群
M7 · 7-1 · 命名 08 / 26
Act I · Wrap
09 / 26
Recap · Act I 結語

會說「裝一個 Tag、加一個 Trigger、抓一個 Variable」,
就上手了 GTM。

接下來把這四個字落成第一個真實任務:把 GA4 裝上去。

M7 · Act I 收 09 / 26
Act II · Unit 7-2 · 1 hr
10 / 26
Act II · Unit 7-2 · 1 hour

GA4 ×
GTM

七步驟把 GA4 透過 GTM 裝起來

不是裝完就算了。要在三處看到綠燈,這一節才算結束。

M7 · Act II · GA4 整合 10 / 26
Why GA4 via GTM
The Choice · 兩條路

不要直接
把 GA4 寫進網站

GA4 官方提供兩種安裝路徑:直接 gtag.js、或是透過 GTM。 前者快,後者貴一個學習曲線,但救你下半年的工作量。

理由很簡單:之後一定還會加東西

直接 gtag 改一次追蹤碼 = 改一次網站 需動工程
透過 GTM 網站只裝一次 GTM 容器,之後全在 GTM 改 行銷可改
事件擴充 直接 gtag 必須改 HTML / GTM 介面新增即可 維護差距大
版本控管 GTM 內建版本紀錄、可一鍵 rollback 救命設計
M7 · 7-2 · 為何透過 GTM 11 / 26
Setup · 7 Steps
12 / 26 · Space / → 推進 講義 · M7-2
Setup · GA4 × GTM 七步驟

申請看到綠燈

SEVEN STEPS · 一條龍上線
01
取得 GA4 測量 ID

建立資源 → 資料串流 → 抄下 G-XXXXXXXX。

02
GTM 新增 Tag

代碼類型選「Google 代碼 / GA4 Configuration」。

03
填入測量 ID

把 G- 開頭那串貼進設定欄位。

04
設觸發條件

選 All Pages,所有頁面都載入這個 Tag。

05
開啟增強型評估

GA4 後台勾選,自動拿到捲動 / 外連 / 站內搜尋。

06
GTM 預覽模式

點 Preview,連到網站確認 Tag 有 fired。

07
GA4 即時報告

3-5 秒後看到自己這個訪客 → 發布。

FIN
提交版本

寫一句 changelog,按 Submit 上線。

M7 · 7-2 · 七步驟 12 / 26
Debugging Trio
Debug · 一定要養成的三個習慣

三處看到綠燈,才算上線

只在 GTM Preview 看到 fired 不算。這三個地方都對得上,才是真的有資料。

Tool 01 GTMPreview 看 Tag 有沒有 fired、Trigger 條件有沒有命中、變數值對不對。
Tool 02 GA4即時 DebugView + 即時報告,看資料有沒有實際進到 GA4。
Tool 03 TagAssistant Chrome 擴充:在使用者實際路徑上重播一遍,抓 race condition。
Three-Light Rule·沒看到就是沒裝好·別省這 3 分鐘
M7 · 7-2 · 除錯三件器 13 / 26
Act II · Wrap
14 / 26
Recap · Act II 結語

只有page_view 不夠用。

看得到「誰來」,但看不到「他做了什麼」。下一節,把每個關鍵動作都記下來。

M7 · Act II 收 14 / 26
Act III · Unit 7-3 · 1.5 hr
15 / 26
Act III · Unit 7-3 · 1.5 hours

事件
追蹤

按鈕 · 表單 · 捲動 · 外連

每一次轉換動作都翻成 GA4 看得懂的事件。 命名規範一旦定錯,三個月後沒人敢動報表。

M7 · Act III · 事件追蹤 15 / 26
Event Naming · GA4 Spec
Event Naming · GA4 規範

小寫
底線不空格

GA4 的事件名是欄位主鍵,一旦傳上去就改不掉、會永久卡在報表選單。

命名上線前,先在文件裡列一張 Event Schema 表給團隊對齊,比事後刪資料便宜。

事件名 小寫 + 底線:button_click、form_submit 不要 CamelCase
參數 傳 button_text、form_id、scroll_depth 值放參數、不放事件名
推薦事件 優先用 GA4 推薦清單:sign_up / login / purchase 內建匯整
關鍵事件 在 GA4 後台勾選為 Key Event,才會進報表轉換 勾完才算數
M7 · 7-3 · 命名 16 / 26
Automatic vs Custom
Auto vs Custom · 兩條路徑

自動抓到的,先別自訂

Path A · 增強型評估
GA4 自動免費送的

page_view、scroll(90%)、click(外連)、site_search、video_engagement、file_download。在 GA4 一個勾選就有。

Path B · GTM 自訂事件
商業關鍵動作自己埋

特定 CTA 按鈕、客製表單、加入購物車、Step-by-step 完成度、客服按鈕點擊。所有「自動評估抓不到的」走這條。

規則·先開自動 → 補自訂·避免重複計次
M7 · 7-3 · 自動 vs 自訂 17 / 26
Four Event Patterns
Patterns · 90% 行銷網站只用這四種

四種事件骨架

A 按鈕點擊
button_click
Trigger:Click - All Elements + Click Classes 含 cta-primary。Variable:抓 Click Text、Click URL。
B 表單送出
form_submit
Trigger:Form Submission(內建)+ Form ID。常見坑:SPA 表單抓不到,改用 dataLayer.push。
C 捲動深度
scroll_depth
Trigger:Scroll Depth + 25/50/75/100%。長文章與 landing page 必裝,量內容是否真被讀完。
D 外連點擊
outbound_click
Trigger:Just Links + Click URL 不含本站 hostname。聯盟、社群轉導、合作夥伴必量。
M7 · 7-3 · 四種事件 18 / 26
Data Layer
Data Layer · 行銷與工程的合約

把資料
網站遞給 GTM

Data Layer 是一個 JavaScript 陣列:window.dataLayer = []。 網站把資料 push 進去,GTM 從裡面抓,誰也不用碰誰的程式

這層解耦讓行銷可以說:「我要抓商品價格」,工程說:「OK,我把 price 推進 dataLayer」。雙方各自演進。

範例 · 加入購物車
window.dataLayer.push({
  event: 'add_to_cart',
  ecommerce: {
    currency: 'TWD',
    value: 1280,
    items: [{
      item_id: 'SKU-042',
      item_name: '經典背心',
      quantity: 1
    }]
  }
});
GA4 推薦事件 · ecommerce 標準格式
M7 · 7-3 · Data Layer 19 / 26
In-class Drill
Drill · 30 分鐘實作

動手
埋一顆真實事件

用講師提供的測試網站,把「聯絡我按鈕點擊」變成 GA4 看得到的事件。

要在三件器都看到綠燈,才算完成。

Step 1 在 GTM 新增 Variable:抓按鈕的 Click Text 5 min
Step 2 新增 Trigger:Click - All Elements,Click Classes 含 contact 5 min
Step 3 新增 GA4 Event Tag:event_name = contact_click 5 min
Step 4 Preview 點看看,確認 Tag fired + 變數值對 5 min
Step 5 GA4 DebugView 看到事件,截圖回傳 10 min
M7 · 7-3 · PRAC 20 / 26
Act IV · Unit 7-4 · 1.5 hr
21 / 26
Act IV · Unit 7-4 · 1.5 hours

進階
追蹤

Meta Pixel · 電商 Data Layer · Consent

行銷不只裝 GA4。同一套 GTM,要養得起 Meta、TikTok、LINE、第一方再行銷。

M7 · Act IV · 進階 21 / 26
Meta Pixel via GTM
Meta Pixel · 同一套 GTM 多平台共用

一個事件
多個平台同步收

同一個 add_to_cart 動作,可以同時送 GA4、Meta Pixel、TikTok Pixel。 在 GTM 用一個 Trigger多個 Tag,就完成跨平台對齊。

Meta 沒有官方 GTM Tag template,要用「自訂 HTML」貼 fbq init,再用 dataLayer 變數帶事件名。

Tag A Custom HTML:fbq('init', PIXEL_ID) All Pages
Tag B Custom HTML:fbq('track', 'AddToCart', {...}) CE - add_to_cart
標準事件 PageView / ViewContent / AddToCart / Purchase / Lead Meta 規定字串
驗證 Meta Pixel Helper(Chrome 擴充)抓事件實時 第三隻綠燈
M7 · 7-4 · Meta Pixel 22 / 26
Ecommerce Object
Ecommerce · 電商 Data Layer 標準七事件

整段購物旅程都要標

GA4 的電商報表要看到漏斗,前端就得在七個關鍵時點 push 對應事件。少一個,漏斗就斷。

SEVEN ECOMMERCE EVENTS
01
view_item_list

類別頁 / 搜尋結果頁。

02
view_item

商品詳情頁瀏覽。

03
add_to_cart

加入購物車按鈕點擊。

04
begin_checkout

結帳流程開始。

05
add_payment_info

填完付款資訊。

06
purchase

成交頁載入即送出。

07
refund

退款發生時補送,把 ROAS 算對。

+
remove_from_cart

選用,做棄購分析時加。

M7 · 7-4 · ecommerce 23 / 26
Consent Mode v2
Consent · 不能再忽略的合規層

使用者沒同意
就不能追蹤

GDPR、台灣個資法、iOS ATT 三股力量會合,同意管理已經不是選項。 GTM 的 Consent Mode v2 把「使用者選了什麼」做成全域信號,所有 Tag 自動讀。

沒同意的訪客也不會白丟資料:建模轉換會用機器學習補回統計值。

analytics_storage 控制 GA4 / 分析類 Tag 是否讀寫 cookie granted / denied
ad_storage 控制 Meta、Google Ads 等廣告類 Tag granted / denied
ad_user_data 是否傳送可識別使用者資料給廣告平台 v2 新增
ad_personalization 是否允許再行銷個人化 v2 新增
M7 · 7-4 · Consent 24 / 26
The Closing
The Closing · 行銷數據的真相

資料不會自己出現。 決定要讓它出現。

GTM 是行銷人手上唯一不需要工程就能改線的工具。
會用它,就比 80% 的同行多了一條飛輪。

Module 7 · Wrap·5 hours·4 units · done
M7 · 收束 25 / 26
Next · Module Eight
26 / 26
NEXT · M8 預告

數位廣告與
流量心理學

Module Eight · 5 hours · 4 units

有了追蹤當基礎,下一步把錢花得知道為什麼
Google Ads / Meta Ads / 文案心理學 / A/B 測試。

To Be Continued·M8 · Paid Traffic Psychology