一棟大樓如果每多裝一個插座，都得把牆鑿開重新拉線，施工的人累，住的人也等不起。網站上的追蹤碼長期就處在這種狀態：要接 GA4、要加廣告平台的轉換追蹤、要掛一個熱度圖工具，每一次都得有人把新的程式碼貼進網站原始碼，測試、上線，下一個需求來了再來一輪。GTM（Google Tag Manager）要解決的，正是這種每加一條線都得動牆的做法。
它扮演的就是那個配電箱。網站只需要接上一次，之後新增、停用、調整追蹤，都在網頁介面裡完成，不必再為每一段代碼回頭動網站。對剛接觸 GTM 的人來說，第一個疑問通常是它替網站接管了什麼，又該從哪裡開始用。
GTM 的操作介面從頭到尾都圍繞著三個詞：代碼、觸發條件、變數。這三個詞弄清楚，後面的安裝、設定與測試才有地方放，否則每個按鈕看起來都只是一個孤立的選項。
Google Tag Manager 是什麼？
Google Tag Manager 是 Google 推出的代碼管理系統（Tag Management System，簡稱 TMS）。根據 Google 的說明，它讓人不必更動網站程式碼，就能設定與管理網站上的各種代碼。這裡的「代碼」，指的是在網頁上執行的小段程式，用途包括流量追蹤、轉換記錄、再行銷等，通常是 JavaScript。
沒有 GTM 的時候，新增一段追蹤碼的流程，大致是先拿到廣告平台或分析工具給的程式碼，交給網站維護的人貼進原始碼，再測試上線。有了 GTM，網站只要放一次 GTM 提供的程式碼，之後新增代碼這件事就搬到 GTM 的網頁介面操作。標準版的 Google Tag Manager 免費，Google 另外提供付費的 360 版；一般網站的入門用途，標準版已經涵蓋後面提到的所有操作。
GTM 管理代碼，GA4 負責收集與分析
很多新手以為裝了 GTM 就會有流量報表，其實 GTM 本身不產生任何分析報表。它是「發送端的管理介面」，決定哪一段代碼在什麼時候執行、帶著什麼資料送往哪裡；GA4 則是「接收端的分析平台」，負責把收進來的資料整理成報表。兩者缺一不可，卻不是同一種東西。
舉例來說，龐果設計的官網想知道每個月有多少人點了「聯絡我們」按鈕。在 GTM 裡建立一個 GA4 事件代碼，設定成按鈕被點擊時送出；事件送進 GA4 之後，要看次數、看來自哪些頁面，都是在 GA4 的報表裡操作。
GTM 管的也不只有 GA4。Google 的說明提到，一個容器可以取代網站或 App 上所有手動編寫的代碼，包含 Google Ads、Google Analytics、Floodlight 與第三方代碼。也就是說，同一個容器可以同時替 GA4、廣告平台與其他工具送出資料，網站端卻只需要放一次 GTM 的程式碼。
容器收納整個網站要用的代碼、觸發條件與變數
GTM 把網站或 App 上的代碼、觸發條件、變數與相關設定，打包成一個單位，稱為「容器」。可以把它想成網站專用的收納盒，容器程式碼裝上網站一次，之後所有代碼都收在這個盒子裡，要換內容只需要在 GTM 裡改。
容器之上還有一層「帳戶」。Google 的說明提到，一個組織通常只需要一個 Tag Manager 帳戶，帳戶底下再依網站或 App 建立容器。建立容器時要選類型，有 Web、iOS、Android、AMP 與 Server 五種，一般網站選 Web，伺服器端 Tag Manager 才用 Server。網站容器的名稱建議填網站最頂層的網址，不需要每個網頁各建一個容器。
如果網站上已經有手動貼好的代碼，也不必一次全部搬進 GTM。Google 建議最好一次遷移所有代碼，但這不是強制的；還沒搬的代碼，Tag Manager 會讓它和已遷移的代碼並行運作。
GTM 代碼、觸發條件與變數的分工
這三個元素各回答一個問題。代碼回答「做什麼」，觸發條件回答「何時做」，變數回答「依據什麼資料做、帶什麼值」。Google 在介紹 Tag Manager 時的流程也是這個順序，先在網頁介面設定代碼，再建立出現特定事件時會啟動代碼的觸發條件，最後建立可以簡化與自動化代碼設定的變數。
三者串起來運作時，由觸發條件偵測某個事件，再用變數的值判斷，符合條件就讓代碼執行。用龐果設計官網的例子套一遍，代碼是「送出一個 GA4 事件」，觸發條件是「有人點了聯絡我們按鈕」，變數是「被點到的按鈕上寫著什麼字」。在這個例子裡，少了任何一個，追蹤都無法成立。
| 元素 | 回答的問題 | 龐果設計官網的例子 |
|---|---|---|
| 代碼 | 做什麼 | 送出 GA4 事件 |
| 觸發條件 | 何時做 | 訪客點了「聯絡我們」按鈕 |
| 變數 | 依據什麼資料 | 被點到元素上的文字 |
代碼分成 Google 產品、第三方與自訂代碼 3 類
代碼就是實際要執行的那段程式。GTM 的代碼類型大致分三類：第一類是 Google 產品的代碼，像 Google 代碼與 GA4 事件；第二類是第三方代碼，由 GTM 提供範本，填欄位就能用；第三類是自訂 HTML 與自訂圖片，專門處理 Tag Manager 尚未支援的代碼。
自訂 HTML 適合貼上沒有現成範本的 JavaScript，程式碼必須放在 script 標籤之間；自訂圖片則是用來部署像素廣告代碼這類以圖片請求為主的追蹤。新手大多先碰到 Google 代碼，接著是 GA4 事件代碼，後面的章節也只會用到這兩種。
代碼本身只是一份「待命的指令」。沒有綁定觸發條件，它就不知道什麼時候該執行，這也是新手最常漏掉的環節。
觸發條件，每個代碼至少要綁定一個
觸發條件的角色像一個偵聽器，會在網頁或 App 上留意表單送出、按鈕點擊、網頁瀏覽這類事件，一旦偵測到指定的事件，就通知代碼啟動。依 Google 的說明，每個代碼至少需要一個觸發條件才能啟動，沒綁的代碼即使儲存了，也不會執行。
新建立的觸發條件，預設會對該事件類型的所有事件啟動。想把範圍縮小，就要加上篩選條件。每個篩選條件由「變數、運算子、值」三部分組成，運算子可以選等於、包含、小於、符合規則運算式等。例如變數選 Page URL、運算子選「包含」、值填 /contact，就只有網址含 /contact 的頁面才會觸發。
網頁瀏覽類的觸發條件有 5 種，依優先順序由先到後排列如下：
- 同意聲明初始化：最先觸發，用於設定或更新使用者同意聲明狀態的代碼，例如同意聲明管理平台的代碼。
- 初始化：在同意聲明初始化之後、其他所有觸發條件之前觸發，適合需要比其他代碼更早就位的代碼。
- 網頁瀏覽：瀏覽器開始載入網頁時立即啟動。
- DOM 就緒：瀏覽器建構完整個網頁的 DOM 之後啟動。
- 視窗已載入：網頁連同圖片、指令碼等內嵌資源都載入完成之後啟動。
網站容器預設就內含「同意聲明初始化 – 所有網頁」與「初始化 – 所有網頁」兩個觸發條件，後面設定第一個代碼時會用到後者。
另一類常用的是點擊觸發條件，分成「所有元素」與「僅連結」。「所有元素」能偵測網頁上任何元素的點擊，包括連結、圖片與按鈕；「僅連結」只追蹤使用 a 元素的 HTML 連結。Google 也建議為點擊觸發條件加上限制，讓它只在預期會發生點擊的網頁觸發，例如 Click URL 包含某段路徑，這樣有助於提升效能。
內建變數與自訂變數的取用方式
變數是一個具名的預留位置，程式碼在網站或 App 上執行時，才會填入對應的值。例如名為 Page URL 的變數，會傳回目前網頁的網址。它有兩種用途，一是在觸發條件裡當篩選依據，二是在代碼裡當動態資料的來源，像是把交易金額或產品 ID 傳給轉換追蹤代碼。
GTM 預先定義了一組內建變數，涵蓋的類別包含點擊、錯誤、表單、記錄、網頁、捲動、公用程式、影片與可見度。新手最常用到的是網頁類的 Page URL、Page Path，以及點擊類的 Click Text、Click ID、Click Classes。Google 的說明指出，這組內建變數可以處理代碼與觸發條件設定的大部分需求，需要哪幾個，到 GTM 的變數頁面挑選即可。
需求超出內建範圍時，再建立使用者定義的變數。常見的類型有 URL、第一方 Cookie、自訂 JavaScript、資料層變數、DOM 元素、常數、對照表與規則運算式表格等。建立時，Google 建議採用能看出功能的命名規則，例如 Data Layer Variable – Product Name，日後容器變多，一眼就知道哪個變數管什麼。
建立容器並把兩段程式碼放上網站
整個 GTM 流程中，只有這一步需要碰網站的程式碼。容器程式碼放上去之後，所有後續的新增與修改，都在 GTM 的網頁介面完成，不需要再回頭動網站。
這一步包含三件事：建立帳戶與容器、把兩段程式碼放進網站每一個頁面、確認放對了。使用 WordPress 的網站，也可以改用外掛放置，不必改主題檔。
帳戶代表組織，容器對應一個網站
先用 Google 帳戶登入 Tag Manager 網站，在「帳戶」分頁選擇建立帳戶。帳戶設定要填帳戶名稱與國家或地區，也可以勾選以匿名方式與 Google 等分享資料，用於基準化比較。
接著是容器設定，先填容器名稱，網站請填最頂層的網址（例如 www.example.com），容器類型選 Web，按下「建立」並同意《服務條款》，帳戶與容器就建好了。
之後公司有第二個網站或 App，不必另開帳戶，回到「帳戶」分頁，在帳戶名稱旁的選單選「建立容器」，就能在同一個帳戶底下新增。
兩段容器程式碼放進 head 與 body 後再測試
容器建好以後，在「工作區」分頁點選容器 ID（以 GTM 開頭的那一串），會跳出「安裝 Google Tag Manager」視窗，裡面有兩段要放進網站的程式碼。針對網站的每一個網頁，都要放這兩段，不是只放首頁。
第一段是 JavaScript，放在 head 標籤內，位置越上面越好：
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->Code language: HTML, XML (xml)第二段是 noscript 內含 iframe 的備援片段，在瀏覽器停用 JavaScript 時才派上用場，放在開頭的 body 標籤之後緊接處：
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->Code language: HTML, XML (xml)兩段程式碼中的 GTM-XXXX 是示意寫法，實際請貼自己容器視窗裡產生的那一份，容器 ID 不同，程式碼就不同。
如果之後需要用到資料層，就要在容器程式碼載入之前先建立資料層，Google 的範例寫法是在容器程式碼上方放一小段：
<script>
window.dataLayer = window.dataLayer || [];
</script>Code language: HTML, XML (xml)放完以後，回到同一個視窗輸入網站網址，按「測試」，就能驗證容器有沒有被網站讀到。另外要留意，同一個容器程式碼不要重複放置，如果網站已經有人手動貼過，或外掛已經輸出了容器，就避免再貼一份。
WordPress 站可用外掛放置，不必改主題檔
WordPress 網站要放 GTM 容器，不必手動編輯 header.php，常見做法是交給外掛處理。Google 的安裝說明也另外附註，使用 WordPress、Shopify、Wix 這類網站製作工具或 CMS 時，Google 代碼可以透過平台的整合功能設定，不需要逐頁更新程式碼。
直接把程式碼貼進主題檔的隱憂在於，主題更新或換佈景主題時，貼進去的程式碼可能被覆蓋或消失，追蹤跟著中斷，而且不容易察覺。改用外掛放置，設定存在資料庫，換主題之後依然在。WordPress.org 的外掛目錄上有一支專為 GTM 設計的免費外掛 GTM4WP，功能就是把容器程式碼放上網站的每個頁面，不需要手動新增。
這裡同樣要避免重複放置。網站上若已經有其他外掛或佈景主題的設定在輸出 GTM 容器，就不要再裝第二個，以免同一個容器出現兩次。
第一個代碼先設定 Google 代碼
容器裝好之後，第一件事是建立一個 Google 代碼，讓 GTM 有個基礎代碼可以把資料送到 Google 的產品，包含 GA4。這個代碼只需要建一次，也是「代碼」加「觸發條件」兩個元素第一次實際搭配的地方。
Google 近期推出容器最佳化功能，讓容器直接把資料送到 Google 的量測產品，因此介面上可能出現升級最佳化的橫幅提示，實際步驟也可能與下面的描述略有出入。
代碼類型選 Google 代碼並填入代碼 ID
新增代碼時，先在「工作區」進入「代碼」，按右上角的「新增」；把預設的「未命名代碼」改成容易辨認的名稱，例如「Google 代碼」，日後代碼多了才找得到；在「代碼設定」裡選「Google 代碼」，再填入代碼 ID。
新手很容易把兩種 ID 搞混。以 GTM 開頭的是容器 ID，也就是剛才放上網站的那一個；填進 Google 代碼的是另一個 ID，常見的是 GA4 資料串流的評估 ID，以 G- 開頭，可以在 GA4 的資料串流頁面找到。兩種 ID 的用途不同，填錯位置，資料就送不到。
這時代碼還沒有綁定觸發條件，所以即使設定都填了，它也不會執行。
觸發條件選初始化，讓 Google 代碼先於其他觸發條件啟動
這個代碼要綁的觸發條件，Google 的說明建議使用「初始化 – 所有網頁」，讓它先於其他觸發條件啟動。從前面的優先順序來看，初始化僅次於同意聲明初始化，排在一般的網頁瀏覽之前。
Google 代碼是後續事件代碼的基礎，先就位，之後的 GA4 事件才有地方送；如果改用一般的網頁瀏覽，它可能晚於其他代碼啟動，彼此的先後就沒有保障。
選好觸發條件之後按「儲存」。要注意儲存只是把代碼存到工作區的草稿，網站上還沒有任何變化，必須等到後面預覽測試、提交發布，才會對訪客生效。
以按鈕點擊事件串起代碼、觸發條件與變數
Google 在 GA4 事件的設定說明裡，用「點擊電子報訂閱按鈕」當範例，剛好能把代碼、觸發條件與變數一次串起來。以龐果設計的官網為例，假設首頁有一顆「訂閱電子報」按鈕，目標是在訪客點擊它時，讓 GA4 記下一次事件。
在這個範例裡，代碼是 GA4 事件代碼，觸發條件是點擊，變數則是被點擊元素上的文字。範例不需要資料層，也不需要改動網站原始碼。
GA4 事件代碼的評估 ID 與事件名稱
這個事件代碼可以看成「Google 代碼之後的第二個代碼」。新增代碼時，類型選「Google Analytics: GA4 事件」，Google 英文版說明的範例把代碼命名為 GA4 Event – Signup newsletter，名稱要讓人一眼看出它在做什麼。
代碼設定裡有兩個必填項目。一個是評估 ID，也就是事件要送往哪個 GA4 資料串流；另一個是事件名稱，範例用的是 signup_newsletter。自訂的名稱會在 GA4 裡建立新的自訂事件，並顯示在報表中；若選用 Google 預先定義的事件名稱，就會建立建議事件。事件名稱是日後在 GA4 報表裡看到的名字，取名的規則最好先統一，像範例這樣用英文小寫加底線，之後才不會出現同一件事、好幾種寫法的亂象。
此外，GA4 事件代碼還能附帶額外的事件參數，讓一個事件多帶幾項資訊，入門階段可以先不填。
點擊觸發條件搭配可點擊文字變數篩選
觸發條件的部分照範例的做法，類型選「點擊」，種類選「所有元素」，再選「部分點擊」，條件設定成「可點擊文字」（Click Text）包含「訂閱電子報」。命名方面，Google 英文版範例用 Trigger – Signup newsletter，跟代碼名稱互相對應。
這裡是變數第一次出現在實際操作中。Click Text 這個內建變數會在每次點擊時，帶出被點到元素上的文字；觸發條件拿它跟「訂閱電子報」比對，符合才讓代碼啟動，點到別的按鈕就不會觸發。選了「部分點擊」之後，才會出現篩選條件的欄位。
點擊類型該選「所有元素」或「僅連結」，要看被點的東西是不是以 a 元素做的連結。多數按鈕不是連結，要選「所有元素」；若是連到另一個網址的文字連結，才適合用「僅連結」。
用文字當條件的限制是，網站改版時，按鈕上的字只要有改，條件就對不上，追蹤也就悄悄失效了。比較穩的做法是改用 Click ID 或 Click Classes，前提是網站有替那顆按鈕設定固定的 ID 或 class。點擊類的內建變數，包含 Click Text、Click ID、Click Classes，都可以在變數頁面挑選。
如果追蹤目標不是點擊，而是「訪客到達某個頁面」，例如訂閱完成後的確認頁，Google 的範例建議改用「網頁瀏覽」觸發條件，同一個事件代碼改綁這個觸發條件即可。
預覽測試無誤後才提交發布
GTM 的工作區本質上是一份草稿。儲存代碼、觸發條件與變數，都只是寫進工作區，網站上的訪客看不到任何變化。必須經過預覽確認代碼有被觸發，再提交發布，改動才會上線。
「預覽、驗證、提交、到 GA4 確認」是一條固定的順序，每一步檢查的東西不同，預覽檢查 GTM 這一端，GA4 的即時報表則檢查資料有沒有到達。兩邊都看到，才算設定完成。
預覽模式顯示的代碼觸發狀態與資料內容
在「工作區」分頁右上角按「預覽」，會在新分頁開啟 Google Tag Assistant。輸入要測試的網站網址，按「連線」，網站會在新視窗開啟，右下角出現「已連結」的提示；回到 Tag Assistant 分頁按「繼續」，就進入偵錯介面。
偵錯介面能看到哪些代碼已觸發、觸發的順序、哪些觸發條件有或沒有啟動代碼，以及系統傳給各服務的資料。這個偵錯介面只會出現在啟用預覽的那個瀏覽器，或收到共用預覽連結的人，不會出現給一般訪客，所以預覽時不會影響網站的正常使用者。預覽的是目前工作區的草稿，模擬正式部署之後的樣子；如果想看舊版本，也可以到「版本」分頁選舊版本來預覽。
有時預覽網址會附帶偵錯參數，少數網站或網頁可能因此顯示異常，這時可以取消勾選「在網址中加入偵錯訊號」。預覽結束時，按偵錯介面左上角的 X，或在 Tag Assistant 啟用頁面按「停止偵錯」。
預覽時若發現代碼沒有觸發，先回頭檢查兩件事：這個代碼有沒有綁定觸發條件，以及觸發條件的篩選條件有沒有寫錯，像是文字多了空格、網址路徑對不上。這正是前面三元素分工的實際用途。
提交時的發布選項與 AI 建議的版本摘要
預覽確認沒問題，就可以提交了。在「工作區」分頁右上角按「提交」，進入「提交設定」，有兩個選項：「發布及建立版本」會把變更發布到網站，立即生效；「建立版本」則只儲存，不發布。接著輸入版本名稱與版本說明，也可以按「活動記錄」查看自上一個版本以來改了什麼，最後按右上角的「發布」。
版本名稱與說明看起來只是備註，但容器日後會一版一版累積，想知道某個追蹤是什麼時候加的、誰改了什麼，就靠這些文字。Google 在 2026 年 9 月為提交頁加入了 AI 建議的版本摘要，AI 會依工作區中的變更，自動建議版本名稱與版本說明。AI 的建議可以省下打字的時間，但採用之前仍要對照實際的變更內容核對一遍，確認寫的與做的相符。
多人同時編輯、工作區之間的衝突、版本回復與權限分工，屬於進階的協作主題，入門階段先把「儲存不等於發布」這個觀念記牢就夠了。
GA4 端另外用即時報表確認資料
預覽模式只能確認 GTM 這一端的代碼有沒有被觸發，並不代表資料真的進了 GA4。最後一步是到 GA4 確認，用自己的裝置連上網站，做一次剛才設定的動作，例如點一下「訂閱電子報」按鈕，再看 GA4 的「即時」報表有沒有出現對應的事件。
要細看事件帶了哪些參數，可以用 DebugView，路徑是「管理」→「資料顯示」→「DebugView」。DebugView 即時顯示 GA4 從某位使用者收集到的事件，個人裝置要先開啟偵錯模式才看得到。透過預覽模式連線時，Tag Assistant 會自動在網站網址加上參數，替該瀏覽器啟用偵錯模式。DebugView 的「秒動態」顯示最近 60 秒內的事件，「分動態」則顯示最近 30 分鐘的事件。
另外，資料不一定立刻出現。Google 的說明指出，設定好 Google 代碼之後，資料收集最多可能需要 30 分鐘才開始，因此剛設定完、報表上還沒有數字，不代表沒有裝成功。預覽看得到代碼觸發，GA4 的即時報表也看得到事件，兩邊都對，這個追蹤才算完成。
資料層是進階追蹤繞不開的下一步
代碼、觸發條件、變數這三個元素，做頁面瀏覽與按鈕點擊已經夠用。但要追的是購買金額、商品名稱、表單欄位值這類網頁上沒有現成元素可以抓的資料，就需要資料層。
資料層（Data Layer）是 Google Tag Manager 與 gtag.js 用來把資訊傳給代碼的物件，結構是 JSON。換句話說，它是網頁把資訊主動交給 GTM 的管道。網頁用 dataLayer.push 推送一個事件，語法如下：
dataLayer.push({'event': 'event_name'});Code language: JavaScript (javascript)event_name 是描述事件的字串，像 login、purchase、search。推送變數的寫法一樣，改成鍵與值即可：
dataLayer.push({'variable_name': 'variable_value'});Code language: JavaScript (javascript)資料層和前面學的元素直接接得上。推送的事件，可以用「自訂事件」觸發條件偵聽；推送的變數，可以用「資料層變數」取值。例如網頁在購買完成時推送金額，GTM 就能用資料層變數把金額帶進代碼，或是依金額高低決定要不要觸發再行銷代碼。
資料層的訊息是排隊依序處理的。容器載入後，Tag Manager 按先進先出的順序逐則處理；網頁程式碼後續送出的推送，會排在待處理訊息之後，因此更新後的資料層值，不一定能在下一個事件取用。Google 建議推送時同時帶上事件名稱，再用自訂事件觸發條件偵聽。資料層通常由網站開發端或外掛寫入，行銷人員先懂這個概念，就能和開發端對得上話。
入門之後往下走，還有幾個方向：伺服器端 Tag Manager 能改善追蹤資料的落差，容器版本控制適合多人一起維護，第一方 Cookie 的追蹤策略則是因應瀏覽器對第三方 Cookie 日益嚴格限制的做法。每個方向都建立在同一套代碼、觸發條件、變數的邏輯上。
GTM 值得先從最小的一組設定開始：一個 Google 代碼、一個按鈕點擊事件，在預覽模式與 GA4 即時報表兩邊都確認看得到，再一項一項加入其他追蹤需求。每加一項就預覽一次、提交一次並寫清楚版本說明，容器才會長期保持乾淨，日後要查、要改、要交接，都有跡可循。