網站優化

GTM教學-新手觀念篇，追蹤網站數據你只需Google Tag Manager代碼

2020-03-19 約 18 分鐘閱讀 Jordan Huang 黃泓維

AI 摘要約 19 分鐘閱讀

Google Tag Manager (GTM) 是免費的代碼管理系統，讓行銷人員無需懂程式碼就能輕鬆追蹤網站數據、管理廣告轉換追蹤及第三方工具。文章詳細介紹 GTM 的用法、安裝步驟及核心優勢，適合新手快速上手。

重點整理

GTM 整合網站事件追蹤、廣告轉換追蹤與臉書 Pixel，讓行銷人員在同一平台管理所有追蹤代碼。
GTM 不直接寫入網頁 HTML，故不拖累網站速度，並提供預覽和版本控制功能降低出錯風險。
WordPress 網站可透過 Site Kit by Google 外掛最簡單地安裝 GTM，完全無需接觸程式碼。

本摘要由 AI 自動生成 · Powered by Digit Spark AI

想追蹤網站的數據和流量，但卻不知道如何下手嗎？那 Google Tag Manager （簡稱為GTM）將成為你的救星！我們將在這篇 GTM 教學中，以自身 SEO 實戰經驗，教導你如何輕鬆安裝和設定 GTM，同時釐清新手最容易搞不清楚的GTM 觸發條件、代碼及變數…等概念，讓行銷人員從此不用再仰賴工程師埋 Code，也能輕鬆管理和追蹤數據。

GTM（Google Tag Manager，代碼管理工具）是什麼？
GTM 是 Google 官方免費的「代碼管理」工具，讓行銷人不用每次都找工程師改網站原始碼，就能自行安裝與管理各種追蹤代碼（如 GA4、Google Ads、Meta Pixel）。它的運作建立在三個元素上——觸發條件（Trigger）決定「什麼時候」執行、代碼（Tag）決定「要做什麼」、變數（Variable）提供「需要的資料」。只要在網站埋一次 GTM 容器代碼，之後所有追蹤都能在 GTM 後台線上調整、即時上線。

GTM 運作流程：觸發條件（Trigger）→ 代碼（Tag）→ 變數（Variable）→ 資料送往各行銷平台

Table of Contents

GTM是什麼？

Google 代碼管理工具（Google Tag Manager, 以下簡稱 GTM）是一套代碼管理系統 (TMS)。在安裝完成後，網站分析師與行銷人員不用更改網站的程式碼，透過 GTM 即能輕易地將各種追蹤程式碼以及第三方應用工具安裝到網站中，讓追蹤和管理都在同一個平台完成。

如果你對於 GTM 已經有一定的了解，可以跳到後半部的埋設代碼實戰。我們將一步一步帶你教你如何用 GTM 來開啟GA Pageview 功能。

｜GTM能整合追蹤程式碼以及第三方應用工具到網站當中

GTM的3大用法

GTM 的整合功能相當強大，我們列出最常被行銷人員使用的三個大項目。

網站事件追蹤，揭開瀏覽行為面紗

透過串接Google Analytics，GTM 網站事件追蹤功能可以揭密瀏覽者在頁面上的真實使用（互動）情況，例如在 GA 的網站內容報表當中，你的平均網頁停留時間為五分鐘，但使用者確實有把文章讀完嗎？我們能用 GTM 的事件追蹤，在不用更改網站後台的情況下，追蹤使用者捲動網頁的百分比。

此外，填寫表單和點擊諮詢按鈕是名單型產業的重要轉單指標，我們也能使用 GTM 的按鈕追蹤來蒐集網站的事件，並在 Google Analytics 客戶開發的報表中，交叉比對出轉換最高的頁面。

若對於 Goolge Aanlytics 還不熟悉，稍後可以閱讀我們的 Google Analytics教學。你現在只需要先知道，GTM 能夠讓 GA 追蹤的數據更多元且真實。

再行銷 Retargeting，輕鬆串接轉換 ID

有在投放 Google 關鍵字和 GDN 廣告 (Google Display Network，多媒體廣告聯播網) 的人對於再行銷不陌生，當我們在 Google Ads 完成設定後，通常會需要將代碼埋到網站。此時我們便可用 GTM 來安裝 Google Ads 轉換追蹤代碼，只需填寫好轉換ID，再行銷就完成綁定了！

｜Google Ads 轉換追蹤代碼能以三種方式來埋設｜Google 代碼管理工具是最簡單輕鬆的方法你還沒接觸過Google廣告投放嗎？我們完整的Google adwords教學非常適合新手來閱讀。

臉書廣告投放，埋 FB Pixel 不用會寫程式碼

投放臉書廣告前，必須在網站程式碼中插入一段 FB Pixel，FB 廣告後台方能監控受眾和你網站的互動。但若有GTM的幫忙，一切手續都能在三分鐘內完成，只需完成代碼和觸發條件的設定，臉書廣告就能跑起來了！如對於臉書廣告投放不熟悉，Facebook Pixel完整教學用淺白的用語教你臉書廣告如何運行和操作。

GTM帶來的好處有哪些？

如上圖所示，GTM 對於不會寫程式碼的人來說，是相當好用的工具。但我們仍然建議不管是工程師和還是懂得寫程式碼的行銷人員，都以 GTM 作為代碼管理工具，為什麼呢？原因有三：

GTM 簡化置入流程

簡單來說，GTM就如大腦總管一樣，讓我們輕鬆管理Google Analytics、Google AdWords、Facebook Pixel 或其他第三方工具等，整合眾多追蹤代碼於一個平台，再將統整好的資訊傳送到你的網站，省去我們需要花時間將許多埋追蹤碼放到網站後台的成本，大大的簡化置入流程。

GTM能提升網站載入速度

Google 已表明網站速度是其演算法對頁面進行排名的訊號之一。也就是說，網站載入速度越快，對於排名越有優勢。然而，過往為了追蹤網站的資料，會在網頁中加入大量程式碼，如此過多的 JavaScript 程式碼不但將拖累網站速度，影響 SEO 成效，嚴重的話甚至會導致伺服器超載。但透過 GTM 埋設的代碼不同，它們實際上並不會被寫入網頁的HTML 當中，因此不會拖累網站載入速度。

GTM減少埋設程式碼的出錯機會

若在網站檔案中直接加入追蹤碼，不管是FB Pixel、Google Analytics、還是網站事件追蹤，都需要在網站發布後才能檢驗是否成功，但 GTM 有提供預覽功能，能在代碼發布之前事先偵錯，讓行銷人員檢視哪些代碼因為錯誤而沒被啟用，並立即調整。

同時，GTM 是以版本來做紀錄，每次更新的代碼都會產生新的版本，若其中有任何環節出錯，還能還原當初的版本。

GTM如何安裝？

首先，讓我們先新增GTM帳戶。若你已經完成了GTM的安裝，可以直接到到代碼、觸發條件、以及變數的設置。

步驟一、完成 GTM 帳戶和容器的填寫

帳戶 (Account)：簡單來說，你的公司或網站名稱就是一個帳戶。帳戶是 GTM 中最高的主要層級，一個帳戶可以用來管理一個或多個網站。

容器(Container)：容器可以理解成「你擁有的網站」。每個帳戶裡面至少會有一個容器，用來裝載代碼標籤 (Tag) 與觸發條件 (Trigger)。而一個容器會對應一個網域，容器之間彼此獨立。

步驟二、將 GTM 程式碼貼到網頁當中

輸入好資訊後，勾選接受服務條款，就會進到安裝 Google 代碼管理工具的介面。你需要將程式碼貼到網站的<head>與<body>中，即可完成GTM的設置。此時，你可以將資料傳給工程師，或者跟著我們的步驟，簡單的將其置入到網站當中，這將是本次 Google tag manager 教學當中唯一需要碰到程式碼的地方，不過因為相當簡單且實用，希望各位都能學起來，以下我們將以Wordpress 網站為例安裝 GTM。

步驟三、Wordpress 如何安裝 GTM？

在 WordPress 後台，「外觀」下的「佈景主題編輯器」是存放你當前網站佈景主體設計的地方，在這裡做得變動會反映在全站上。我們在右邊欄位找到佈景主題頁首 (header.php) ，將 GTM 的程式碼按照指示插入即可，第一段程式碼需要安插到 <head> 當中，另一段則必須放到 <body> 的正下方，最後按更新檔案，即完成了 GTM 的安裝。

步驟四、怎麼確保 GTM 安裝成功？

這是最後也是最重要的步驟，我們不希望看到明明已經在 GTM 上進行操作了，但實際上 GTM 卻沒安裝成功的狀況發生。因此，強烈建議安裝 Chrome 外掛 Tag Assistant (by Google)，它可驗證你是否已在網頁上正確安裝了各種Google 標籤，例如：Google Analytics、Adwords Conversion Tracking、Google Tag Manager。安裝完後啟動，並比對外掛顯示的 GTM 標籤(Web Property ID)是否和你安裝的 GTM 相符（從 GTM 介面的右上角檢視）。

【更新】GTM 最簡單安裝方法

如果你的網站是 WordPress，那你可以事先安裝Google推出的外掛Site Kit by Google，是一個資訊服務整合外掛，涵蓋了 Search Console、Google Analytics、PageSpeed Insights、Google Tag Manager 和 AdSense，能將其資訊直接統整到 WP 後台。 gtm ｜照著指示操作即可完成 GTM 安裝，不需要動到後台程式碼，超簡單又超輕鬆！ ｜完成安裝後，該項目應該顯示為 connected 最重要的是，Site Kit by Google 還能幫你的網站安裝以上的應用工具，只需照著螢幕指示，點擊滑鼠就能完成，讓安裝 GTM 完全不需要動到程式碼（前提是要先完成Search Console和Google Analytics的整合，才能接著安裝GTM）。

GTM 介面說明

在操作GTM前，我們先了解其介面設計，主要分成四個區域。

1. 管理區

若要新增容器使用者、更改帳戶容器設定，或者提交新的版本都在此進行。

2. 功能區

代碼 (Tag)、觸發條件 (Trigger)、變數 (Variabel) 就是在此設定。我們稍後會有更詳盡的解釋。

3. 工作區

這邊會紀錄是哪位使用者新增或變更了哪些代碼。

4. 版本區

會顯示最新的版本和發布時間。在提交的代碼後，就會生成一個新的版本，而以往舊的版本和活動紀錄都可在這區找到，若有發生埋設代碼出錯，也能在此還原舊版本設定。

GTM 元素組成架構

在 GTM 左半邊的功能區，就是我們主要埋設追蹤會用到項目。整體架構除了帳戶 (Account) 和容器 (Container) 之外，我們必須先了解代碼 (Tag)、觸發條件 (Trigger)、變數 ( Variable) 是什麼。乍看之下有點摸不著頭緒，但我們能把他們理解成前因後果的關係。基礎網站設置有：

▶ 帳戶 (Account)：公司或網站名稱就是一個帳戶

▶ 容器 (Container)：擁有的網站追蹤程式碼 & 第三方應用工具埋設需要：

▶ 代碼 (Tag)：即為追蹤事件的程式碼片段，如 GA、Facebook Pixel

▶ 觸發條件 (Trigger)：觸發條件具體定義出代碼如何被觸發

▶ 變數 (Variable)：變數是觸發條件的一環，定義觸發條件的執行準則例如，我們想要在 GA 追蹤瀏覽者在特定頁面的捲動頁數是否達 75%以上，於是：

▶ 帳戶 (Account)：集客數據行銷

▶ 容器 (Container)：https://inboundmarketing.com.tw/

▶ 代碼 (Tag)：Google 代碼（GA4）程式碼片段

▶ 觸發條件 (Trigger)：在特定頁面的捲動深度需要高於75%

▶ 變數 (Variable)：以「Page URL」這個變數指定出觸發條件中的特定觀察頁面

代碼 Tag

即為追蹤事件的程式碼片段，如 Google Analytics、Google Ads (以前的 Google AdWords)，其中 FB Pixel 則是透過自定程式碼來嵌入。在教學的最開始，我們說 GTM 是一套代碼管理系統 (TMS)，能輕易地將各種追蹤程式碼以及第三方應用工具安裝到網站中。而代碼就是追蹤程式碼和第三方應用工具提供的 Javascript 程式碼片段。也就是說，我們能把代碼當成分流器，希望用哪個行銷工具來分析和收集數據，就把其設定為代碼。

觸發條件 Trigger

觸發條件具體定義出代碼如何被觸發，當中觸發條件是由變數 (Variables)、運算符號 (Operators) 與值 (Values) 所組成。其中觸發條件類型 (Trigger types) 當中有許多選擇，例如：網頁瀏覽、網頁點擊、網頁元素可見度、網頁表單提交、網頁捲動頁數、網頁YouTube影片、自訂觸發事件等，更多觸發條件類型可以參考Google官方說明。至於要類型選擇哪一項，則因你想要追蹤的代碼是什麼而異，以下簡單說明：

網頁瀏覽：使用者是否有瀏覽特定頁面
網頁點擊：使用者是否有點擊特別欄位按鈕，例如：致電詢問、CTA (Call-To-Action)
網頁YouTube影片：影片是否有被播放、播放進度、是否有跳轉
網頁元素可見度：通常用來追蹤表單提交和頁面特定元素的曝光與否
網頁表單提交：同樣可拿來追蹤表單的提交狀況
網頁捲動頁數：觀察使用者的瀏覽深度

例如於我們想追蹤捲動深度，可以參照以上「網頁捲動頁數」設定，作為觸發條件

觸發條件類型 (Trigger types)：選擇捲動頁數
附加條件：垂直捲動頁數達 75% 以上
啟用這項觸發條件的時機：視窗載入 (更多時機解釋請參考Google說明)
變數 (Variables)：網頁網址 (Page URL)
運算符號 (Operators）：等於
值 (Values)：www.learnGTM.com/topic

變數 Variable

簡單來說，變數定義觸發條件的執行準則，列出哪些網頁特質會啟動代碼。以我們的例子來說，就是當瀏覽者載入特定頁面後代碼會被觸發，當中的特定頁面就是我們要指定的，可以用網頁網址 (Page URL) 作為變數。其餘變數還包含：點擊元素 (Click Element)、點擊類別 (Click Classes)、點擊 ID (Click ID)、點擊目標 (Click Target)…等。有沒有覺得點擊類別 (Click Classes) 和點擊 ID (Click ID) 相當眼熟呢？其實類別跟 ID 就是我們常附加在 HTML 當中的屬性，就像把程式碼分門歸類（即是類別），並給予身分證（ID）。例如在上圖的範例當中，「什麼是 SEO」的標題有類別 (class) 為 “ez-toc-section” 和 ID 為 “_SEO”。

而我們就可以觀察在網頁當中的區塊、段落、或者物件，是否具有類別和ID，如此便能夠做為設置的變數。Click Target （點擊目標）、Click URL （點擊網址）、Click Text （點擊文字）一樣能在HTML當中找到。

如果我們要追蹤的事件是獨一無二的，就需確保該變數在當前頁面不重複即可，這樣的話選擇哪一個變數都沒有差別。（若變數類型的值重複了，可能會導致代碼被重複觸發，因而讓數據失準）。最後，在 GTM 預設的變數當中，只有網頁其下的項目會被勾選，使用者可以依據選定的觸發條件來開啟變數類型，例如若想追蹤網頁 YouTube 影片的觀看，通常會將影片類型變數開啟，而若是想追蹤表單提交，則會勾選表單類型。以上的內建變數若無法滿足需求，也可以新增自定義變數。除此之外，更多的變數類型請參閱更多 GTM 內建變數資訊。

GTM 核心小總結：代碼、觸發條件、變數

文章最後，再讓我們複習一次 GTM 的元素架構：

1、代碼 (Tag)：即為追蹤事件的程式碼片段，如 GA、Facebook Pixel。 2、觸發條件 (Trigger)：觸發條件具體定義出代碼如何被觸發。 3、變數 (Variable)：變數是觸發條件的一環，定義觸發條件的執行準則。

GTM 追蹤數據不能不知道：

1、GTM 來設置追蹤程式碼和整合第三方應用工具，需要同時包含代碼 (Tag)、觸發條件 (Trigger)、變數 (Variable)。

2、其中代碼 (Tag) 可以是 GA 追蹤碼、Google Ads 再行銷、或自訂程式碼 HTML（例如：FB Pixel），而觸發條件 (Trigger) 包含變數 (Variable)，定義了代碼被觸發的時機。

3、變數 (Variable) 的類型有很多，但只要變數不會造成代碼被誤發，選擇不同的變數並不會有任何的差別，例如點擊元素 (Click Element)、點擊類別 (Click Classes)。

GTM 埋 Code：如何用 GTM 設定 GA4？

恭喜你，已經掌握 GTM 的基本概念，也把 GTM 埋到網站上了，距離取得數據只剩一步。就用最常見的範例——用 GTM 部署 GA4——來加深觀念。

提醒：舊版「通用 Analytics（Universal Analytics，UA）」已於 2023 年 7 月正式停用，現在一律使用 GA4；追蹤編號格式也從 UA-XXXXXXX-1 改為 GA4 的評估 ID G-XXXXXXXXXX。以下步驟已更新為 GA4 做法。

用 GTM 設定 GA4 一覽表：

代碼 (Tag)：Google 代碼（Google tag），內含 GA4 評估 ID

觸發條件 (Trigger)：初始化－ All Pages（Initialization – All Pages）

變數 (Variable)：建議用「常數變數」集中管理評估 ID G-XXXXXXXXXX

步驟 1、新增代碼：選「Google 代碼（Google tag）」

在 GTM 工作區點「新增代碼」，代碼類型選 「Google 代碼」（Google tag）——這是 GA4 時代的標準做法，取代了過去的「通用 Analytics（分析）」代碼類型。建議把代碼命名為 GA4_Config 或 Google代碼_全站，方便日後管理。

步驟 2、填入 GA4 評估 ID（G-XXXXXXXXXX）

到 GA4 後台 →「管理」→「資料串流」，點選你的網站串流，複製右上方的評估 ID（G- 開頭），貼回 GTM 代碼的「代碼 ID／Tag ID」欄位。這一步等同過去 UA 的「追蹤 ID」，差別只在格式從 UA-XXXXXXX-1 換成 G-XXXXXXXXXX。填好即完成代碼主體設定。

步驟 3、用「常數變數」集中管理評估 ID（推薦做法）

若站上有多個 GA4／Google 代碼，建議到「變數」建立一個常數（Constant）變數存放評估 ID，之後所有代碼都引用它。日後換 ID 只要改這一處，不必逐一修改——這取代了 UA 時代的「GA 設定變數」概念，維護更省事。

步驟 4、設定觸發條件：初始化－ All Pages

GA4 的基礎頁面瀏覽（page_view）會由 Google 代碼在全站自動送出，因此觸發條件選 「初始化－ All Pages」（或 All Pages）即可，確保每頁載入時都先初始化 GA4。設定完成後即可儲存代碼。

步驟 5、用預覽模式與 GA4 即時報表驗證

點 GTM 右上角「預覽（Preview）」進入 Tag Assistant，操作網站確認 Google 代碼有觸發；再到 GA4 →「報表」→「即時（Realtime）」，看是否即時出現使用者與 page_view 事件。兩邊對得上，就代表 GA4 已透過 GTM 成功啟用。最後別忘了按「提交（Submit）」發布版本。

GTM 常見問題（FAQ）

Q：GTM 是什麼？
A：GTM（Google Tag Manager）是 Google 免費的代碼管理工具，讓行銷人不用改網站原始碼，就能自行安裝、管理與更新 GA4、Google Ads、Meta Pixel 等追蹤代碼，只要在網站埋一次容器代碼即可。

Q：GTM 和 GA4 有什麼關係、差在哪？
A：GA4 是「分析數據」的工具，GTM 是「安裝與管理追蹤代碼」的工具。實務上多用 GTM 來部署 GA4 的評估代碼與事件，兩者分工：GTM 負責埋碼與觸發，GA4 負責收集與分析。

Q：GTM 要收費嗎？
A：GTM 標準版完全免費，適合絕大多數企業與網站使用；只有極大流量、需要企業級 SLA 與更高上限的組織才需評估 GTM 360。

Q：為什麼要用 GTM？有什麼好處？
A：三大好處：一次埋碼後所有追蹤都在後台線上調整、減少直接改程式碼的出錯風險、並以非同步載入降低對網站速度的影響，讓行銷人不必每次都依賴工程師。

Q：GTM 的代碼、觸發條件、變數分別是什麼？
A：代碼（Tag）決定「要做什麼」（例如送資料給 GA4）；觸發條件（Trigger）決定「什麼時候執行」（例如點擊按鈕時）；變數（Variable）提供「需要的資料」（例如按鈕文字、頁面網址）。三者組合就能追蹤各種行為。

結語：Google Tag Manager需搭配實作才能熟練！

相信 GTM 可以為行銷人員帶來許多方便，但由於埋設過程需要足夠的基本知識才能進行，建議大家再將代碼 Tag、觸發條件 Trigger、變數 Variable 的概念複習一次，最後搭配實作練習才能熟練。我們第二篇 GTM 教學文章【追蹤碼實作篇，點擊事件按鈕一次就學好】，可以深化 GTM 的應用，讓行銷人員能夠追蹤更多元的數據，包含網站事件點擊和表單追蹤。延伸閱讀，開始進階應用 GTM 做網站分析和廣告投放：【GA教學】Google Analytics教學，一次學會網站分析！完整的Google adwords教學，教你如何在2020操作關鍵字廣告！