← → 翻页 · ESC 索引
弄一下工作室 · Lecturer Decks
Module 09 · GTM 入門
SEO × GA4 · 30 hours · Module 09 of 10

從 GA4 自訂,
GTM 統一管理

當自訂事件能力撐不住時,就是 GTM 出場的時候

釐清 GTM 與 GA4 自訂的分工、建立第一個容器、
把 LocalWP 接上 GTM、做三個實用事件追蹤。

Module 09·GTM 抉擇樹 · 容器佈建 · 事件追蹤·2026 Spring
Duration · 3 小時授課 · 3 單元
Lecturer·弄一下工作室·台北商業大學
本週進入 GTM 入門 · 接著 M10 整合實作
— Page 01 / 20 —
The Premise · 本週主張
02 / 20
Why GTM · 為什麼要學第二套工具
GTM 不是替代 GA4, 是 GA4 的放大器 GA4 收資料,GTM 決定何時送

學習曲線前陡後平 — 第一天建容器、設變數、配觸發很痛苦,
但通過之後所有新事件都是「複製貼上改一行」。先撐過第一天。

— 本週核心命題·GTM = 標籤管理容器
Page 02 · The Premise
— · —
Outcomes & Map · 本週三節
03 / 20
OUTCOMES · 三小時走完,你能做到

三件事 · 三小時

Unit 9-1 · 約 50 min
GTM vs GA4 抉擇樹
用三個問題判斷:加強型評估、gtag 直寫、GTM 三選一。
Unit 9-2 · 約 70 min
容器建立 + LocalWP
建容器、拿 GTM-XXXX、把 GA4 遷移到 GTM 統一管理。
Unit 9-3 · 約 60 min
事件追蹤實作
外連點擊、PDF 下載、表單提交三個實用事件。
本週繳交:① GTM 容器 ID(GTM-XXXXXXX)+ LocalWP 成功佈建截圖;② 三個事件在 GTM 預覽模式的觸發截圖。
— Deliverable · 本週交付物
Page 03 · 3 Units · 1 Container · 3 Events
銜接 M10 整合實作
Unit 9-1 · GTM vs GA4 抉擇樹
Part I · 04 / 20
Unit 9-1 · 約 50 min · 概念與判斷

GTM 是什麼,
什麼情況該用

四個元素、兩種做法、三個問題 — 先把場景搞清楚再動手。

容器 / 標籤 / 觸發條件 / 變數 · GA4 自訂 vs GTM 對比 · 抉擇樹三問

Unit 9-1 開幕
— GTM 本身不收資料,它是發射器 —
The Four Elements · GTM 的四個核心概念
05 / 20 講義 · m9-1-gtm-concept
Vocabulary · 進 GTM 前必懂的四個字

四個元素,把追蹤模組化

Element 01 · Container

容器

一段 GTM-XXXXXXX 代碼貼進網站,從此所有標籤都從容器管理 —— 不再改網站程式碼。

Element 02 · Tag

標籤

要執行的程式 —— 例如「送一筆 GA4 事件」、「載入 Facebook Pixel」、「載入廣告轉換碼」。

Element 03 · Trigger

觸發條件

標籤何時執行 —— 點擊某 class、URL 含 .pdf、表單提交、頁面捲動到 50%。

Element 04 · Variable

變數

動態值 —— 被點的連結 URL、被點的 class、表單 ID、目前頁面路徑。觸發條件靠它判斷

Page 05 · Container × Tag × Trigger × Variable
記住這四個字,後面九成術語就解開了
Two Approaches · 兩種做法的能力差異
06 / 20 講義 · m9-1-gtm-concept
The Trade-off · 成本 vs 能力

GA4 原生 vs GTM 管理

Approach A · GA4 原生(gtag.js)

設定簡單 · 學習低

  • 自動事件(頁面瀏覽 / 捲動)
  • 加強型評估(外連 / 下載)
  • 簡單自訂事件 — 需直接寫 JS
  • 單一 GA4 資源,無第三方
  • 適合:小型網站 + 追蹤需求簡單
Approach B · GTM 統一管理

能力強大 · 可治理

  • 跨平台標籤統一管理
  • 複雜觸發條件(CSS 選擇器 / RegEx)
  • 動態頁面追蹤(SPA / React)
  • 非工程師可獨立操作
  • 版本控制 + 預覽除錯環境
Page 06 · A vs B
不是二選一 — 是「依場景挑工具」
Decision Tree · 三問抉擇樹
07 / 20 講義 · m9-1-gtm-concept
Framework · 遇到新追蹤需求時的判斷流程

三個問題,三選一

從成本最低的方案開始問 — 能不寫程式就不寫,能不裝 GTM 就不裝。

Three Questions · 按 → 鍵或滾輪逐步點亮
Q1 · 問加強型評估
GA4 已經能自動追了嗎
是 → 不必設定,確認加強型評估已啟用。否 → 進 Q2。
Q2 · 問 gtag 直寫
邏輯簡單且能改程式碼
是 → 程式碼裡寫 gtag(),不必裝 GTM。否(複雜或不能改 code)→ 進 Q3。
Q3 · 問 GTM
多標籤治理或非工程師
是 → 用 GTM,這就是它存在的理由。否 → 評估是否值得導入。
關鍵心法:抉擇樹不是「越往後越好」,是「越往後成本越高、能力越強」。小型網站常常停在 Q1 就夠了。
m9-1 · 三問抉擇樹
Page 07 · The Decision Tree
3 Steps · 互動式翻頁
The Key Insight · 容易被誤解的一件事
08 / 20 講義 · m9-1-gtm-concept
The Most Important Sentence · 整堂課最重要的一句

GTM 本身不收集資料,
它只是個發射器

最終資料還是送到 GA4(或其他分析平台)。GTM 只負責「什麼時候送、送什麼參數」 — 收資料、存資料、做報表的還是 GA4。

常見混淆:把 gtag.js 留在網站上,又用 GTM 發 GA4 事件 → page_view 會被計算兩次。遷移到 GTM 時務必移除原本直接嵌入的 gtag.js。
— Troubleshoot · 重複計算的根因
Page 08 · Key Insight
GTM ≠ 分析工具 · GTM = 標籤治理
Three Real Cases · 三個常見場景
09 / 20 講義 · m9-1-gtm-concept
Apply the Tree · 把抉擇樹套到真實需求上

練習:三個場景,你會選哪一個

Case A · 外連點擊

追蹤「點擊外部連結」

→ 答案:Q1 加強型評估
GA4 已自動追蹤「outbound click」事件,啟用即可,不必寫任何程式碼。

Case B · 特定按鈕

追蹤「聯絡我們按鈕」

→ 答案:Q3 GTM
要靠 class / id 精準選按鈕,且不想改網站程式碼。GTM 點擊觸發條件解決。

Case C · 多平台轉換

同時追 GA4 + Facebook Pixel + Google Ads

→ 答案:Q3 GTM
多標籤治理就是 GTM 的主場 — 一處發布,三平台同步生效。

共同錯誤:看到「追蹤」兩個字就直接想 GTM。八成需求其實 Q1 + Q2 就解決了,GTM 是工具不是目的。
— 抉擇樹的真正用法
Page 09 · Three Cases
Unit 9-1 結 · 進入容器佈建
Unit 9-2 · GTM 容器建立 + LocalWP 佈建
Part II · 10 / 20
Unit 9-2 · 約 70 min · 動手實作

建第一個
GTM 容器

從 tagmanager.google.com 到 LocalWP,把 GA4 遷到 GTM 統一管理。

建容器 → 拿安裝碼 → 貼 LocalWP → 預覽驗證 → 發布 v1.0

Unit 9-2 開幕
— 一個帳戶可管多個容器,通常一網站對一容器 —
The Two Snippets · 兩段安裝碼分工
11 / 20 講義 · m9-2-gtm-setup
Snippet 01 · 主程式

放在 <head>

儘量靠前,確保 GTM 在頁面載入初期就初始化。
若放太後面,前面觸發的事件會漏掉。

<script>(function(w,d,s,l,i){...
})(window,document,'script',
'dataLayer','GTM-XXXXXXX');
</script>
Snippet 02 · noscript 備援

放在 <body> 開頭後

不支援 JavaScript 的瀏覽器備援用。
雖然現代瀏覽器幾乎都支援,但 GTM 仍要求兩段都裝才算完整。

<noscript><iframe src=
"...gtm.js?id=GTM-XXXXXXX"
height="0" width="0">
</iframe></noscript>
Page 11 · 兩段都要貼,少一段都不算完整
m9-2 · Step 02
The Pipeline · LocalWP 佈建四步
12 / 20 講義 · m9-2-gtm-setup
Hands-on · 從零到 GA4 跑起來

四個步驟,把 GTM 接上 LocalWP

照順序做,每一步都有「驗證點」,沒過不要往下走。

Pipeline · 按 → 鍵逐步點亮
Step 01 · Account
建立帳戶與容器
tagmanager.google.com 登入 → 建帳戶(Demo / 台灣)→ 建容器(網站 URL / 平台選「網頁」)。
Step 02 · Snippet
取得 GTM-XXXXXXX
同意條款後,GTM 顯示兩段安裝碼。記下容器 ID,貼進 LocalWP。
Step 03 · LocalWP
安裝到 WordPress
外掛 GTM4WP 填容器 ID 即可(推薦),或手動編 header.php 貼兩段。
Step 04 · Verify
預覽模式驗證
GTM「預覽」→ 輸入 LocalWP URL → Tag Assistant 顯示 GA4 設定標籤已觸發
別跳過驗證:每一步做完都打開預覽模式看一眼。等到三個事件都建好才驗證,出錯時不知道是哪一步
m9-2 · Step 05 預覽模式
Page 12 · The Pipeline
4 Steps · 每步都有驗證點
Two Ways to Install · 外掛 vs 手動
13 / 20 講義 · m9-2-gtm-setup
Step 03 deep dive · LocalWP 安裝兩條路

方法 A 外掛 vs 方法 B 手動

Method A · GTM4WP 外掛(推薦)

安全 · 自動 · 不傷主題

  • 後台搜尋安裝「GTM4WP
  • 啟用 → 設定頁填 GTM-XXXXXXX
  • 外掛自動把兩段插到正確位置
  • 主題更新後仍生效(不會被覆寫)
  • 適合:所有人,特別是不熟 PHP 的
Method B · 手動編 header.php

直接 · 但有風險

  • 主題編輯器 → header.php
  • 第一段貼 <head> 內
  • 第二段貼 <body> 開頭後
  • 語法錯 → WordPress 白版(WSOD)
  • 建議:先備份或用子佈景主題
Page 13 · Plugin vs Manual
本課程選 GTM4WP — 課堂風險最低
Consent Mode v2 · 隱私合規警示
14 / 20 講義 · m9-2-gtm-setup
Production Checklist · 上線前必做(課堂可略過)

上線時別忘了 Consent Mode v2

Google 2024 推出的隱私合規機制。即使是台灣站,若未來要跑 Google Ads 再行銷或用 GA4 的轉換建模功能,未正確設定會少計 10–40% 轉換

① 同意初始化

GTM → 標籤 → 同意初始化 → Google 代碼,預設 analytics_storage: deniedad_storage: denied

② Cookie 外掛

安裝 Complianz 或 CookieYes,使用者接受 Cookie 時自動更新同意狀態。

③ Google 信號

GA4 資源設定確認「Google 信號資料收集」已啟用,Consent Mode 建模才生效。

課堂環境提醒:LocalWP 練習不需嚴格執行;正式上線網站務必完成,影響廣告轉換數據完整性。
— Pre-Launch Checklist · 上線清單
Page 14 · Consent Mode v2
課堂略過 · 上線必做
Publish & Version · 發布並建立版本記錄
15 / 20 講義 · m9-2-gtm-setup
Step 06 · 預覽通過後的最後一步

發布」才會生效,預覽看到的訪客看不到

預覽模式只在你的瀏覽器內看得到。要讓所有訪客都收到追蹤,必須點右上角「提交」→ 填版本名稱與說明 → 「發布」。

習慣 01 · 命名

日期 + 變更摘要

例:v1.0 初始安裝 GA42026-04-15 新增電話點擊追蹤。日後查歷史很方便。

習慣 02 · 即時驗證

GA4 即時報表

發布後造訪 LocalWP,GA4 即時 → 活躍使用者應立刻顯示 1。沒看到就回頭查。

習慣 03 · 版本回滾

出錯就退到上版

GTM 保留所有版本記錄,出問題時一鍵回滾到任何歷史版本,不必重建。

單元 9-2 完成驗證:① 預覽模式中 GA4 設定標籤在所有頁面觸發;② GA4 即時報表造訪 LocalWP 後顯示活躍使用者;③ 容器已發布 v1.0。
— Unit 9-2 · DoD
Page 15 · Publish & Version
Unit 9-2 結 · 進入事件追蹤實作
Unit 9-3 · 三類事件追蹤實作
Part III · 16 / 20
Unit 9-3 · 約 60 min · 動手做三個事件

三個事件,
一份模板

外連點擊 / PDF 下載 / 表單提交 — 同一套流程做三次,建容器、配觸發、發布。

事件骨架一樣 — 觸發條件 + GA4 事件標籤;差別只在觸發類型與條件

Unit 9-3 開幕
— 第一個事件最痛,後面兩個複製貼上 —
Three Event Types · 三類事件追蹤
17 / 20 講義 · m9-3-gtm-events
Prerequisite · 先去「變數 → 內建變數」勾「點擊」與「表單」全部

三個實作 · 同一個骨架

Type 01 · Click
特定按鈕點擊
觸發:點擊 - 所有元素
條件:Click Classes 包含 contact-btn
事件:click_contact_btn
Type 02 · Download
PDF 下載
觸發:點擊 - 僅連結
條件:Click URL 包含 .pdf
事件:download_pdf + file_name
Type 03 · Form
表單提交
觸發:頁面瀏覽(推薦)
條件:Page Path = /thank-you/
事件:form_submit_contact
表單為什麼用「頁面瀏覽」追?「表單提交」觸發只代表點了送出,不代表成功。追蹤感謝頁面瀏覽才是最準確的成功提交
m9-3 · 表單追蹤最佳實踐
Page 17 · Three Event Types
Click · Link · PageView 三種觸發類型
Verification Matrix · 三事件驗證對照
18 / 20 講義 · m9-3-gtm-events
Step 05 · 預覽模式中逐一驗證

三個事件,三道驗證

每個事件做完,立刻在 LocalWP 觸發一次,看 Tag Assistant 進「已觸發的標籤」清單,再去 GA4 DebugView 確認參數。

click_contact_btn
點擊「聯絡我們」按鈕後,Tag Assistant「Tags Fired」出現此標籤,DebugView 看到 page_location 參數。
Click Trigger
download_pdf
點擊任何 .pdf 連結後,Tag Assistant 觸發此標籤,DebugView 看到 file_name + page_location
Link Click
form_submit_contact
送出表單跳到 /thank-you/ 後,Tag Assistant 觸發此標籤(在第二頁的觸發列表),DebugView 看到 page_path
Page View
發布後最後一步:到 GA4 管理員 → 轉換,把 click_contact_btnform_submit_contact 標記為轉換事件 → 之後就能在轉換報表中與流量來源交叉分析。
m9-3 · Step 06 標記轉換
Page 18 · Verification Matrix
Unit 9-3 · DoD
The Loop · SEO × GA4 × GTM 整合閉環
19 / 20
The Big Picture · M9 結束,M10 接手

三個工具,一條鏈路

Now · 你已經會的(M1–M9)

三個工具各自獨立

  • SEO(M1–M5)—— 帶來流量
  • GA4(M6–M8)—— 追蹤行為與報表
  • GTM(M9)—— 精確記錄轉換
  • 但三者還是分開的工具,沒有整合
Next · M10 要把三者串起來

閉環 + 儀表板 + 期末

  • m10-1 SEO×GA4×GTM 閉環模型
  • m10-2 Looker Studio 儀表板建置
  • m10-3 期末整合報告與發表
  • 把三套工具收進一張可決策的儀表板
本週帶走的兩件事:① 一個會跑的 GTM 容器(GTM-XXXXXXX);② 三個正在記錄的事件。下週直接拿來接 Looker Studio。
— M9 → M10 銜接
Page 19 · The Loop
Module 09 結 · 接 Module 10 整合實作
To Be Continued · 下週 Module 10
20 / 20 講義 · module9
The End of Module 09 · 三小時收束

會建容器不重要, 選對工具才是。

抉擇樹三問 / 容器佈建四步 / 三類事件追蹤
— 這套模板,會在你接下來每一個追蹤需求中反覆出現。

三小時完成·3 單元·1 容器 + 3 事件·下週 Module 10 整合
Page 20 · The End
— 弄一下工作室 · 台北商業大學 —