正在準備工作環境...
為什麼要埋追蹤碼？
你的老闆問：「上個月花了 50 萬投廣告，到底哪個管道帶來最多訂單？」
你打開 GA4，看到一堆數字，但「直接流量」佔了 40%——這代表系統根本不知道這些人從哪來。問題出在哪？追蹤碼沒埋好。
追蹤碼到底在做什麼？
想像你開了一間實體店，門口站了一個人，負責記錄：
- 每個客人從哪條路來的（廣告？搜尋？朋友介紹？）
- 客人在店裡看了什麼、摸了什麼
- 最後買了什麼、花了多少錢
追蹤碼就是那個站在門口的人，只不過是在網站上用 JavaScript 實作的。
核心概念速覽
| 概念 | 白話解釋 | 類比 |
|---|---|---|
| Cookie | 瀏覽器存在你電腦裡的小紙條，記錄你是誰 | 便利商店的會員條碼 |
| UTM 參數 | 加在網址後面的標記，告訴 GA4 流量從哪來 | 傳單上印的「來源代碼」 |
| GA4 | Google 的網站分析工具，收集並整理所有追蹤資料 | 總部的數據報表系統 |
| GTM | Google Tag Manager，幫你管理所有追蹤碼的工具 | 追蹤碼的遙控器 |
| 事件（Event） | 使用者做的每一個動作（點擊、瀏覽、購買） | 監視器錄到的每一個行為 |
UTM 參數長什麼樣？
一個帶 UTM 的網址：
https://shop.example.com/product/123?utm_source=facebook&utm_medium=cpc&utm_campaign=summer_sale
| 參數 | 用途 | 範例 |
|---|---|---|
utm_source | 流量來源 | facebook, google, newsletter |
utm_medium | 媒介類型 | cpc（付費點擊）, email, social |
utm_campaign | 活動名稱 | summer_sale, black_friday |
utm_term | 關鍵字（選填） | 洋裝, 運動鞋 |
utm_content | 廣告素材（選填） | banner_a, video_01 |
用 JavaScript 解析 URL 參數
當使用者點了帶有 UTM 的連結進到網站，我們可以用 JavaScript 把這些參數讀出來。
先來看看怎麼從一段網址中取出參數：
把所有 UTM 參數一次整理成物件：
追蹤的完整流程
用一張表來看「從點擊廣告到產生報表」的完整流程：
| 步驟 | 發生什麼事 | 誰負責 |
|---|---|---|
| 1. 使用者點擊廣告 | 帶著 UTM 參數進到網站 | 廣告投手設定 UTM |
| 2. 網站載入 GTM | GTM 容器開始運作 | 工程師安裝 GTM |
| 3. GTM 觸發追蹤碼 | 根據規則發送事件給 GA4 | 行銷 + 工程師設定 |
| 4. GA4 收到資料 | 記錄事件、來源、使用者行為 | GA4 自動處理 |
| 5. 產出報表 | 你在 GA4 看到「哪個管道帶來多少營收」 | 行銷企劃分析 |
本課重點
- 追蹤碼是用 JavaScript 寫在網站上的程式，負責記錄使用者行為
- UTM 參數是加在網址上的標記，讓 GA4 知道流量從哪裡來
- Cookie 讓網站能辨識回訪的使用者
- GTM 是管理追蹤碼的工具，GA4 是分析資料的工具
- 沒有正確的追蹤，再好的廣告優化都是瞎猜
下一課我們來學 Data Layer——GTM 怎麼知道使用者做了什麼事？
AI 協作：學了這個，跟 AI 怎麼配合？
追蹤碼設定的「規劃」比「寫程式」更重要。你負責定義要追蹤什麼、UTM 怎麼命名，AI 幫你產出具體的程式碼和設定。
你的人類優勢：
- 你知道哪些行銷管道對業務最重要，需要被追蹤
- 你能設計出一致的 UTM 命名規則，讓報表不會亂七八糟
可以這樣跟 AI 說：
我有 Facebook 廣告、Google 搜尋廣告、EDM 三個管道，請幫我設計一套 UTM 命名規則，要能在 GA4 裡清楚區分每個管道和每檔活動。
練習題
互動示範
DEMO 1可以修改程式碼試玩
DEMO 2可以修改程式碼試玩
挑戰任務
Task 1
請用 new URL() 解析這段網址 "https://shop.example.com?utm_source=line&utm_medium=social&utm_campaign=vip_sale"，用 console.log 印出 utm_source 的值。
Task 2
請解析網址 "https://shop.example.com?utm_source=google&utm_medium=cpc&utm_campaign=winter"，用 console.log 印出「來源：google，活動：winter」。
Next Lesson →