Google Tag Manager 新手教學:從 0 到「 有資料 」一次搞定!

Google Tag Manager 新手教學:GTM 從 0 到「 有資料 」一次搞定!

Google Tag Manager(GTM)是一套 Google 提供的免費的代碼管理工具,讓網站管理員和行銷人員不需修改網站程式碼,也能把 GA4Google Ads、Meta Pixel 這些追蹤代碼集中管理、快速上線。

但新手設定 GTM 最常遇到的是明明照著步驟做,最後卻沒有裝成功、事件沒有送出去,或在 GA4 看不到資料。越急著把東西丟上去,越容易在後面除錯時花更多時間。

這篇文章會用新手的角度教學,帶你從 0 開始把 GTM 建立好、設定好、測試完畢,最後讓你真的「 收得到資料 」,而不是有裝就好:)


Google Tag Manager 是什麼?它可以幫你什麼?

在數位行銷的世界裡,數據追蹤是優化的基礎。Google Tag Manager(GTM)的出現,讓行銷人員能更自主、更有效率的管理追蹤標籤。

Google Tag Manager 是什麼?

Google Tag Manager(Google 代碼管理工具)是一個免費的標籤管理系統(TMS)。簡單來說,它就像是網站與各類追蹤工具之間的「 中控室 」。

在沒有 GTM 的年代,行銷人員若想追蹤官網上的某個按鈕點擊,必須請工程師在網站原始碼中手動插入一段 JavaScript。

現在只需要在網站上安裝一段 GTM 容器碼之後所有的追蹤代碼(例如:GA4 事件、Meta 廣告轉換LINE Tag 等)都可以直接在 GTM 的後台操作完成,不需要重複改網站原始碼。

GTM 可以幫你什麼?

GTM 可集中管理追蹤代碼、即時預覽除錯與版本還原,幫助網站更有效率管理標籤
GTM 可集中管理追蹤代碼、即時預覽除錯與版本還原,幫助網站更有效率管理標籤
  • 擺脫對工程師依賴設定追蹤事件不再需要排隊等工程師的開發時程。
  • 集中管理所有代碼一眼看出網站裝哪些追蹤工具,避免代碼重複安裝導致速度變慢。
  • 即時預覽與除錯提供「 預覽模式 」,可以在正式發布前,先測試代碼是否觸發。
  • 版本紀錄與還原萬一設定錯誤,可以一鍵還原先前版本,大幅降低網站出錯的風險。

GTM 要設定好,3 件事先規劃

在正式進入後台操作前,請務必先完成以下三項規劃:

一、把「 事件 」整理成表格

不要邊想邊設定!先用 Google Sheet 整理出一份「 追蹤清單 」,這能確保你的數據邏輯一致,未來交接或維護時也會非常輕鬆。

例如表格可以包含以下欄位:

追蹤項目
Item
追蹤事件
Event
數據平台
(舉例)
Destination
事件名稱
(舉例)
Event Name
觸發條件
Trigger
商品頁頁面瀏覽
Page View
GA4、Meta PixelGA_商品頁_PageView頁面連結包含 contact/
聯絡我們提交按鈕表單提交
Submit
GA4、Google AdsGD_聯絡我們_Submit表單成功送出頁面
加入購物車按鈕點擊
Click
GA4、Meta PixelMeta_加入購物車_Click按鈕文字包含「 加入購物車 」

二、常用代碼模組化

當網站規模變大時,隨便命名會讓你找不到東西。建議採用模組化的邏輯來設定:

  • 固定命名規則例如「 平台_追蹤項目_事件動作 」就會是「 GA_商品頁_PageView 」或「 Meta_加入購物車_Click 」。
  • 重複事件共用一套觸發條件如果 GA4 與 Meta 都要追蹤同一個按鈕點擊,建議建立一個通用的「 觸發條件(Trigger)」,同時套用到這兩個代碼中。這樣未來修改條件時,只需要改 Trigger 就好。

三、在 GTM 設定卡關,找專業會更快

雖然 GTM 簡化了埋碼流程,但面對複雜又多樣的數據時,仍具備一定的技術門檻。例如:有些表單點擊按鈕後網址不會改變,或者按鈕沒有明確的 ID,導致無法抓取真正的諮詢行為。

如果收集的數據不精準,就可能無法判斷是否有潛在客戶與轉換,進而導致 SEO 策略失焦。

犬哥網站 SEO 案例——「 室內設計公司 」 網站諮詢數量穩定成長中,多組產業相關關鍵字進入 Google 第一頁
犬哥網站 SEO 案例——「 室內設計公司 」
網站諮詢數量穩定成長中,多組產業相關關鍵字進入 Google 第一頁

以犬哥網站協助的「 室內設計品牌 」為例,該產業的客單價高,比起單純的流量,我們更看重「 諮詢轉換率 」,因此我們從兩大核心下手:

  • 準確佈局諮詢動作透過 GTM 埋設「 提交表單按鈕 」的觸發事件,確保每一筆從搜尋進來的潛在屋主,只要完成諮詢預約,都能被正確記錄。
  • 數據出發的內容策略追蹤數據後,我們分析出哪些高品質流量最容易轉化為實際諮詢,進而優化「 台北室內裝修 」等商業意圖極強的關鍵字排名。

做好 GTM 追蹤,你才有「 足夠且正確 」的數據來優化轉化率。最終成效非常明顯,該品牌不僅多項重點關鍵字排名第一頁,網站的實際諮詢數量也持續穩定成長

如果你也希望網站不只是有流量,更能透過正確追蹤與 SEO 策略,將進站的潛在客戶轉化為真正的客戶,歡迎與我們聊聊 SEO 行銷服務:)


開始設定 GTM 前先準備好 3 件事

進入 GTM 後台設定前,有幾件「 基礎建設 」必須先搞定。

這不僅能省下後續除錯的時間,還能確保數據從第一天開始完整搜集且有意義,避免因為設定失誤,最終行銷決策方向走偏。

Google Tag Manager 設定前先確認三件事,包括網站存取權、追蹤項目與平台內建串接
Google Tag Manager 設定前先確認三件事,包括網站存取權、追蹤項目與平台內建串接

一、網站程式碼的存取權

GTM 的運作原理,是在網站中植入一段「 容器代碼 」。雖然安裝完這段代碼後,後續新增追蹤碼就不太需要再動到程式,但「 第一次的安裝 」非常重要。

在開始之前,請確認你有以下其中一種權限:

  • 網站後台管理權限例如 WordPress 的管理員帳號(可透過外掛安裝)。
  • FTP 或原始碼修改權限如果是自架站,你需要能直接編輯 HTML 檔案。
  • 工程師的支援如果網站是委外開發,請確保你能聯繫上對方的技術團隊,並請他們協助將 GTM 提供的兩段程式碼分別放置在網頁的 <head> 與 <body> 標籤中。

二、想清楚要追蹤什麼

「 追蹤越多數據越好 」是一個常見的迷思,但雜亂無章的數據只會干擾你的判斷。在動手設定前,請先回頭看看你的商業目標:

  • 你的官網是為了銷售嗎?那麼建議你該優先追蹤「 加入購物車 」與「 購買完成 」。
  • 你的網站是為了獲取潛在客戶嗎?那麼「 諮詢表單提交 」與「 點擊 Line 按鈕 」可能才是核心指標。

這就是為什麼我們在前一章強調「 整理事件表格 」的重要性。清楚的目標能讓 GTM 的容器保持乾淨,也能讓你後續在看 GA4 報表時,一看就抓到重點。

三、平台是否有內建串接

現在許多網站系統(如 Shopify、SHOPLINE、Wix 或 WordPress 的特定外掛)都已經內建了 GA4 或廣告代碼的串接功能。

在開始透過 GTM 設定之前,請務必先做以下檢查:

  • 避免重複安裝(Double Tagging)如果你已經在現成平台填入了 GA4 的追蹤 ID,又在 GTM 裡設定了一次 GA4 事件,這會導致數據重複計算(例如一個使用者進站,報表卻顯示兩次)。
  • 統一管理邏輯通常建議「 全站一致 」。如果你決定使用 GTM 來管理所有標籤,建議關閉平台內建的簡易串接功能,統一由 GTM 發送數據,這樣邏輯才不會打架。

第一步|建立 GTM 帳戶與容器

在開始追蹤數據前,我們要先在 Google Tag Manager 中建立一個專屬「 空間 」。

GTM 的結構分為兩層:帳戶(Account)通常代表公司或品牌,而容器(Container)則代表該公司或品牌旗下的某個網站或行動應用程式。

設定步驟

第一步、建立 GTM 帳戶與容器(帳戶名稱、國家 / 地區、容器名稱)
第一步、建立 GTM 帳戶與容器(帳戶名稱、國家 / 地區、容器名稱)
  1. 進入 GTM 首頁:前往 Google Tag Manager 並登入你的 Google 帳號。
    1. 建立帳戶:點擊「 建立帳戶 」按鈕。
    2. 帳戶名稱:輸入公司名稱(例如:犬哥網站)。
  2. 國家 / 地區:選擇台灣。
  3. 設定容器:
    1. 容器名稱:輸入你的網站網址(例如:www.example.com)。
    2. 目標平台:針對一般網站,請選擇 「網頁(Web)」。
  4. 同意條款:
第一步、建立 GTM 帳戶與容器(同意條款)
第一步、建立 GTM 帳戶與容器(同意條款)
  1. 點擊「 建立 」。
  2. 滑到最底部,勾選「 我也接受 GDPR 所要求的《資料處理條款》。」。
  3. 點擊右上角「 是 」。

第二步|安裝網站容器

帳戶建立完成後,系統會跳出兩段 JavaScript 程式碼。這就是 GTM 的「 大腦 」,必須正確把它們放置在網站的每一頁,GTM 才能開始運作。

安裝規範

第二步、安裝網站容器
第二步、安裝網站容器
  1. 複製第一段程式碼:這段程式碼包含  <script> 標籤。
    • 放置位置: 貼在網站每個頁面的 <head> 區塊中,且愈高愈好(建議放在 <meta> 標籤之後)。
  2. 複製第二段程式碼:這段程式碼包含 標籤。
    • 放置位置: 貼在網站每個頁面正後方的 <body> 起始標籤處。
  3. 驗證安裝:安裝完成後,你會在 GTM 介面右上角看到 GTM-XXXXXX 的容器 ID。

第三步|在 GTM 中新增代碼

容器裝好後,我們需要新增「 代碼(Tag)」來告訴 GTM 該抓取什麼數據。一個基本的代碼設定由兩個要素組成:代碼配置(要做什麼)觸發條件(什麼時候做)

操作流程

第三步、在 GTM 中新增代碼(設定代碼)
第三步、在 GTM 中新增代碼(設定代碼)
  1. 新增代碼:在工作區點擊「 代碼 」,點擊右上角「 新增 」。
  2. 代碼配置:點擊方框選擇代碼類型(例如:「 Google Analytics 」>「 Google Analytics:GA4 設定 」)。

小提醒:GA4 評估 ID 可在 GA「 管理 」>「 資料收集和修改 」下方,點選「 資料串流 」,選取「 網站 」分頁標籤,按一下網站資料串流,在串流詳細資料的第一列找出評估 ID。

第三步、在 GTM 中新增代碼(設定觸發條件、命名代碼)
第三步、在 GTM 中新增代碼(設定觸發條件、命名代碼)
  1. 設定觸發條件:點擊下方的「 觸發條件 」方框。(若要追蹤全站流量,請選擇 「 Initialization – All Pages 」 或 「 All Pages 」。)
  2. 命名並儲存:依照我們之前提到的模組化命名規則(如:GA_全站_PageView)並存檔。

第四步|容器預覽及偵錯

這是最重要的一步。在正式發布前,我們可以使用 GTM 的「 預覽模式(Tag Assistant)」來模擬使用者行為,確認代碼是否有正確觸發。

偵錯步驟

第四步、容器預覽及偵錯(開啟 Tag Assistant 預覽模式)
第四步、容器預覽及偵錯(開啟 Tag Assistant 預覽模式)
  1. 工作區變更數:在發布前,系統會顯示容器中是否有未儲存的變更。
  2. 開啟預覽:點擊工作區右上角的「 預覽 」按鈕。
  3. 輸入網址:輸入你要測試的網站網址,並點擊「 連結 」,成功連線會後跳出該網站的測試視窗。回到「 Tag Assistant 」視窗,點擊「 繼續 」。
第四步、容器預覽及偵錯(測試代碼是否觸發)
第四步、容器預覽及偵錯(測試代碼是否觸發)
  1. 觀察 Tag Assistant 視窗:「 已觸發的代碼 」是成功觸發的代碼會出現在這裡。「 未觸發的代碼 」是尚未觸發的代碼。
  2. 模擬操作:以上圖 STEP 8「 GA4 / 全站頁面_捲動 」為例,在測試視窗的網站捲動頁面後,回到 Tag Assistant 會發現該代碼已從「 未觸發 」跳到了「 已觸發 」。

第五步|提交及發布代碼

在 GTM 中點擊「 儲存 」並不代表代碼已經在網站上生效,必須經過「 提交 」與「 發布 」兩個動作。

驗證要點

第五步、提交及發布代碼
第五步、提交及發布代碼
  1. 發布變更:點擊右上角的「 提交 」按鈕。
  2. 版本說明:系統會要求輸入「 版本名稱 」與「 版本說明 」。
    • 建議:務必將「 版本名稱 」填寫清楚,例如「 2026/01/16 新增全站瀏覽回傳 GA4 」,方便未來回顧。
  3. 正式上線:點擊「 發布 」,變更才會真正作用於你的網站。

第六步|版本和核准

當網站規模變大或由多人管理時,「 版本控制 」就變得格外重要。GTM 會自動記錄每一次的發布歷史,這讓多人協作變得更安全,當錯誤時,還原也更快速。

  • 版本(Versions):每當你發布一次容器,GTM 就會生成一個版本。如果發現新版設定錯誤,你可以隨時點開舊版本並點選「 恢復 」,一鍵還原。
  • 核准流程(Approvals):在企業級別的帳號中,你可以設定「編輯」與「發布」權限分離。
    • 行銷人員負責「 編輯 」代碼。
    • 管理員負責「 核准 」並正式發布,確保所有設定符合公司規範。
  • 工作區管理:如果同時有不同專案在進行,可以建立不同的「 工作區(Workspaces)」,避免彼此的變更互相干擾。

為什麼 GTM 設定好,還是沒資料?

設定完所有代碼,打開 GA4 報表卻發現數據依然是零?數據沒進來通常不是因為工具壞了,可能是代碼沒被觸發、觸發條件太嚴苛,或者是你根本忘了點擊最後那個發布按鈕。

用 Tag Assistant 排除問題

Google 官方提供的 Tag Assistant 是目前檢測 GTM 問題的很好用的工具,它能讓你用「 虛擬模式 」進入網站,即時查看代碼的運作狀態。

操作與檢測邏輯:

  1. 開啟預覽:點擊工作區右上角的「 預覽 」,輸入網址並連線。
  2. 檢查連線狀態:確保視窗右下角顯示「 已連線 」。如果連不上,通常是網站沒裝好 GTM 代碼。
  3. 觀察左側事件列:當你在網站點擊按鈕或滾動時,左側會出現 Click(點擊)、Scroll(捲動)等事件。點擊這些事件,看右側的代碼顯示:
    • 已觸發的代碼:成功發送的數據。
    • 未觸發的代碼:沒被發送的數據。
  4. 點進「 未觸發的代碼 」代碼查看原因:Tag Assistant 會告訴你觸發條件(Trigger)中,哪一個條件顯示為「 紅叉叉(False)」。這就是你設定邏輯出錯的地方。

新手最常犯的 6 個錯誤

如果你在 Tag Assistant 裡看起來一切正常,但報表還是沒資料,請檢查以下這六個「 隱形兇手 」:

  1. 忘記點擊「 發布 」 最經典的錯誤!在 GTM 點擊儲存並不等於生效,你必須點擊右上角的「 提交 」並「 發布 」,變更才會在正式網站運作。
  2. 代碼中的 ID 填錯 例如 GA4 的「 評估 ID 」複製錯了一個字,數據就會被傳送到別人的家。
  3. 觸發條件(Trigger)過於嚴苛 例如你設定「 按鈕文字 」必須「 等於 」聯絡我們,但網站上其實是「 聯絡我們!」就不會觸發。建議多使用「 包含 」來增加彈性。
  4. 網站漏裝了 GTM 容器 ID 有些網站有分行動版與桌面版,或者有多個子網域。請確保每一頁的 <head> 與 <body> 都正確植入了代碼。
  5. 預覽模式的數據過濾 有些公司會設定「過濾內部 IP」,導致你在辦公室怎麼測試,GA4 都會自動過濾掉你的行為。
  6. 廣告攔截器(AdBlocker)影響 如果你或使用者的瀏覽器裝了 AdBlock 等外掛,它可能會直接擋掉 GTM 或 GA4 的腳本,導致數據無法送出。

常見問題

Google Tag Manager 和 GA4 有什麼差別?

GTM 負責送資料,GA4 負責看資料。 GTM 本身不會產生報表,它只是把事件送到 GA4、Google Ads 等工具。

我已經照教學設定 GTM,為什麼 GA4 還是沒資料?

最常見原因有三個:

・GTM 容器其實沒裝成功
・標籤有建,但沒有被觸發
・事件有送,但送到錯的 GA4 設定

建議第一步先用「 預覽 」+「 Tag Assistant 」確認事件是否真的送出。

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

技術上可以,但不建議。

多個 GTM 容器容易導致事件重複送出、數據混亂,除非有非常明確的管理規劃。


聯絡犬哥網站

在網站架設+網路行銷的過程中,或許會遇到一些解決不了問題,可以在下方留言給我,我會盡力協助解答!

接下來,額外分享 2 個實用資源,可有效幫助大家解決問題。

資源一:犬哥網站(專業 WordPress 網頁設計&數位行銷公司)

如果你沒時間自己架站,或是遇到網站沒有流量、Google 網站排名不理想。歡迎洽詢 犬哥網站(WordPress 網頁設計&數位行銷公司),請專家協助你會更容易!

我們有多年網頁設計、SEO 關鍵字行銷、Google 廣告投放經驗,加上上百個實戰案例,絕對能滿足您的需求!

犬哥網站|網頁設計&數位行銷公司
犬哥網站|網頁設計&數位行銷公司

資源二:WordPress 高手架站課+SEO 排名飆升課(線上課程)

如果想學習更深入的 WordPress 架站技巧,或是想透過 SEO 關鍵字提升網站流量?

可以參考犬哥近期推出的這兩門課程,課程非常的扎實,都是犬哥自己實戰出來的經驗分享,不打高空只教你做出成績!

WordPress 高手架站課&SEO 排名飆升課
WordPress 高手架站課&SEO 排名飆升課
  • WordPress 高手架站課
    從網頁設計觀念、WordPress / WooCommerce 後台操作、熱門主題.外掛教學、品牌網站 / 部落格 / 電商網站,3 大類型網站建置方法等豐富內容,一次教會你。
    課程內容非常的紮實(長度超過 20 小時)。如果你剛學習自架網站,這門課程可以讓你用最快的速度,就學會這項技能!
  • SEO 排名飆升課
    教你掌握關鍵字策略、SEO 文章撰寫、多種實戰 SEO 技巧、透視對手 SEO 策略、SEO 必備軟體教學、最新 AI SEO 應用等,大幅提升行銷能力。
    帶你衝上 Google 排名第一頁,大量提升網站營收和訂單!

關於作者

犬哥網站:網頁設計 x 網路行銷教學平台

犬哥網站

我們分享 WordPress 架站 x 網路行銷知識,不需會任何程式技術,就能自己建立各種網站。 搭配豐富的網路行銷教學,幫助你被更多人看到。 趕快跟著我們的腳步,開始學習吧:)

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

返回頂端