查網站電商媒體電商數據榜單中心數據速報 工具箱小教室電商健檢比較清單對手對戰API關於
數據與 KPI

Google Tag Manager 教學:用一個容器管好所有追蹤碼,不再每次求工程師

Google Tag Manager 教學:用一個容器管好所有追蹤碼,不再每次求工程師|ECPRO 電商博士
字級
ChatGPT 摘要 Claude 摘要 Perplexity 摘要
林克威導讀

以前我想加個追蹤碼要等工程師三天,學會 GTM 後自己十分鐘搞定,這篇教你怎麼建。

本文重點
  • 迷思:GTM 是給工程師用的技術工具?
  • 記住 GTM 三件套:代碼、觸發條件、變數
  • 從零建一個容器:實作步驟
  • 資料層:讓追蹤資料不再靠猜
  • AI 怎麼幫你上手 GTM
  • 劃重點:三句話帶走

先問你一個場景:行銷主管臨時說「這支新廣告要加轉換追蹤碼,明天就要跑」,你回頭找工程師,得到的答案是「排到下週三」。廣告等不了工程師,這就是每個電商團隊都遇過的痛。Google Tag Manager 存在的唯一理由,就是把追蹤碼的上架權,從工程師手上還給行銷人。學會它,你等於在自己桌上多了一個追蹤中控台。

迷思:GTM 是給工程師用的技術工具?

剛好相反。GTM 是 Google 專門設計來讓「不會寫程式的人」也能管理追蹤碼的工具。它的核心概念很白話:工程師只要在網站上裝一次 GTM 容器碼(一輩子就這一次),之後所有的 GA4、Google Ads 轉換、Meta 像素、各種第三方追蹤,你都在 GTM 的網頁後台點一點就能加,網站原始碼完全不用再動。

這帶來的改變是結構性的。過去每個追蹤碼都散落在網站不同角落,沒人記得哪頁裝了什麼,改一個怕動到別的。有了 GTM,所有追蹤碼集中在一個容器裡,一目了然、隨開隨關、還能一鍵回復到上一版。這不只是方便,是把追蹤管理從一團亂線變成一個有秩序的儀表板。

記住 GTM 三件套:代碼、觸發條件、變數

GTM 的一切都可以拆成三個角色,記住這個公式就掌握了八成:代碼(做什麼)+觸發條件(什麼時候做)+變數(用到什麼資料)

  • 代碼(Tag):真正要執行的東西,例如「送一個 GA4 購買事件」「觸發一次 Google Ads 轉換」。它回答「要做什麼」。
  • 觸發條件(Trigger):規定代碼在什麼情況下才發射,例如「當使用者到達 /thank-you 訂單完成頁時」「當有人點了加入購物車按鈕時」。它回答「什麼時候做」。
  • 變數(Variable):代碼需要用到的動態資料,例如訂單金額、訂單編號、商品名稱。它回答「用什麼資料填空」。

把一次追蹤想成一句話:「當客人付款完成時(觸發條件),送一個購買事件(代碼),帶上這筆訂單的金額與編號(變數)。」你所有的追蹤設定,都只是在填這三個空格而已。想通這點,GTM 就不再神秘。

從零建一個容器:實作步驟

第一步,到 GTM 建立帳戶與「網站」類型的容器,拿到一段容器安裝碼,請工程師貼到全站 head 與 body(這是唯一一次要動原始碼)。第二步,在容器裡新增第一個代碼:選 GA4 設定代碼,填入你的評估 ID,觸發條件設成「All Pages」,這樣全站的 GA4 基礎追蹤就上線了。

第三步,開始加事件代碼。以「加入購物車」為例:建一個 GA4 事件代碼、事件名稱填 add_to_cart,觸發條件設成「點擊符合加購按鈕」,金額與商品資料用變數帶入。第四步也是最關鍵的一步——用 GTM 內建的「預覽模式」把整個流程走一遍,它會即時顯示每一頁哪些代碼發射了、變數抓到什麼值。確認無誤後再按「提交」正式發布。沒經過預覽就發布,是新手最常見的災難。

資料層:讓追蹤資料不再靠猜

很多人卡在「訂單金額怎麼傳給 GTM」。答案是資料層(Data Layer)。你可以把它想成網站與 GTM 之間的一塊公用留言板:網站在訂單完成時,把金額、訂單編號、商品清單寫到這塊留言板上,GTM 再用變數去讀取。

為什麼不直接叫 GTM 去網頁上抓?因為靠抓取網頁文字非常脆弱,前端改個版面、換個 CSS 名稱,你的追蹤就默默壞掉還沒人發現。資料層則是一份穩定的結構化約定,網站怎麼改版都不影響。願意好好規劃資料層,是業餘追蹤與專業追蹤的分水嶺。雖然這步需要跟工程師約定格式,但約定一次就長治久安,遠比每次改版都來救火划算。

舉個實際情境你就懂差別在哪。某美妝賣家一開始偷懶,讓 GTM 直接去抓結帳頁上「總計」那行文字當作訂單金額,跑了兩個月都正常。後來設計師把價格區塊改版、金額前面多了個貨幣符號,GTM 抓到的值瞬間變成文字亂碼,購買金額全部歸零,卻沒有任何錯誤跳出來,等到月底對帳才發現營收數據整整壞了三週、廣告最佳化也跟著被誤導。改用資料層之後,工程師在訂單完成時明確寫入一個純數字的金額欄位,之後不管前端怎麼改版,GTM 讀到的值都穩如泰山。這就是為什麼專業團隊寧可一開始多花半天約定資料層,也不願意用抓網頁文字的方式省事——省下的小時間,會用壞掉三週的資料加倍還你。

常見錯誤與判讀重點

踩過的坑列給你避開:一,忘了發布。在 GTM 後台改了半天,若沒按「提交」,線上完全沒生效,這是最多人白忙一場的原因。二,重複裝碼。既然 GA4 已經透過 GTM 管理,就千萬別又在網站原始碼裡硬貼一份 GA4,否則每筆資料被算兩次。三,觸發條件設太寬,例如把「購買」的觸發設成 All Pages,結果每一頁都被當成一筆訂單,營收暴增全是假的。

判讀健康與否,記住兩個習慣:每次發布前一定跑預覽模式,每次發布後用 GA4 即時報表或廣告平台的診斷工具確認事件真的有進來。GTM 給了你速度,但速度沒有驗證就是災難。養成「改完就測、測完才信」的紀律,你才真正駕馭得住它。

AI 怎麼幫你上手 GTM

GTM 最勸退新手的,是不知道某個追蹤該怎麼設定觸發條件與變數。這時對話式 AI 助理很好用。你可以這樣問:「我用 Google Tag Manager,想追蹤『使用者點擊商品頁的加入購物車按鈕』並送出 GA4 的 add_to_cart 事件,請一步步告訴我要建哪些觸發條件與變數,以及每個欄位大概填什麼。」它能幫你把設定拆解成清楚的步驟清單,省去翻文件的時間。

限制同樣要說明白:AI 給的是通用做法,它看不到你的網站結構、不知道你的按鈕長什麼樣、也可能引用到舊版介面的欄位名稱。它適合幫你建立正確的心智模型與大方向,但實際每個變數抓到的值對不對,一定要回到 GTM 的預覽模式親眼驗證。把 AI 當教你概念的家教,別把它的每句話當成照抄就會動的說明書。

劃重點:三句話帶走

第一,GTM 是給行銷人的工具,讓你把追蹤碼上架權從工程師手上拿回來,工程師只需裝一次容器碼。第二,所有追蹤都是「代碼+觸發條件+變數」三件套,想成一句話就會設。第三,用資料層讓資料穩定、用預覽模式每次驗證、記得按發布——GTM 給你的是速度與自主,紀律則決定你能不能安全地享受它。

ECPRO 數據觀察

用真實數據延伸這個主題

ECPRO 電商博士實測逾 10 萬個台灣電商網站。想用數據驗證本文觀點,延伸閱讀這幾份實測報告:

覺得有用?分享出去
LINE Facebook X Threads

常見問題

已經用 GTM 管理 GA4,還需要在網站直接裝 GA4 嗎?

不需要,而且千萬不要兩邊都裝。如果網站原始碼裡已經有 GA4 的追蹤碼,又在 GTM 裡再放一份 GA4 設定代碼,同一個頁面瀏覽會被記錄兩次,你的工作階段、使用者數全部灌水,資料完全不可信。正確做法是選一邊:既然要用 GTM 的彈性,就把網站裡原生的 GA4 碼移除,統一由 GTM 容器管理,追蹤來源單一化才好維護與除錯。

GTM 會拖慢我的網站速度嗎?

影響通常很小,因為 GTM 的容器碼是非同步載入,不會卡住頁面顯示。但如果你在一個容器裡塞了幾十個代碼、又設很多在每頁都觸發的第三方腳本,累積起來還是會拖慢載入。建議定期檢視容器,把沒在用的舊代碼停用或刪除,並盡量讓觸發條件精準,只在需要的頁面發射。保持容器精簡,速度與追蹤完整性就能兼顧。

我完全不會寫程式,真的能自己用 GTM 嗎?

可以,這正是 GTM 設計的初衷。基本的 GA4 追蹤、頁面瀏覽、按鈕點擊、廣告轉換,都能在圖形介面點選完成,不必寫任何程式。唯一需要工程師協助的是最初貼容器碼,以及規劃資料層的資料格式。建議先從最單純的 All Pages GA4 設定練手,熟悉預覽模式後再逐步加事件,邊做邊測,一兩週就能獨立管理大部分日常追蹤需求。

訂閱電商情報每週一封,台灣電商數據與經營洞察。
相關文章