【Google Tag Manager 教學】GTM 設定 5 步驟|含 GA4、Facebook Pixel 安裝實戰

讀完這篇 Google Tag Manager 完整教學,你能獨立建立 GTM 帳號、安裝 GA4 與 Facebook Pixel 等五大追蹤標籤、設定觸發條件,並用除錯模式驗證代碼是否正確運作。
google-tag-manager 教學指南精選圖片

本文包含合作推廣連結,若您透過連結購買,我們可能獲得佣金,不會影響您的價格。

架站工具推薦
⭐ 編輯首選
全球 43% 網站的架站首選平台
  • 拖拉式編輯器——不需寫程式,直覺式建立專業網站
  • 數千款佈景主題——商業、作品集、部落格一鍵套用
  • 內建 SEO 工具——網站地圖、社群分享、搜尋優化
  • WooCommerce 電商——免費外掛即可開店收款
9.3 / 10 本站評分
全球 4.7 億網站使用 · 免費方案
免費建立網站 免費方案永久使用,隨時升級
月付 NT$80 起的 WordPress 主機
查看方案
視覺化設計 × 內建 CMS × 設計師首選
免費試用

Google Tag Manager(GTM)是 Google 提供的免費代碼管理工具,讓行銷人員不需要動程式碼就能管理所有追蹤標籤。這篇 GTM 教學將帶你從帳號建立、5 個必裝標籤設定,到觸發條件與除錯模式,一次完成所有設定。

Google Tag Manager 是什麼?為什麼行銷人員都在用它

Google Tag Manager(簡稱 GTM)是一個集中管理所有網站追蹤代碼的「容器」。你可以把它想像成一個控制面板——GA4 追蹤碼、Facebook Pixel、Google Ads 轉換代碼,全部放進這個容器裡統一管理,不需要每次都請工程師修改網站原始碼。

GTM 解決的核心痛點很明確:每次要埋新代碼,行銷人員就得開工單給工程師,等排程、等上線,一來一回可能就是一兩週。 如果代碼埋錯了,還得再走一次流程。GTM 讓行銷人員自己就能完成這些操作,從新增代碼到上線,最快十分鐘搞定。

在開始操作之前,你需要先理解 GTM 的三層架構:

  • 帳號(Account):最上層的管理單位,通常一家公司一個帳號
  • 容器(Container):放在帳號底下,每個網站對應一個容器,容器會產生一組 GTM ID(格式為 GTM-XXXXXXX)
  • 代碼 / 觸發條件 / 變數(Tags / Triggers / Variables):容器裡面的三大元素——代碼是你要安裝的追蹤程式碼,觸發條件決定代碼何時啟動,變數則是動態資料(如頁面網址、點擊文字等)
GTM 三層架構:帳號(Account)→ 容器(Container,含 GTM ID)→ 三大元素:代碼(Tags)、觸發條件(Triggers)、變數(Variables)
▲ GTM 三層架構:帳號(Account)→ 容器(Container,含 GTM ID)→ 三大元素:代碼(Tags)、觸發條件(Triggers)、變數(Variables)

不論你經營的是電商網站、部落格、還是企業官網,只要需要安裝追蹤代碼,GTM 都是最實用的管理方式。

GTM vs 直接埋程式碼:哪種方式適合你?

很多人剛接觸網站追蹤時會問:「我直接把 GA4 代碼貼到網站 <head> 裡不就好了,為什麼還要多裝一個 GTM?」

如果你的網站只需要一個 GA4 追蹤碼,而且未來不打算加任何其他追蹤工具,直接埋碼確實是最簡單的做法。但現實是,大多數網站很快就會需要 Facebook Pixel、Google Ads 轉換追蹤、再行銷代碼、甚至自訂事件追蹤——這時候直接埋碼的問題就會浮現。

比較項目 直接埋程式碼 Google Tag Manager
技術門檻 需要會改 HTML 圖形化介面操作
上線速度 需等工程師排程 行銷人員自行發布
版本控制 無紀錄,改壞難回溯 每次發布自動建立版本,可一鍵回滾
維護成本 代碼散落各頁面,難管理 所有代碼集中在一個容器
出錯風險 改錯程式碼可能影響網站 有預覽模式可先測試
適合情境 極簡網站、只需一個追蹤碼 需要多個追蹤工具的網站
直接埋碼 vs GTM 比較——左欄「直接埋碼」:需工程師、無版本控制、代碼散落各頁面;右欄「GTM」:行銷自主操作、自動版本紀錄、集中管理所有代碼
▲ 直接埋碼 vs GTM 比較——左欄「直接埋碼」:需工程師、無版本控制、代碼散落各頁面;右欄「GTM」:行銷自主操作、自動版本紀錄、集中管理所有代碼

WordPress.com 的站長特別適合用 GTM。 如果你使用 WordPress.com 商業方案以上,可以透過外掛直接整合 GTM,完全不需要動到佈景主題的程式碼。對於非技術背景的站長來說,這是最安全、最有效率的追蹤代碼管理方式。

另外,當你透過 GTM 安裝好追蹤代碼後,搭配 UTM 參數可以更精準地追蹤每個廣告活動的成效。如果你還不熟悉 UTM 的用法,建議先了解域名的基本概念,這對理解追蹤網址的結構很有幫助。

建立 GTM 帳號與容器(含截圖步驟)

在動手建立 GTM 之前,建議你先花五分鐘把「要追蹤的事件」整理成一張簡單的表格。例如:

追蹤目標 對應代碼 觸發時機
全站流量 GA4 設定代碼 所有頁面載入
廣告轉換 Facebook Pixel 所有頁面載入
購買完成 Google Ads 轉換 感謝頁面
CTA 點擊 自訂事件 按鈕被點擊

這張表格能幫你在 GTM 設定時不遺漏任何追蹤需求,也能讓團隊成員清楚知道目前網站裝了哪些代碼。

建立帳號與容器

步驟一: 前往 tagmanager.google.com,使用你的 Google 帳號登入。

步驟二: 點擊「建立帳戶」。帳戶名稱建議填公司或品牌名稱(例如「PMTW」),國家/地區選「台灣」。

步驟三: 設定容器。容器名稱建議填你的網域(例如 www.example.com),目標平台選擇「網頁」。

步驟四: 同意服務條款後,系統會自動產生一組容器 ID(格式為 GTM-XXXXXXX),同時顯示兩段需要安裝到網站的程式碼。

將 GTM 代碼安裝到網站

GTM 會給你兩段程式碼:

  • 第一段放在網頁的 <head> 標籤內,越靠近頂部越好
  • 第二段放在 <body> 標籤開啟後的位置

WordPress.com 安裝方式(最簡單):

如果你使用 WordPress.com 商業方案以上,有三種安裝方式:

  1. 最快方式: 進入 WordPress.com 後台 → 設定 → 流量 → 直接填入 GTM ID(GTM-XXXXXXX),系統會自動幫你安裝代碼
  2. 外掛方式: 安裝「Site Kit by Google」外掛,可以直接連結你的 GTM 帳號
  3. 手動方式: 安裝「Insert Headers and Footers」外掛,將兩段代碼分別貼入 Header 和 Body 區域

WordPress.com 免費方案無法安裝 GTM,需要升級至商業方案才能使用外掛功能。免費方案永久使用,不需要信用卡,但 GTM 整合需要付費方案的支援。

一般 HTML 網站: 直接將兩段程式碼貼到每個頁面的對應位置即可。如果你使用雲端主機自架網站,通常在主題的 header.phpfooter.php 檔案中加入即可。

安裝完成後,先別急著設定代碼——進入 GTM 的預覽模式(Preview),確認容器代碼有正確載入。如果 Tag Assistant 視窗能順利開啟並顯示你的網站,代表安裝成功。

5 個必裝標籤:從 GA4 到 Facebook Pixel 逐一設定

接下來是 GTM 教學的核心——我們要在容器裡安裝五個最常用的追蹤標籤。我們團隊在管理客戶網站時,這五個標籤幾乎是每個專案的標準配備。

GA4 設定代碼(Google 代碼)

這是最基本也最重要的標籤,讓 GA4 開始收集你的網站數據。

操作步驟:

  1. 在 GTM 左側選單點擊「代碼」→「新增」
  2. 代碼類型選擇「Google 代碼」(Google Tag)
  3. 在「代碼 ID」欄位填入你的 GA4 評估 ID(格式為 G-XXXXXXXX,可在 GA4 後台 → 管理 → 資料串流中找到)
  4. 觸發條件選擇「All Pages」(初始化 – 所有頁面)
  5. 為代碼命名(建議命名為「GA4 – 設定代碼」),然後儲存

常見錯誤: GA4 評估 ID 是 G- 開頭,不要跟 Google Ads 的 AW- 開頭搞混。填錯的話,GA4 不會收到任何資料。

Facebook Pixel(Meta 像素)

Facebook Pixel 是投放 Meta 廣告(Facebook / Instagram)時必備的追蹤代碼,用來追蹤廣告轉換和建立再行銷受眾。

操作步驟:

  1. 先到 Meta 事件管理工具取得你的 Pixel 基礎代碼(一段 JavaScript)
  2. 在 GTM 新增代碼 → 代碼類型選擇「自訂 HTML」
  3. 將 Pixel 基礎代碼完整貼入 HTML 欄位
  4. 觸發條件設為「All Pages」
  5. 命名為「Meta Pixel – 基礎代碼」,儲存

進階比對(Advanced Matching): 如果你的網站有會員登入功能,可以在 Pixel 代碼中加入進階比對參數(如 email、phone),這能提升 Meta 廣告的歸因準確度。但如果你的網站沒有會員系統,基礎代碼就夠用了。

Google Ads 轉換追蹤

當你投放 Google Ads 廣告時,需要這個標籤來追蹤「哪些廣告帶來了實際轉換」(例如完成購買、填寫表單)。

操作步驟:

  1. 在 Google Ads 後台 → 工具 → 轉換 → 取得轉換 ID 和轉換標籤
  2. 在 GTM 新增代碼 → 選擇「Google Ads 轉換追蹤」
  3. 填入轉換 ID(AW-XXXXXXXXX)和轉換標籤
  4. 觸發條件不要選 All Pages——應該設定為感謝頁面的 URL(例如 Page URL 包含 /thank-you
  5. 命名為「Google Ads – 購買轉換」,儲存

這裡的關鍵是觸發條件:轉換追蹤只應該在使用者完成目標動作後才觸發,不是每個頁面都觸發。

Google Ads 再行銷代碼

再行銷代碼和轉換追蹤不同——它的目的是「記住」造訪過你網站的使用者,讓你之後能對他們投放再行銷廣告。

操作步驟:

  1. 在 GTM 新增代碼 → 選擇「Google Ads 再行銷」
  2. 填入你的 Google Ads 轉換 ID
  3. 觸發條件設為「All Pages」(因為你想追蹤所有訪客)
  4. 命名為「Google Ads – 再行銷」,儲存

與轉換追蹤的差異: 轉換追蹤只在特定頁面觸發(如感謝頁),再行銷代碼則在所有頁面觸發。兩者的 Google Ads 轉換 ID 相同,但用途完全不同。

自訂事件:按鈕點擊追蹤

前面四個標籤都是「安裝第三方追蹤工具」,這個標籤則展示 GTM 觸發條件的彈性——你可以追蹤網站上任何使用者互動行為。

範例:追蹤「立即購買」按鈕的點擊次數

  1. 先啟用內建變數:在 GTM 左側選單 → 變數 → 設定 → 勾選「Click Text」和「Click ID」
  2. 新增觸發條件:類型選「點擊 – 所有元素」→ 條件設為「Click Text 等於 立即購買」(或用 CSS 選擇器 Click ID 等於 btn-buy
  3. 新增代碼:類型選「Google Analytics:GA4 事件」→ 事件名稱填 button_click → 觸發條件選剛建立的點擊觸發條件
  4. 命名為「GA4 事件 – 購買按鈕點擊」,儲存

這個自訂事件的資料會出現在 GA4 的事件報表中,讓你知道有多少人點擊了購買按鈕。如果你經營WordPress 購物車網站,這類按鈕追蹤對優化轉換率非常有幫助。

觸發條件設定:控制代碼在「對的時機」觸發

觸發條件(Triggers)是 GTM 的靈魂——它決定你的代碼「什麼時候」、「在哪個頁面」被啟動。設定錯誤的觸發條件,輕則資料不完整,重則代碼在不該觸發的地方亂觸發,汙染你的分析數據。

三種最常用的觸發條件類型

觸發類型 適用情境 實際範例
網頁瀏覽(Page View) 全站追蹤、特定頁面追蹤 GA4 基礎代碼(All Pages)、感謝頁轉換追蹤
點擊(Click) 按鈕點擊、連結點擊 CTA 按鈕追蹤、外部連結點擊追蹤
表單提交(Form Submission) 詢問表單、訂閱表單 聯絡我們表單送出、電子報訂閱
GTM 三大觸發條件類型:網頁瀏覽(Page View)適用全站追蹤與特定頁面、點擊(Click)適用按鈕與連結追蹤、表單提交(Form Submission)適用詢問與訂閱表單
▲ GTM 三大觸發條件類型:網頁瀏覽(Page View)適用全站追蹤與特定頁面、點擊(Click)適用按鈕與連結追蹤、表單提交(Form Submission)適用詢問與訂閱表單

設定條件篩選(避免代碼亂觸發)

大多數情況下,你不會希望代碼在「所有頁面」或「所有點擊」都觸發。GTM 提供條件篩選功能,讓你精準控制觸發範圍:

「部分頁面」觸發範例:

  • 觸發類型:網頁瀏覽
  • 條件:Page URL 包含 /thank-you
  • 用途:只在感謝頁面觸發 Google Ads 轉換代碼

「特定按鈕」觸發範例:

  • 觸發類型:點擊 – 所有元素
  • 條件:Click ID 等於 btn-buy
  • 用途:只追蹤特定按鈕的點擊

實務建議: 每次設定完觸發條件,一定要先用 Preview 模式驗證。我們團隊曾經遇過一個案例——觸發條件設成「Page URL 包含 thank」,結果連 /thanksgiving-sale 促銷頁面也被觸發了,導致轉換數據嚴重灌水。條件設定越精確越好。

如果你的網站有安裝 SSL 憑證(HTTPS),記得觸發條件中的 URL 也要用 HTTPS 格式,避免比對失敗。

除錯模式(Preview):發布前必做的驗證步驟

GTM 的除錯模式是我認為它最強大的功能之一。在你把代碼發布到正式網站之前,可以先在預覽環境中確認每個代碼是否正確觸發——這比直接埋碼後「盲猜」有沒有生效好太多了。

如何進入 GTM 預覽模式

  1. 在 GTM 工作區右上角,點擊「預覽」按鈕
  2. 輸入你的網站網址,點擊「Connect」
  3. 系統會開啟兩個視窗:你的網站(帶有 debug 參數)和 Tag Assistant 面板

Tag Assistant 面板的介面分為兩個區域:

  • 左側:事件列表(Container Loaded、Page View、Click 等),按時間順序排列
  • 右側:點擊任一事件後,顯示該事件觸發了哪些代碼

看懂 Tag Assistant 的三種狀態

  • Tags Fired(代碼已觸發):代碼正常運作,觸發條件符合
  • Tags Not Fired(代碼未觸發):觸發條件未符合,需要檢查設定。點擊該代碼可以看到「哪個條件沒有通過」
  • ⚠️ Tag Paused(代碼暫停):代碼被手動停用,不會觸發

新手最常犯的 3 個錯誤

錯誤一:設定完代碼後忘記「提交發布」

這是最常見的錯誤。在 GTM 裡儲存代碼只是存到草稿,你必須點擊右上角的「提交」按鈕,代碼才會真正部署到網站上。我們團隊遇過不少客戶反映「GTM 設好了但 GA4 沒資料」,十次有八次是忘了提交。

錯誤二:觸發條件設錯範圍

把應該設為「All Pages」的觸發條件設成特定頁面,或反過來。結果就是資料只有部分頁面有,或者轉換代碼在每個頁面都觸發。

錯誤三:GA4 評估 ID 填錯格式

GA4 的評估 ID 是 G- 開頭(例如 G-ABC123),Google Ads 的轉換 ID 是 AW- 開頭。兩者填反的話,代碼會觸發但資料會送到錯誤的地方。

版本控制:GTM 的隱藏安全網

每次你點擊「提交」發布代碼時,GTM 會自動建立一個版本紀錄。如果新發布的代碼出了問題,你可以在「版本」頁籤中找到上一個正常的版本,一鍵回滾。這對多人協作的行銷團隊特別重要——你永遠知道是誰、在什麼時候、改了什麼設定。

我們團隊在使用 monday.com 管理專案時,會把 GTM 的版本號和對應的行銷活動記錄在看板上,這樣每次廣告活動上線時,團隊成員都能快速對照 GTM 的設定變更。

GTM 與 WordPress.com 的整合:站長最快上手的方式

如果你是 WordPress.com 的使用者,GTM 的安裝比一般網站更簡單。但有一個前提:你必須使用商業方案(Business Plan)以上的方案,才能安裝外掛或使用進階整合功能。

以下是三種安裝方式,依簡易程度排列:

方式一(最簡單):WordPress.com 內建設定

進入 WordPress.com 後台 → 設定 → 流量 → 在「網站驗證服務」或「分析工具」區塊中,直接填入你的 GTM ID(GTM-XXXXXXX)。這是最快的方式,不需要安裝任何外掛。

方式二:Site Kit by Google 外掛

安裝 Google 官方的「Site Kit by Google」外掛,它可以一次連結 GTM、GA4、Search Console 等 Google 工具。適合想要集中管理所有 Google 服務的站長。

方式三:Insert Headers and Footers 外掛

如果你需要更精細的控制(例如在 <head><body> 分別放不同代碼),可以安裝「Insert Headers and Footers」外掛,手動將 GTM 的兩段代碼貼入對應位置。

提醒: WordPress.com 免費方案無法安裝 GTM。如果你目前使用免費方案,需要升級至商業方案。WordPress.com 的商業方案除了支援 GTM,還提供自訂域名、進階 SEO 工具等功能,對認真經營網站的站長來說是值得的投資。

(推薦試試 WordPress.com 的商業方案,我們團隊實際測試過,GTM 整合流程不到五分鐘就能完成。)

⭐ 全球逾 42% 網站都用 WordPress ⭐ 4.6 / 5

WordPress.com|從部落格到企業官網的架站首選

🎁 免費方案永久使用、不會到期——50,000+ 外掛生態系,不論部落格、品牌官網或電商都能彈性擴充
  • 🌐 全球逾 42% 網站用 WordPress——最成熟穩定的架站生態系
  • 🎨 數百種佈景主題——免費 + 付費,各行業模板都有
  • 🔌 50,000+ 外掛——SEO、電商、表單、社群整合一鍵安裝
  • 📈 從免費到企業——隨業務成長彈性升級方案

免費方案永久使用 · 不需信用卡 · 自訂網域可升級

GTM 設定完成後的下一步

當你完成上述五個標籤的安裝並通過除錯驗證後,GTM 的基礎設定就算完成了。但 GTM 的價值不只是「安裝代碼」,它真正的威力在於讓你持續優化追蹤策略。

建立追蹤文件: 把你在 GTM 中設定的所有代碼、觸發條件、變數整理成一份文件。我們團隊會用 ClickUp 建立一個專門的追蹤管理清單,記錄每個代碼的用途、觸發條件和最後更新日期。當團隊成員異動時,這份文件能確保知識不會流失。

定期檢查代碼健康度: 每季至少進入 GTM 預覽模式檢查一次,確認所有代碼都還在正常觸發。第三方工具(如 Facebook Pixel)偶爾會更新代碼格式,如果不定期檢查,可能會出現資料中斷的情況。

進階應用方向: 當你熟悉基礎操作後,可以探索更進階的功能,例如:

  • 使用資料層(Data Layer)傳遞電商交易資料
  • 設定捲動深度追蹤(了解使用者看了頁面多少內容)
  • 伺服器端代碼(Server-side Tagging)——這是 Google 近年推動的進階架構,能提升資料準確度和使用者隱私保護,適合有技術資源的團隊

如果你的網站使用 CMS 系統管理內容,GTM 的整合通常都很順暢,不需要擔心相容性問題。

結論

Google Tag Manager 是每個行銷人員都應該學會的工具。它不只是「方便」,而是讓你從依賴工程師變成自主掌控追蹤數據的關鍵轉變。

回顧本文的重點:

  • GTM 是代碼的集中管理容器,所有追蹤代碼放在一個地方,透過圖形化介面操作,不需要改網站原始碼
  • 五個必裝標籤:GA4 設定代碼、Facebook Pixel、Google Ads 轉換追蹤、Google Ads 再行銷、自訂事件追蹤——涵蓋了大多數行銷追蹤需求
  • 觸發條件是 GTM 的靈魂,設定精確的觸發條件才能確保資料品質,避免代碼亂觸發
  • 發布前一定要用預覽模式驗證,確認代碼正確觸發後再提交發布
  • WordPress.com 商業方案以上可以直接在後台整合 GTM,是非技術站長最快的上手方式

你的下一步行動: 現在就前往 tagmanager.google.com 建立你的第一個 GTM 帳號,按照本文的步驟安裝 GA4 設定代碼,用預覽模式確認代碼正常觸發後提交發布。整個過程不超過 30 分鐘。

如果你還沒有網站,或正在考慮架設新網站,WordPress.com 是我們推薦的起點——選擇商業方案,你就能同時擁有專業的網站和完整的 GTM 追蹤能力。前往 WordPress.com,選擇你喜歡的佈景主題,拖放編輯器讓你十分鐘就能看到網站雛形,不需要任何程式碼。

⭐ 全球逾 42% 網站都用 WordPress ⭐ 4.6 / 5

WordPress.com|從部落格到企業官網的架站首選

🎁 免費方案永久使用、不會到期——50,000+ 外掛生態系,不論部落格、品牌官網或電商都能彈性擴充
  • 🌐 全球逾 42% 網站用 WordPress——最成熟穩定的架站生態系
  • 🎨 數百種佈景主題——免費 + 付費,各行業模板都有
  • 🔌 50,000+ 外掛——SEO、電商、表單、社群整合一鍵安裝
  • 📈 從免費到企業——隨業務成長彈性升級方案

免費方案永久使用 · 不需信用卡 · 自訂網域可升級

Google Tag Manager 常見問題

Google Tag Manager 和 GA4 有什麼差別?

GTM 是「容器」,負責管理和發送各種追蹤代碼;GA4 是「分析工具」,負責接收和分析資料。簡單來說,GTM 是送信的郵差,GA4 是收信的信箱。兩者需要搭配使用——你透過 GTM 安裝 GA4 的追蹤代碼,GA4 才能開始收集數據。

GTM 是免費的嗎?

是的,Google Tag Manager 對一般網站完全免費,沒有代碼數量或流量限制。企業版(GTM 360)才需要付費,適合每月數十億次代碼觸發的大型企業,一般中小型網站不需要考慮。

一個網站可以裝多個 GTM 容器嗎?

技術上可以,但強烈不建議。多個容器可能造成代碼重複觸發(例如 GA4 的瀏覽量被計算兩次),也會增加管理複雜度。建議一個網站只用一個容器,如果有多個網站,每個網站各自建立一個容器,放在同一個帳號下管理。

GTM 設定好了,GA4 還是沒有資料怎麼辦?

最常見的三個原因:① 代碼只存在草稿,忘記點「提交」發布 ② GA4 評估 ID 填錯(確認是 G- 開頭,不是 AW-)③ 瀏覽器的廣告封鎖器(如 uBlock Origin)擋住了追蹤代碼。先用 Tag Assistant 預覽模式確認代碼狀態,如果顯示 Tags Fired 但 GA4 仍無資料,等待 24-48 小時讓資料處理完成。

GTM 會影響網站速度嗎?

GTM 本身採非同步載入(async),對網站速度影響極小。但如果你在 GTM 內安裝了過多低品質的第三方代碼(例如多個聊天機器人、彈出視窗工具),這些代碼本身會拖慢網站載入速度。建議定期檢視容器內的代碼,移除不再使用的標籤。

GTM 可以用在手機 App 嗎?

可以。GTM 支援行動 App 的代碼管理,但需要透過 Firebase SDK 整合,設定方式與網頁版不同。如果你有 App 追蹤需求,建議參考 Google 官方的 Firebase 整合文件。

更多精彩內容

WordPress.com
用 WordPress.com 免費建立你的網站
拖拉式編輯 · 數千款主題 · SEO 工具 · 免費方案