← → 翻页 · ESC 索引
Vol.02 · Part Two
01 / 22
GTM 實務演練 · 3hr · Part 2

基礎追蹤 × Chrome 工具

三小時,把網頁骨架讀成可追蹤的選擇器,
每一次點擊變成 GA4 報表上能看的事件。

Keyword·Page View ·CSS Selector ·Click Event
Duration·3 小時授課 ·4 單元
弄一下工作室 GTM 實務演練 · Part 2 of 4 基礎追蹤與 Chrome 工具運用
Opening · Manifesto
02 / 22
Why this Part opens here
不是學「會用 GTM」,
是學看懂網頁設準條件
前者按一按代碼,後者真的能交報表
—— Part 2 · 全 GTM 課程的地基

裝代碼五分鐘,
讀懂 DOM 與 Click Element 才是真功夫

Part 2 · Opening GTM 實務演練 3hr
This Part · Outcomes
03 / 22
Learning Outcomes · 三小時帶走

三件事,離開教室就能交差

不求把 GA4 玩到精,求明天就能上一張代碼

Outcome 01
01
在 GTM 建立全站 Page View地基代碼,並用預覽模式驗證代碼已啟動。
Outcome 02
02
Chrome Inspect 拆網頁骨架,寫出 GTM 認得的 CSS 選擇器。
Outcome 03
03
建立 Trigger + GA4 事件代碼,事件命名符合 snake_case 國際標準。
Part 2 · 4 Units 3hr · CH2-1 / CH2-2 / CH2-3 / PRAC2-1
Act I · Unit 2-1
04 / 22
Chapter 2.1 · The Foundation Tag

第一張地基代碼

全站 Page View,
後面所有事件能跑起來的前提。

3 Slides·Concept + Setup ·~30 min
Act I · Page View Unit 2-1
2-1 · Why Page View
05 / 22 講義 · 2-1
Step 01 · 為什麼第一張代碼這麼重要

頁面被看了都不知道,談什麼轉換

頁面瀏覽(Page View)是所有追蹤的底層事件,
沒有它,後續所有事件都會失去比較基準。

設定一次 Google 代碼,全站自動套用
之後 GA4 事件都繼承這份評估 ID。
地基代碼 = 容器內所有 GA4 事件的共用 ID 來源

這是整個 Part 2 唯一一張需要手動輸入 G-XXXXXXXX 的代碼,
之後其他事件代碼都用選的就好。

Unit 2-1 · 地基代碼 Page View → 所有事件的共同前提
2-1 · Setup Pipeline
06 / 22 講義 · 2-1
Step 02 · GTM 後台三步建一張代碼

建立 Google 代碼三步驟

命名 → 設定 → 觸發,每一步都有對應位置——按 → 逐步點亮。

Pipeline · Tag → Configuration → Trigger
01
新增代碼
代碼 (Tags) → 新增。命名為 「GA4 - 設定 - 全站瀏覽」,名字後續好找。
02
代碼設定
類型選 Google 代碼 (Google Tag),貼上 GA4 後台的評估 ID G-XXXXXXXX。
03
觸發條件
直接選內建的 All Pages — 想追全站,不要自己造觸發條件。
關鍵記憶點:評估 ID 只貼這一次。之後所有 GA4 事件代碼,ID 欄位都用「選取」這張 Google 代碼,GTM 自動繼承。
Unit 2-1 · Setup Pipeline Tag → Config → Trigger
2-1 · Preview & Verify
07 / 22 講義 · 2-1
Step 03 · 驗收 = 看到 Tags Fired 才算真

預覽模式:看到才信的鐵律

不要設定完就直接「提交發布」。
每張代碼上線前,都先進預覽模式跑一次。

Tag Assistant 三步驗收
① GTM 頂部點 「預覽 (Preview)」,輸入測試網址連線。
② 在彈出的 Tag Assistant 視窗,點時間軸最上方的 「Container Loaded」
③ 看右側 「Tags Fired」區塊有沒有出現「GA4 - 設定 - 全站瀏覽」。

看到 = 成功。沒看到 = 容器沒裝對 / 觸發條件選錯,回 CH1-4 檢查

Unit 2-1 · Verify Container Loaded → Tags Fired
Act II · Unit 2-2
08 / 22
Chapter 2.2 · Read the DOM

網頁骨架 × 選擇器

脫離工程師的必殺技:
Inspect、會寫 CSS Selector。

5 Slides·DOM + Selector ·~50 min
Act II · CSS Selector Unit 2-2
2-2 · Chrome Inspect
09 / 22 講義 · 2-2
Step 01 · 召喚透視鏡

右鍵 → 檢查,網頁骨架立刻現形

對著想追蹤的按鈕按右鍵 → 檢查 (Inspect)
畫面右側會彈出 DevTools,已經幫你標好對應元素。

不要怕看到一堆程式碼。
不需要看懂全部,只要找兩個關鍵字idclass
DevTools = 行銷人的網頁透視鏡

這節結束你不會變工程師,但你會變看得懂前端

Unit 2-2 · Inspect Right Click → Inspect
2-2 · ID vs Class
10 / 22 講義 · 2-2
Step 02 · 兩個身分標記,差在哪

獨一無二的身分證

ID · 身分證字號
#id
頁面內必須唯一,最精準。但 Spectra 等頁面編輯器預設不加 ID,多數情況用不到。
Class · 制服 / 特徵
.class
可重複使用,是真正常見的識別方式。Spectra 在「進階」設定加的自訂名稱會出現在這裡。
實務優先順序:先找 ID(沒有),再找有意義的 class(避開 wp-、uagb- 這類框架預設 class),找不到就加——回頁面編輯器自己掛一個。
Unit 2-2 · ID vs Class 身分證 vs 制服
2-2 · Real DOM
11 / 22 講義 · 2-2
Step 03 · 真實 DOM 範例(練習網站按鈕)

外層 div ≠ 真正被點到的那層

<!-- ① 外層 div:自訂名稱在這裡 -->
<div class="uagb-buttons__outer-wrap promo-btn-01">
  <!-- ② 內層 a:實際被點擊的那層 -->
  <a class="uagb-buttons-repeater wp-block-button__link">
    領取優惠券
  </a>
</div>

外層 div 的 promo-btn-01 是「區塊識別」用,
但使用者手指真正碰到的是內層 <a>——這層的 class 才是 GTM 比對對象。

Unit 2-2 · Real DOM 外層識別 · 內層點擊
2-2 · Selector Rules
12 / 22 講義 · 2-2
Step 04 · CSS Selector 三條規則

三個寫法,足夠應付 90% 場景

★ 規則一
如果是 ID,前面加井字號 #
#main-cta
★ 規則二
如果是 Class,前面加小點 .
.promo-btn-01
★ 規則三
如果點擊層在外層內部,用空格串接兩層。
.promo-btn-01 a.uagb-buttons-repeater

空格的意思 = 「在...裡面」。複合選擇器讓你能精準定位「哪個區塊裡的哪個元素」。

Unit 2-2 · Selector # · . · 空格三條規則
2-2 · Click Element
13 / 22 講義 · 2-2
Step 05 · 不要靠猜,用 GTM 預覽看實際層級

選擇器寫到哪一層?看 Click Element

進預覽模式 → 點一次按鈕 → 在 Tag Assistant 切到 Variables 分頁,
Click Element 那一列——它顯示的就是實際被點到的那層。

如果 Click Element 顯示
<a class="uagb-buttons-repeater...">,
就代表你需要把 a 那層也寫進去
事實 > 推測 · 預覽模式才是 GTM 設定的真相源

下個 chapter——把這條確認過的選擇器,正式餵給 Trigger。

Unit 2-2 · Verify Layer Variables → Click Element
Act III · Unit 2-3
14 / 22
Chapter 2.3 · Click Tracking

互動追蹤 × Click Event

選擇器變成觸發條件,
觸發接到 GA4 事件代碼。

4 Slides·Variables + Trigger + Tag ·~50 min
Act III · Click Event Unit 2-3
2-3 · Enable Variables
15 / 22 講義 · 2-3
Step 01 · 喚醒點擊變數

GTM 預設省電模式,先把開關打開

沒勾這些變數,預覽模式裡的 Click Element 會是空的——
勾完才能設條件,順序不能反。

變數 (Variables) → 設定 (Configure) → 在「點擊 (Clicks)」區塊全部勾選:
Click Element · Click Classes · Click ID · Click Target · Click Text · Click URL

六個變數對應按鈕的不同屬性。全部開啟,未來設條件才能靈活切換。

Unit 2-3 · Variables 勾完六個 Click 變數
2-3 · Trigger Pipeline
16 / 22 講義 · 2-3
Step 02 · 三步建一張帶條件的 Trigger

觸發條件三步驟建構

關鍵在第二步:從「所有點擊」切換成「部分點擊」——按 → 逐步點亮。

Pipeline · 命名 → 過濾 → 比對
01
新增觸發
命名 「點擊 - 特定優惠按鈕」。類型選 「點擊 - 所有元素」
02
切到部分點擊
下拉「所有點擊」改為 「部分點擊 (Some Clicks)」,畫面才會出現條件列。
03
填選擇器
左欄 Click Element、中欄 matches CSS selector、右欄填選擇器字串。
常見錯誤:選擇器只寫 .promo-btn-01(外層 div 的 class),但 Click Element 實際是 <a>觸發不會發生。寫到內層那一層為止。
Unit 2-3 · Trigger All Clicks → Some Clicks
2-3 · GA4 Event Tag
17 / 22 講義 · 2-3
Step 03 · 把 Trigger 接到 GA4 事件代碼

四個欄位,事件就上線

類型
Google Analytics: GA4 事件
Tag Type
評估 ID
點欄位旁選取鈕,選 2-1 建立的 Google 代碼不要手動輸入 G-。
Pick Tag
事件名稱
click_promo_button全小寫 + 底線,這是 GA4 鐵律。
snake_case
觸發條件
選剛剛建好的 「點擊 - 特定優惠按鈕」。儲存。
Trigger Pick

回預覽模式 → 點一次按鈕 → Tag Assistant 看到 Tags Fired就完成了

Unit 2-3 · GA4 Event Type · ID · Name · Trigger
2-3 · The href Trap
18 / 22 講義 · 2-3
Step 04 · 按鈕會跳頁時的隱形坑

事件還沒送出,瀏覽器就跳走了

這是新手最常踩的坑——
明明設好了,但 GA4 報表上就是看不到事件

解法 A
代碼「更多設定」加欄位 transport_type = beacon,讓事件背景送出再跳頁。
推薦
解法 B
觸發類型改為 「點擊 - 僅連結 (Just Links)」,GTM 會自動等事件發出才放行。
替代
判斷標準:被追蹤的元素有 href 屬性 → 必加解法。沒有 href(純按鈕、互動元件)→ 不用管這條。
Unit 2-3 · href Trap beacon · Just Links
Act IV · Practice 2-1
19 / 22
Practice 2.1 · Naming Convention

命名 = 未來自己的恩人

事件名隨便取,
三個月後看不懂自己的報表

2 Slides·Rules + Drill ·~30 min
Act IV · snake_case PRAC2-1
PRAC2-1 · Golden Rules
20 / 22 講義 · PRAC2-1
Step 01 · GA4 命名鐵律

蛇形命名法 · snake_case 三條規則

Rule 01 · 字符
a-z 0-9
只能用小寫英文字母數字。中文、大寫一律 NG。
Rule 02 · 連接
_
單字之間只能用底線連接。不能用空格、連字號 -。
Rule 03 · 一致
convention
命名風格整個專案統一。click_xxx 或 xxx_click 選一種貫徹到底。
真實後果click promo button(含空格)→ GA4 報表會出現「(other)」聚合,事件直接遺失
PRAC2-1 · Rules a-z 0-9 _ · 統一
PRAC2-1 · 5 Scenarios
21 / 22 講義 · PRAC2-1
Step 02 · 5 個情境,先想再對答案

情境練習:你會怎麼命名

首頁「立即報名」按鈕
表達報名動作,全小寫加底線。
sign_up_click
電話號碼被點擊
tel: 連結點擊。clickPhoneNumber 駝峰式 NG。
click_phone_number
下載免費指南 PDF
避開 GA4 內建 file_download,自定義名稱好區別。
download_guide
表單送出成功
用 GA4 標準事件,未來接 Google Ads 轉換更順。
generate_lead
Facebook 圖示點擊
命名加平台,後續方便依平台拆報表。
click_social_facebook
PRAC2-1 · Drill 5 Scenarios · No Single Right Answer
Part 2 · To Be Continued
22 / 22
Part 2 收束 · 帶走的一句話
裝代碼不算會 GTM,
能用 Click Element 自證才算。
Part 3 開始——表單、外連、Scroll
—— Part 2 收束 · Part 3 預告

下一階段——進階互動與轉換追蹤
把這套流程用在表單、外連、捲動深度