← → 翻页 · ESC 索引
Vol.01 · Part One
01 / 22
GTM 實務演練 · Part 1 of 4

觀念建構 × 環境準備

從埋碼焦慮到主導追蹤，
把 GTM 的三個核心概念講到能用。

Keyword·Tag Manager ·Funnel ·LocalWP
Duration·3 小時授課 ·6 單元 · Part 1
Contact·sky8697@gmail.com
弄一下工作室 GTM 實務演練 · Part 1 觀念建構與環境準備 Part 1 of 4
Opening · Manifesto
02 / 22
Why Part 1 opens here
不是學「多少種追蹤碼」，
是學怎麼規劃、怎麼命名、怎麼驗證。
前者讓報表越積越亂，後者讓資料半年後還看得懂。
—— Part 1 · 整門課的地基

90% 的埋碼失敗不是技術問題，
是沒規劃就動手。

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

三件事，離開教室就能用

不求記完每個按鈕，求知道追蹤要怎麼從零規劃。

Outcome 01
01
用 Tag × Trigger × Variable 的黃金公式，看懂 GTM 任何一張設定表單。
Outcome 02
02
用 漏斗 → KPI → 事件三層框架，產出一份可交付業主的埋碼規劃表。
Outcome 03
03
在本機 LocalWP 起一個 WordPress 站，把 GTM 容器掛上、預覽連線成功。
Part 1 · 6 Units 3hr · 1.1 / 1.2 / 1.3 / 1.4 / 1.5 / 1.6
Act I · Unit 1.1 + 1.2
04 / 22
Chapter 1.1–1.2 · Concept Foundation

GTM 的核心觀念

為什麼要用它，
它到底由哪三件東西組成。

4 Slides·Concept + Analogy ·~40 min
Act I · Concept Unit 1.1 + 1.2
1.1 · Marketing Pain
05 / 22 講義 · 1.1
Step 01 · 痛點從哪裡來

想追一個按鈕，得排兩週

寫需求 給工程師 進排程 等測試 等發布。
整條路走完，廣告活動早結束了。

傳統埋碼，讓行銷被技術頻寬綁住。
GTM 想解決的，正是這個延遲。
行銷自主 = 不再寫需求文件、不再等排程

這不是工程師壞，是分工錯位。
追蹤本來就該由會看數據的人掌控。

Unit 1.1 · 追蹤痛點 Marketing × Engineering
1.1 · Before / After GTM
06 / 22 講義 · 1.1
Step 02 · 換個方式理解

GTM 是網站的「延長線插槽」

Before · 傳統直接埋碼
每換一個追蹤碼，都要拆開牆壁重新接線。

修改要動原始碼。
依賴工程師排程。
代碼分散各處。
容易因衝突把網頁弄壞。
After · 使用 GTM 管理
先裝好「插槽」，之後自己插上去就好。

透過介面修改。
行銷可自主部署。
統一後台管理。
內建預覽模式先測試再發布。
Unit 1.1 · Container Analogy Direct Code vs. GTM
1.2 · Golden Formula
07 / 22 講義 · 1.2
Step 03 · GTM 的整套運作邏輯
當觸發條件發生的時候，
啟動代碼，
並帶上變數的資訊。
—— GTM 的「黃金公式」，弄懂能解 90% 的設定

三件事分工，
就像煙霧感測器 × 警報喇叭 × 樓層號碼牌。

Unit 1.2 · Trigger × Tag × Variable The Core Logic
1.2 · Three Pillars
08 / 22 講義 · 1.2
Step 04 · 三個角色，各司其職

Trigger × Tag × Variable

01
Trigger（觸發條件）
扮演監聽警衛。決定代碼什麼時候啟動。常見：Page View / Click / Form Submission / Scroll Depth。
02
Tag（代碼）
扮演傳遞信差。一段 JavaScript，把資料送到 GA4 / Meta Pixel / Google Ads。在 GTM 裡只填表單，不用寫程式。
03
Variable（變數）
扮演情報員。提供會變動的細節。常見：Page URL / Click Text / Click URL，讓代碼帶著「具體是哪個按鈕」一起送出。
Unit 1.2 · Three Pillars Trigger → Tag → Variable
Act II · Unit 1.3 + 1.4
09 / 22
Chapter 1.3–1.4 · Planning before Coding

動手前的埋碼規劃

把「為什麼埋」想清楚，
剩下 20% 才是在 GTM 點來點去。

6 Slides·Funnel + Naming ·~70 min
Act II · Planning Unit 1.3 + 1.4
1.3 · Four-Stage Funnel
10 / 22 講義 · 1.3
Step 05 · 顧客行為四階段

TOFU → MOFU → BOFU → CONV

TOFU · 認知
「有人來看」。關鍵問題：流量哪裡來？品質如何？
page_view · scroll · view_item_list
MOFU · 興趣
「開始認真看」。關鍵問題：哪些內容真的吸引人？
view_item · video_progress · file_download
BOFU · 意向
「準備要買 / 要聯絡」。關鍵問題：哪一步開始流失？
add_to_cart · form_start · click_phone
CONV · 轉換
「錢進來 / 名單進來」。關鍵問題：成本多少？
purchase · generate_lead · sign_up
Unit 1.3 · Funnel Layers GA4 25 Recommended Events 都在這四層裡
1.3 · Case · FitGym
11 / 22 講義 · 1.3
Step 06 · 把四層漏斗填進真實案例

健身房「FitGym 信義店」的對應表

商業模式：免費體驗課 現場銷售年費。主 KPI：每月體驗課預約數。

TOFU · 看首頁
page_view
Meta: PageView
MOFU · 看課程介紹
view_item
Meta: ViewContent
BOFU · 打開預約表單
form_start
Meta: InitiateCheckout
BOFU · 點擊撥電話
click_phone · 次要轉換
Meta: Contact / Google: Phone
CONV · 送出表單
generate_lead · 主要轉換
Meta: Lead / Google: Conversion

原則：漏斗越深的事件，送廣告越積極。TOFU 的 scroll 不用送，BOFU 的 click_phone 一定要送。

Unit 1.3 · Mapping Table Funnel × Event × Ads Platform
1.3 · Tracking Spec Sheet
12 / 22 講義 · 1.3
Step 07 · 對業主、工程師、廣告操盤手的「合約」

埋碼規劃表 · 8 個欄位

① 事件名稱
GA4 標準或自訂，snake_case
view_item
② 漏斗階段
TOFU / MOFU / BOFU / CONV
分層分析用
③ 觸發條件
人話描述（送出表單、點擊 X 按鈕…）
給業主看
④ CSS Selector
或 URL regex，給前端工程師看
技術合約
⑤ 參數
value, currency, item_id…
事件帶的細節
⑥ 是否為轉換
是 / 否 + 主次標記
影響廣告出價
⑦ 送往的平台
GA4 / Meta / Google Ads / LINE
受眾建立
⑧ 驗證方式
DebugView / Pixel Helper / Tag Assistant
怎麼確認上線了
Unit 1.3 · Spec Sheet Notion / Google Sheet 用這份
1.4 · Five Naming Rules
13 / 22 講義 · 1.4
Step 08 · 半年後還看得懂的命名

事件命名五條鐵律

① snake_case
全小寫 + 底線
view_item · 不要 viewItem
② 動詞 + 名詞
行為先、對象後
click_phone / submit_form
③ 沿用 GA4 標準名
不要自己發明
purchase 不要寫 buy
④ 限英文 / 數字 / 底線
≤ 40 字元
不要中文、不要 hyphen
⑤ 變動值塞參數
不塞進事件名
click_cta + cta_label
為什麼第 ⑤ 條最重要？把按鈕文字塞進事件名，半年後 GA4 會有200 個 click_cta_xxx，根本沒法比較哪個 CTA 效果好。
Unit 1.4 · Naming Rules 命名即治理
1.4 · Standard Event Dictionary
14 / 22 講義 · 1.4
Step 09 · 直接複製到 Notion / Sheet

標準事件字典 · 15 條涵蓋 95% 商業情境

page_view
任何頁面載入
page_title, location
scroll
捲動達 50%
percent_scrolled
view_item
查看商品/服務頁
item_id, value
click_cta
主要 CTA 按鈕
cta_label
click_external
點擊站外連結
link_url
click_phone
點擊 tel:
phone_number
click_email
點擊 mailto:
email_address
click_social
點擊 FB/IG/LINE
platform
video_start
影片開始播放
video_title
video_progress
25/50/75/100%
video_percent
file_download
下載 PDF / 圖片
file_name
form_start
表單第一次 focus
form_id
generate_lead
表單成功送出
form_id, value
add_to_cart
加入購物車
items[], value
purchase
結帳完成
transaction_id, value
Unit 1.4 · Event Dictionary 15 events · 95% coverage
1.4 · UTM Five Parameters
15 / 22 講義 · 1.4
Step 10 · 流量治理的「合約」

UTM 五參數 · 每個欄位都有允許值

utm_source
平台
facebook / instagram / google / line / edm
utm_medium
付費形式
cpc / social / email / organic_social
utm_campaign
活動代號
2026q2_summer_sale（年_季_主題）
utm_content
素材 / 版位
banner_a / coach_a_video_v1（A/B test）
utm_term
關鍵字
通常自動填，手動不用碰
硬規則 · ① 全小寫、不用空格、不用中文。② 絕不要在站內連結加 UTM —— 會重新計算 session，把原本的廣告來源蓋掉。
Unit 1.4 · UTM Discipline 命名即治理
Act III · Unit 1.5 + 1.6
16 / 22
Chapter 1.5–1.6 · Environment Setup

動手蓋實驗室

本機跑一個 WordPress，
把 GTM 掛上、預覽、確認連線。

3 Slides·Hands-on ·~50 min
Act III · Environment Unit 1.5 + 1.6
1.5 · LocalWP Setup
17 / 22 講義 · 1.5
Step 11 · 為什麼要在本機？絕對安全 × 完全控制 × 極速反饋

LocalWP 三步蓋出實驗網站

01
下載安裝 LocalWP
前往 localwp.com，下載對應作業系統的安裝檔，完成基礎安裝。免費。
02
拖曳匯入網站包
打開 LocalWP，把teaching-demonstration.zip直接拖進視窗。它會自動解壓縮並重建整個網站環境。
03
啟動網站 + 登入後台
點 Start site → Open site 看前台。後台從 WP Admin 進，或網址加 /wp-admin。老師會給專屬帳密。
Unit 1.5 · Hands-on 本機 WordPress 起站
1.6 · GTM4WP Install
18 / 22 講義 · 1.6
Step 12 · 不寫一行程式，把容器掛上去

GTM 容器 × GTM4WP 外掛

01
建立 GTM 帳號 + 容器
到 tagmanager.google.com，建立帳號、加容器（目標平台選 Web），複製拿到的 GTM-XXXXXXX。
02
填入 GTM4WP 外掛設定
後台 設定 → Google Tag Manager，把 GTM-XXXXXXX 貼到「Google Tag Manager ID」欄位。確認 Container code on/off 是 ON。
03
儲存 + 開啟預覽
頁面最下方「儲存設定」。回 GTM 後台點右上 Preview，輸入本機網址（如 teaching-demo.local），等 Connected!
Unit 1.6 · Hands-on 容器掛載 + 預覽連線
1.6 · Verify Connection
19 / 22 講義 · 1.6
Step 13 · 最後一哩 · 看到 Connected 才算過關

三種驗證方式，至少跑兩種

① GTM Preview
右上 Preview → 輸網址 → 看到 Connected!
官方檢測
② Tag Assistant
Chrome 插件，前台 reload 後檢查容器 ID 是否被識別
第三方檢測
③ DevTools Network
F12 → Network → 過濾 collect 看請求是否發出
原始層檢測
恭喜完成基礎建設。現在你有一個完全由你掌控、且正確掛 GTM 的實驗室。Part 2 我們把第一張代碼裝上去，把真實數據送進 GA4。
Unit 1.6 · Verification Part 1 收尾
Closing · Manifesto
20 / 22
One Thing to Remember
好的埋碼規劃師像建築師，
開工前畫好藍圖，
工人才不會砌錯牆。
—— Part 1 帶走的一句話

命名不是美學問題，
是半年後的你能不能看懂自己留下的資料。

Part 1 · Closing From Concept to Lab Ready
What's Next · Part 2 Preview
21 / 22
Map · 從觀念走進「第一張代碼」

Part 2 · 基礎追蹤與 Chrome 工具運用

2.1 第一張代碼
全站頁面瀏覽 + GA4 設定代碼，正式把資料送進 GA4
~45 min
2.2 看懂網頁骨架
脫離工程師的必殺技 · CSS 選擇器入門
~40 min
2.3 互動追蹤
精準捕捉按鈕點擊事件，搭配 Click 變數
~50 min
PRAC 2.1
GA4 事件命名健檢表 · 把今天規劃的事件字典套到自己的網站
作業
Part 1 的規劃表 + Part 2 的實作 = 一個能向業主交付的完整追蹤方案。
Next · Part 2 3hr · 4 Units
End of Part 1
22 / 22
Part 1 of 4 · 觀念建構與環境準備

To Be Continued

下一個三小時，
我們把 第一張 GA4 代碼裝上去。

Part 2·基礎追蹤 + Chrome 工具運用
弄一下工作室·GTM 實務演練·sky8697@gmail.com