← → 翻页 · ESC 索引
Vol.03 · Part Three
01 / 22
GTM 實務演練 · Part 3 · 4 單元

進階互動×轉換追蹤

當網址不再變、按鈕不再跳,
元素可見度連結過濾捲動深度dataLayer 把看不見的事件抓回來。

Keyword·Element Visibility ·Just Links ·Scroll Depth ·dataLayer.push
Scope·4 Units ·表單 / 連結 / 電話 / 捲動 / SPA
弄一下工作室 GTM 實務演練 · Part 3 · 進階互動與轉換追蹤 Part 3 of 7
Opening · Manifesto
02 / 22
Why Part 3 starts here
抓不到的事件,
就是看不到的轉換。
看不到的轉換,無法被優化
—— Part 3 · 進階互動的核心命題

網頁早就不再「換頁 = 完成」,
不換頁的轉換才是現代網站常態。

Part 3 · Opening GTM 實務演練
This Part · Outcomes
03 / 22
Learning Outcomes · Part 3 帶走

四個技法,覆蓋 90% 的轉換場景

不再被「為什麼抓不到」卡住,每種互動都有對應觸發器

Outcome 01
01
元素可見度追蹤 AJAX 表單成功訊息,記成 GA4 generate_lead
Outcome 02
02
用「不包含自家網域」抓所有外部連結,用 tel: 抓撥打電話。
Outcome 03
03
捲動深度多檢查點 + 動態參數傳百分比,SPA 用 dataLayer.push 補位。
Part 3 · 4 Units CH3-1 / CH3-2 / CH3-3 / CH3-4
Act I · Unit 3-1
04 / 22
Chapter 3.1 · Element Visibility

獲取名單·表單可見度

表單送出不換頁、感謝訊息只是浮現一行字,
讓 GTM 監視畫面變化就能補位。

4 Slides·AJAX · Visibility · GA4 ·~25 min
Act I · Form Tracking Unit 3-1
3-1 · Why It Breaks
05 / 22 講義 · 3-1
Step 01 · 為什麼傳統追蹤失效

送出後,網址沒換 · 沒跳感謝頁

SureForms / WPForms / Contact Form 7 / Gravity Forms
都用 AJAX 送出,按鈕下方只浮現一行綠色文字。

沒跳轉 = 沒 page_view 變化 =
所有依賴網址改變的觸發器一律失效。
解法:別追網址,追畫面上是否出現了那段感謝訊息

這也是為什麼直接套網路上的「表單追蹤教學」九成失敗——
每家外掛的成功訊息 class 都不同,必須親自檢查。

Unit 3-1 · AJAX Reality No URL Change
3-1 · Element Visibility
06 / 22 講義 · 3-1
Step 02 · 元素可見度 三步驟

讓 GTM 監視那段感謝訊息

01
右鍵檢查
送出表單後對綠色訊息按右鍵 Inspect,找最靠近的 class。SureForms 是 .srfm-success-box
02
建可見度觸發器
類型選 Element Visibility,選取方法用 CSS 選擇器,貼上剛找到的 class。
03
勾「觀察 DOM 變更」
必勾。AJAX 訊息是事後 JS 注入,不勾 GTM 只在載入瞬間掃一次,永遠抓不到。

頻率設「每個網頁一次」即可,避免重複觸發。

Unit 3-1 · 3 Steps Inspect → Trigger → DOM Watch
3-1 · GA4 Tag + Class Map
07 / 22 講義 · 3-1
Step 03 · 接 GA4 · 各家外掛 class 速查

事件名一律 generate_lead

GA4 預設潛在客戶事件名,命名統一跨網站可比。

SureForms
.srfm-success-box · WordPress 新一代表單外掛
Contact Form 7
.wpcf7-response-output · 全球最廣泛使用
Gravity Forms
.gform_confirmation_message · 商業級表單
WPForms
.wpforms-confirmation-container-full · 拖拉式
提醒
每次實作都要親自 Inspect—— class 隨主題與外掛版本變動。
Unit 3-1 · Tag + Reference generate_lead
Act II · Unit 3-2
08 / 22
Chapter 3.2 · Outbound Click & Click-to-Call

流量去哪了?

FB / Line / 撥打電話 —— 點下去就離開你的網站
連結過濾把這些「導外點擊」一網打盡。

4 Slides·Just Links · Filter ·~25 min
Act II · Outbound Unit 3-2
3-2 · Outbound Filter
09 / 22 講義 · 3-2
Step 01 · 外部連結 = 「不是自家」的連結

反向思考,一條條件抓全部

笨方法
列舉所有外站

facebook.com / line.me / instagram.com / youtube.com…列不完,新外站永遠漏接。

聰明方法
排除自家網域

Click URL doesn't contain localwp.me —— 一條規則永久有效

類型選 點擊 - 僅限連結 (Just Links),過濾條件用「部分點擊」。

Unit 3-2 · Inverse Logic doesn't contain
3-2 · Operator Cheat Sheet
10 / 22 講義 · 3-2
Reference · 五大過濾條件

什麼時候用哪個

contains
片段存在即可 · Click URL contains facebook.com
doesn't contain
排除特定片段 · 外部連結的本命寫法
equals
完整字串一致 · Page Path equals /thank-you
starts with
值的開頭固定 · Click URL starts with tel:
matches CSS
比對 HTML class / id · Click Element matches .promo-btn a

外部連結 + 撥打電話 各建一個觸發器、各自對應一個 GA4 事件,不要合併,事件命名才能清楚分流。

Unit 3-2 · Operators 5 Conditions
3-2 · Click-to-Call + Custom Dim
11 / 22 講義 · 3-2
Step 02 · 撥打電話 · 自訂維度 · DebugView

tel: 抓電話 · 用自訂維度看號碼

觸發條件
Just Links + Click URL starts with tel:
事件名稱
click_phone_number · 帶參數 phone_number = {{Click URL}}
登錄自訂維度
GA4 → 管理 → 自訂定義 → 範圍事件,名稱與參數名一字不差
立即驗證
用 GA4 DebugView 即時看參數,不必等 24 小時
正常現象提醒:傳出的值會包含 tel: 前綴(如 tel:+886912345678)—— 不是 bug,是規格。
Unit 3-2 · Phone + Dim click_phone_number
Act III · Unit 3-3
12 / 22
Chapter 3.3 · Scroll Depth

評估閱讀品質

停留 3 分鐘 ≠ 讀完了。
25/50/75/90 四個檢查點,看內容在哪裡留住人、在哪裡掉人

3 Slides·Scroll Depth · Dynamic Param ·~20 min
Act III · Reading Quality Unit 3-3
3-3 · Three-Step Setup
13 / 22 講義 · 3-3
Step 01 · 捲動深度 三步搞定

一個觸發器,四個檢查點

01
開內建變數
變數分頁 → 內建變數 → 捲動 (Scrolling) → 勾選 Scroll Depth Threshold
02
多檢查點
類型 Scroll Depth,垂直、百分比,填 25, 50, 75, 90(半形逗號 + 空格)。
03
限定特定頁
啟用時機改「部分頁面」,Page Path equals /landing-page。短頁面別追,會吵

設定一個觸發器,同一個訪客同一頁會在 25%、50%、75%、90% 各觸發一次。

Unit 3-3 · Setup 25 / 50 / 75 / 90
3-3 · Dynamic Parameter
14 / 22 講義 · 3-3
Step 02 · 一個代碼,記四個百分比

變數讓 GA4 自己填入數字

不用寫四個代碼,靠 {{Scroll Depth Threshold}} 這個動態變數一勞永逸。

事件名 scroll_depth · 
參數 percent_scrolled = {{Scroll Depth Threshold}}
捲到 50% → 自動傳 percent_scrolled = 50;捲到 90% → 自動傳 90

這是 GTM 最優雅的設計之一:觸發器自帶資訊,代碼端只需引用變數。GA4 探索報表記得登錄 percent_scrolled 為自訂維度才能拉出來看。

Unit 3-3 · Dynamic Var {{Scroll Depth Threshold}}
Act IV · Unit 3-4
15 / 22
Chapter 3.4 · dataLayer.push

讓 GTM 接得住任何事件

SPA 路由切換、Shopify 結帳、AJAX 提交,
GTM 內建觸發器都抓不到 —— 解法是讓前端主動通知

5 Slides·SPA · Custom Event · DLV ·~30 min
Act IV · The Final Boss Unit 3-4
3-4 · When Built-in Fails
16 / 22 講義 · 3-4
Step 01 · 三種「內建觸發器一定失敗」場景

網頁沒重載,GTM 就沒開槍

SPA 路由
React / Vue 用 history.pushState 切頁,瀏覽器不重載,Page View 觸發只跑一次
AJAX 表單
送出後沒換頁、沒感謝頁,傳統「Form Submission 觸發器」抓不到
Shopify / 購物車
動態結帳流程的 add_to_cart / purchase 全在 JS 內跑邏輯,沒有對應的 DOM 點擊。

Part 3 前三節的「元素可見度」、「Just Links」是救火方案真正乾淨的解,是叫前端工程師主動 push 一筆事件給 GTM。

Unit 3-4 · Why Push SPA · AJAX · Shopify
3-4 · Standard Push Format
17 / 22 講義 · 3-4
Step 02 · GA4 推薦的 push 格式

三個要件,記一輩子

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
 event: 'generate_lead',
 form_id: 'contact_us',
 form_location: 'footer'
});
① event 鍵
必填 · GTM 用這個欄位辨識「這是哪個事件」
② 自訂參數
想送什麼就放什麼 · 最後會變成 GA4 的事件參數
③ 命名一致
遵守 1.4 命名字典 · snake_case,不要中英文混
Unit 3-4 · Schema event + payload + naming
3-4 · GTM Three-Catch
18 / 22 講義 · 3-4
Step 03 · 前端 push 完,GTM 三步接球

變數 → 觸發器 → 代碼

01
建 Data Layer Variable
變數類型「資料層變數」,名稱填 form_id。引用時寫 {{DLV - form_id}}
02
建 Custom Event 觸發器
觸發類型「自訂事件」,事件名稱填 generate_lead · 與 push 的 event 值一字不差
03
建 GA4 Event Tag
Event Name 填 generate_lead,Parameters 加 form_id = {{DLV - form_id}},觸發器掛上 02 那顆。

驗證:Preview 模式 → 操作前端 → 左側看到事件、右側 Data Layer 面板看到 push 的所有欄位。看不到?先去 Console 跑 dataLayer 檢查

Unit 3-4 · Catch DLV → CE → GA4 Tag
3-4 · SPA Page View Trap
19 / 22 講義 · 3-4
Bonus · 90% SPA 站都中過的 bug

page_view 只開一次的真兇

用戶從首頁點到商品頁,網址變了、內容變了 ——
但 GA4 報表只記到一次 page_view。

原因:GTM 的 Page View 綁在 DOMContentLoaded
SPA 整個生命週期只觸發一次
解法:攔截 history.pushState,每次切頁手動 push 一筆 virtual_page_view,再用 Custom Event 觸發 GA4 的 page_view。

這個坑大到很多公司直接整套 GA4 數字都失真。Part 3 結束前先警告,Part 4 進資料層深水區會再展開。

Unit 3-4 · The Trap history.pushState
Part 3 · Recap
20 / 22
Recap · 四個技法 · 一張地圖

Part 3 四劍合璧

3-1 · 表單
Element Visibility + DOM 觀察 → generate_lead
3-2 · 連結
Just Links + doesn't contain → 外部點擊 + click_phone_number
3-3 · 捲動
Scroll Depth 25/50/75/90 + 動態變數 → scroll_depth
3-4 · SPA / AJAX
dataLayer.push + Custom Event + DLV → 任何前端事件
下一步
Part 4 進入資料層深水區 · Lookup Table、預覽模式、發布黃金守則
Part 3 · Map Form / Link / Scroll / Push
Part 3 · Closing
21 / 22
Closing · 一句話帶走
命名一致的事件,
才是能用的事件。
否則資料只是一堆雜訊
—— Part 3 給行銷人的一句話

觸發器越設越多時,命名規範就是你跟未來自己的契約。

Part 3 · Closing Naming = Discipline
To Be Continued
22 / 22
Next · Part 4 · 資料層與品質控制

Part 4·資料層

從 dataLayer 的原理,到 Lookup Table 整理數據、
預覽模式與版本發布的黃金守則。

Part 4·3 Units + 1 PRAC ·Data Layer · Lookup · Release
弄一下工作室·GTM 實務演練