← → 翻页 · ESC 索引
Vol.03 · Module Three
01 / 20
NTUB · GTM × 廣告科技 · 資料交付

觸發器 · 變數 · Debug

三小時把 GTM 從「會建容器」推進到「能上正式站」——
八種觸發、三大變數、五層 Debug，遇到爛事件能講出哪裡卡住。

Keyword·Triggers ·Variables ·Debug Layers
Duration·3 小時授課 ·3 單元
Contact·sky8697@gmail.com
National Taipei University of Business 數位行銷實務 II｜GTM × 廣告科技 · 30hr 2026 Autumn
Opening · Manifesto
02 / 20 講義 · M3
Why this module matters
會建 GTM 容器不算會 GTM。
能告訴客戶「事件斷在第幾層」，
才算能交差。
—— Module 3 · 從會操作到能交付

M1 教觸發概念、M2 把事件命名打好——
這節把選型 + 變數 + 排錯三塊，一次釘死。

Module 3 · Opening NTUB GTM × Adtech
This Module · Outcomes
03 / 20 講義 · M3
Learning Outcomes · 三件事做到

三小時，三個能講清楚

不求精通——求遇到新需求秒選型、卡關能定位、敢接案。

Outcome 01
01
看到追蹤需求，能3 秒選對八種觸發中的哪一種，並說出為什麼不是另外那種。
Outcome 02
02
在自己的容器建出 3 個 DLV + 1 個 Lookup + 1 個 RegEx Table，並命名整齊。
Outcome 03
03
遇到「事件沒進 GA4」，能依五層流程從上到下排查，產出可交付的 debug 報告。
NTUB · Week 3 3hr · 3 Units · Container that Ships
Act I · Unit 3-1
04 / 20
Section 3.1 · Eight Trigger Types

八種觸發，覆蓋 90%

GTM 觸發類型有 20+ 種，
但八種就吃掉日常 9 成的場景——背熟，秒選型。

5 Slides·Concept + Case ·~55 min
Act I · Triggers Unit 3-1
3-1 · The Eight
05 / 20 講義 · M3-1
Step 01 · 一張表認得八種

八種觸發，各自吃哪一塊

分四群記：頁面載入 / 互動 / 自動 / 視覺——
選錯群常常是 debug 起點。

Group 01 · 頁面載入
Page View
系列 ×3
Page View / DOM Ready / Window Loaded——時間點由早到晚，要抓元素就用 DOM Ready。
Group 02 · 互動
Click + Form
Click（All / Just Links）+ Form Submission。Wait for Tags 跟 Check Validation 兩個都要勾。
Group 03 · 自動
History + Custom Event + Timer
SPA 假換頁靠 History；dataLayer 自訂事件靠 Custom Event；心跳停留靠 Timer。
Group 04 · 視覺
Element Visibility
元素進入視口才 Fire——影片自動播、Promo Banner 曝光的標準解。
Bonus
Scroll Depth
捲動百分比。GA4 加強型評估已內建，本課實務上少用。
Verdict
記順序
重要性：Custom Event > Element Visibility > Click > Form > History > 其他。
Unit 3-1 · The Eight 四群九成場景
3-1 · Timing
06 / 20 講義 · M3-1
Step 02 · 三個 Page View 的時間點

「Tag Fire 了，變數卻是 undefined」
多半是這裡選錯

Page View · 最早
DOM 還沒 ready
頁面剛開始解析就 Fire。抓不到元素，但跑得最快。GA4 Config Tag 預設綁這個——只送 page_view、不讀 DOM。
Use For·GA4 Config / Pixel Init
DOM Ready · 中段
可以抓元素了
DOM 解析完成、JS 還在跑。讀 DOM 的 Custom JS Variable 用這個最穩——既等到元素，又不被慢圖拖。
Use For·讀標題 / Meta / 資料區塊
Window Loaded：所有圖片 / iframe 都載完才 Fire——太晚，使用者已經滑走。除非真的要等慢資源（如第三方 widget），不然不要用。
Unit 3-1 · Timing 選錯時機 = 變數空
3-1 · Click & Custom Event
07 / 20 講義 · M3-1
Step 03 · 兩個最常被卡的觸發

Click 抓不到？
Custom Event 是最後贏家

內建 Click 變數沒勾
『變數』頁右上角勾「Configure」→ 開 Click Element / Classes / URL / Text。沒勾這四個，Click 條件根本選不到欄位。
First Step
All Elements vs Just Links
按鈕（button）用 All Elements；外連（a href）用 Just Links，附贈 Click URL 變數，不用自己抓。
Selector
iframe 內的元素
GTM 管不到 iframe。第三方嵌入（YouTube、Facebook 留言）要靠 postMessage 或該平台 API。
Limit
Custom Event = 王者
監聽 dataLayer.push({event:'xxx'})。前端開發團隊發出來的事件名，命名乾淨、語意清楚、最不會誤觸。Module 4 主場。
Best Practice
Unit 3-1 · Click & Custom Event 能用 dataLayer 就用 dataLayer
3-1 · Real Case
08 / 20 講義 · M3-1
War Story · 一個錯誤 trigger 燒掉 3 萬
某線上課程用 Click URL contains 'checkout' 當 Purchase trigger，
使用者點「回到結帳頁」也被算成 Purchase——
CPA 看似爆降到 $30，實際成交 CPA 仍是 $400。
—— 廣告機器學歪 3 天 · 燒掉 3 萬預算

URL-based trigger 最脆弱——URL 會因 UTM、錨點、query 變形。
Purchase 這種關鍵轉換，一律用 Custom Event = purchase 從 dataLayer 讀。

Unit 3-1 · War Story 關鍵轉換 → 不靠 URL
Act II · Unit 3-2
09 / 20
Section 3.2 · DLV / Lookup / RegEx

三把刀，包辦 80%

把髒資料變成乾淨欄位——
DLV 取值、Lookup 映射、RegEx 模糊匹配，這三種變數吃掉八成日常工。

5 Slides·Hands-on ·~70 min
Act II · Variables Unit 3-2
3-2 · Three Variables
10 / 20 講義 · M3-2
Step 01 · 三種變數，三件事

從 dataLayer 取值 → 映射 → 分類

按 → 逐步點亮。每一把刀的目的不一樣，混用會出事。

Pipeline · 三把刀的職責
01
DLV · 取值
從 window.dataLayer 取一個 key。點號路徑支援巢狀，例 items.0.item_name。
02
Lookup Table · 映射
把一個值對到另一個值。例：hostname → GA4 Measurement ID。Default 必填。
03
RegEx Table · 分類
同 Lookup 但 key 是正則。URL path ^/product/ → product_page，效率比逐條列高。
Custom JavaScript 是萬能後備——但難 debug、難維護。能用上面三把就不要寫 JS。
Unit 3-2 · Three Variables 取值 · 映射 · 分類
3-2 · DLV In Depth
11 / 20 講義 · M3-2
Step 02 · 把 DLV 當「常用欄位字典」

DLV 一直 undefined？
三個檢查點走一遍

dataLayer 真的有 push 嗎
Preview Mode → Data Layer 分頁檢查那筆 push 有無對應 key。沒有 → 問題在前端，不在 GTM。
Check 1
路徑寫對了嗎
點號區分大小寫、陣列用數字（items.0.item_id）。多打一個空格、少寫一個 s 都會 undefined。
Check 2
Tag Fire 比 push 晚 嗎
Page View Trigger 太早→ 那個瞬間 dataLayer 還沒 push。改用 Custom Event 對應前端發的事件名才穩。
Check 3
Default Value 別空著
設成 有意義的值（unknown / 0 / (not set)），不要留空。GA4 報表才好查問題。
Hygiene
Unit 3-2 · DLV 三層檢查 · 比硬猜快 5 倍
3-2 · Lookup vs RegEx
12 / 20 講義 · M3-2
Step 03 · 何時用 Lookup、何時換 RegEx

規模一變大，Lookup 就轉 RegEx

Lookup Table · 精確
一對一清單
幾個固定值對固定值。例：3 個多語站 → 3 個 GA4 ID。寫起來一目了然，新人接手最容易讀懂。
Sweet Spot·≤ 20 條規則
RegEx Table · 模糊
一規則抓一群
一條 ^/product/ 抓所有商品頁。規則少、覆蓋廣，但寫錯一個字符整片漏。regex101.com 先驗證再貼。
Sweet Spot·路徑分類 · URL 分群
大小寫陷阱：RegEx 預設區分大小寫。要忽略加 (?i) 開頭——(?i)^/product/。這條沒記住，半夜被叫起來修 bug 兩次起跳。
Unit 3-2 · Lookup vs RegEx 精確 vs 模糊 · 知道何時換手
3-2 · Naming & Refactor
13 / 20 講義 · M3-2
Step 04–05 · 命名 + 把 10 個 tag 壓成 1 個

容器破 50 個變數時，
命名紀律就是生命線

DLV
命名 dlv - {欄位名}（例 dlv - value / dlv - currency）。找變數靠前綴篩，不是靠記憶。
Prefix
Lookup
命名 lookup - {用途}（例 lookup - ga4_measurement_id）。資料夾分層放，不要全擠在 root。
Prefix
RegEx
命名 re - {用途}。寫 description 註明「為什麼用 regex 不用 lookup」，下個接手的人會謝你。
Prefix
War Story · 10 → 1
5 產品 × 2 受眾 = 10 個 Remarketing tag → 一張 Lookup Table 把 page path 對到 conversion_label，剩 1 個 tag 動態帶入。容器 -60% / Preview 秒開。
Refactor
Unit 3-2 · Naming & Refactor 命名 = 規模化的前提
Act III · Unit 3-3
14 / 20
Section 3.3 · Five Layers of Debug

五層排查，從上往下

「客戶說 purchase 沒追到」——沒系統流程就是三天蒸發。
這節給你一張固定五層的查表，遇到事件丟掉照表跑。

5 Slides·Methodology ·~55 min
Act III · Debug Unit 3-3
3-3 · The Five Layers
15 / 20 講義 · M3-3
Step 01 · 從上而下 · 任一層斷 = 事件丟

五層排查，不要跳關

按 → 逐層點亮。每層各有對應工具，看到問題在哪一層才知道找誰修。

Pipeline · 上 → 下
01
dataLayer
push 了沒？沒 → 前端問題，不在 GTM。
02
GTM Tag
Fire 了沒？沒 → Trigger 條件 / Blocking Trigger / 工作區未存。
03
平台收
GA4 DebugView / Meta Test Events 看到沒？沒 → 平台拒收。
04
Network
DevTools 篩 collect / tr。沒請求 / 4xx / 5xx 看 Response。
05
Server-Side
CAPI / sGTM / Make.com 後端日誌。Browser 失敗 ≠ Server 失敗。
Unit 3-3 · The Five Layers 從上而下 · 每層工具不同
3-3 · Tools Per Layer
16 / 20 講義 · M3-3
Step 02 · 每層用哪個工具

會用 對的工具，
排查時間從一天縮成 20 分

L1 · dataLayer
Preview Mode Data Layer 分頁，或 DevTools Console 直接 dataLayer。
Preview / Console
L2 · GTM Tag
Preview Mode Tags 分頁。看 Fired / Not Fired，點進去看 Trigger 為何 false。
Preview Mode
L3 · 平台
GA4 DebugView（Admin → DebugView）/ Meta Test Events / LINE LAP / TikTok 各自的測試工具。
Platform Tool
L4 · Network
DevTools Network 篩 collect（GA4）/ tr（Meta）/ conversion（Ads）。看 Response 找 4xx/5xx 原因。
DevTools
L5 · Server
CAPI / sGTM / Make.com 後端 log。Module 6 專處理 event_id 去重失敗。
Server Log
Unit 3-3 · Tools Per Layer 不同層 · 不同工具
3-3 · The Consent Trap
17 / 20 講義 · M3-3
War Story · Preview 正常 · 生產站掛掉
「Preview Mode 完全正常，
生產站就是收不到 Purchase。」
折騰一天才發現——Consent Mode v2。
—— 2024 年後最常見的『看起來好了其實沒收到』陷阱

Preview Mode 會繞過 Consent Mode；生產站 analytics_storage 預設 denied——
使用者沒按同意，GA4 tag 根本沒 fire。Module 8 會深入治理。

Unit 3-3 · Consent Trap Preview ≠ 真實使用者
Closing · Deliverables
18 / 20
This Week · Submit by Friday

三件交付，
下週直接接 dataLayer

① 容器內四種觸發各 1 + Preview Fire 截圖
② 3 個 DLV + 1 個 Lookup + 1 個 RegEx，命名整齊
③ 任選一個現象跑完五層排查，產出 1 頁 debug 報告

三件都做完 = 容器能上正式站。
卡在第二件最常見——命名先想清楚再建變數。

Module 3 · Closing 容器能上線 · 才算交付
Next · Module 4 Preview
19 / 20 講義 · M3
Where we go next · 30 小時的下一站

下週 → dataLayer 進階 + SPA / AJAX

觸發、變數、Debug 三件齊全後——
進入主動發送事件的世界，前端開發同學最強的武器。

M4-1 · dataLayer 基礎
資料流原理、push 時機、與 GTM 的契約——把今天的 Custom Event 講透。
~50 min
M4-2 · dataLayer.push
自訂事件設計、欄位命名、與後端／前端的協作邊界——能跟工程師對話的 GTM 人。
~60 min
M4-3 · SPA / AJAX
virtual_page_view、History Change Trigger 實作、Vue/React 場景處理——這節課值回票價。
~70 min
Module 4 · dataLayer × SPA 主動發送的世界 · 3hr
End of Module 3
20 / 20
To Be Continued · Module 4 → 10

容器能上線了

八種觸發、三把刀、五層 Debug——
後七週每一節，都會回頭用這三件解決新場景。

NTUB·Digital Marketing Practice II ·GTM × Adtech · 30hr
Contact·sky8697@gmail.com