文章目錄
更新時間：2024年10月31號
這一篇介紹Google Tag Manager。
Google Tag Manager 是什麼
Google Tag Manager，簡稱 GTM，叫谷歌代碼管理工具，是一款強大的免費代碼部署工具。
Google Tag Manager是一套代碼管理系統 (TMS，TMS全稱是Tag Manager System，Adobe Launch也屬於TMS之一)，方便你快速更新追蹤程式碼和相關程式碼片段，你只要在專案中新增一小段「代碼管理工具」程式碼，就可以透過網頁式使用者介面輕鬆且安全地部署分析及評估代碼設定。
Google Tag Manager 能做什麼
- 埋設網站追蹤代碼（這是最主要的）
優點
- 簡化埋設網站追蹤代碼的流程，加速開發的速度：透過GTM，代碼管理不用再依賴工程師去埋相關的程式，分析師/行銷人可自己來進行管理。
- 提高網站的載入速度：透過 GTM 去載入代碼是異步執行，這代表網站不會被載入較慢的代碼給拖累，提升網站的使用者體驗。
- 代碼統一管理：所有的代碼統一儲存在 GTM 的容器內，可以隨時增刪改代碼，操作簡單，代碼管理方便，，降低工程人員的維護工作成本。
- 版本控制，：GTM可以協助我們進行版本控制，發生錯誤時可以即時回到前一版
- 測試環境：提供Tag Assistant用於實時測試和資料驗證，減少代碼埋錯的機會
- 和其他 Google 服務完美的整合：如Google Analytics、Google Optimize 和 AdWords 等
不足
GTM並不是只有優點和好處，它也有一些不足的地方：
- 如果GTM被擋掉，GTM所有的追蹤碼都將失效：GTM的追蹤碼其實是JS檔案，如果使用者的瀏覽器異常，或主動擋住GTM的追蹤碼，那麼GTM上設定的所有追蹤碼都將失效。
- 需要一定的開發基礎：因為GTM上有很多的 Java Script，如果有可能 GTM 裡面放的程式碼有誤，連帶影響網頁的正常功能，所以使用者具備一定的工程師背景會更適合。
- 需要一定的學習成本：GTM這個工具雖然說簡單很多，但裡面的各種設定還是需要一定的學習才能準確掌握。
Google Tag Manager的賬戶結構
GTM的賬戶結構可以用下圖表示：
GTM的賬戶結構是：賬戶——容器
- 一個Google賬戶可以創建多個GTM賬戶（以下簡稱賬戶），最多可以創建400個，賬戶是GTM最高層級，一般是一家公司對應一個賬戶，如下圖中的“Haran Huang”就表示一個賬戶。
- 一個賬戶可以創建多個容器，每個容器裡包含一套代碼、觸發條件和變數，最多可以創建500個容器，也就是一個谷歌賬戶最多可以包含2萬個容器，一般是一個網站對應一個容器，如下圖中的“Digital Analytics – Basic Assessment”，“EC”，“GA4”和“Server”就表示不同的容器。
容器效能：容器的大小最多200KB，如果超過70%就會提示，建議您採取行動調整容器設定，需要對對代碼、觸發條件和變數做刪除後合併。\
延伸閱讀：Google Tag Manager的賬戶結構與權限管理
Google Tag Manager的基本元素
GTM 最重要的三大基本元素：
- 代碼：是指由分析、行銷和支援供應商提供的程式碼片段，可協助您將產品整合至網站或行動應用程式。延伸閱讀：Google Tag Manager 代碼(Tags)介紹
- 觸發條件：觸發條件是決定特定代碼觸發時機的規則。延伸閱讀：Google Tag Manager 觸發條件(Triggers)介紹
- 變數：變數是一種預留位置，用於儲存可供代碼或觸發條件使用的值。延伸閱讀：Google Tag Manager 變數(Variables)介紹
它們的關係：
其他主要功能：
- 工作區：工作區可以用於管理或區隔多組代碼變更，讓你為容器建立多組變更，這樣團隊成員就能在各自的工作區中處理變更，並獨立開發代碼設定。延伸閱讀：利用GTM的工作區（Workspace）管理多人協作
- 資料夾：資料夾是於管理代碼、觸發器和變數，做分類。延伸閱讀：GTM裡的「資料夾」：更好的管理代碼、觸發條件和變數
- 環境：環境是GTM裡非常實用的一個功能，它可以區分不同的環境，滿足標準化的開發流程。延伸閱讀：如何用GTM裡的「環境」功能建立QA環境
安裝Google Tag Manager
接下來介紹如何安裝Google Tag Manager
創建容器
前往 Google Tag Manager代碼管理工具，並使用你的Google 帳戶登入，在Google Tag Manager中的賬戶右側點擊三個點，然後點選“建立容器”：
然後會進入建立容器的界面，做如下設置：
容器名稱：就是容器的名稱，為了便於區分，一般用網站的域名，我這裡是www.haranhuang.com
目標廣告平台：就是要安裝的目標廣告平台類型，一種有5種，根據實際情況去選擇，我這裡是網站，所以選擇“網路”
- 網路：就是網站類型
- iOS：就是iOS應用程式
- Android：就是Android應用程式
- AMP：谷歌的AMP
- Server：伺服器標籤追蹤
設置好後點擊“建立”就會創建容器。
獲取Google Tag Manger追蹤碼
創建好容器後就獲取Google Tag Manager的追蹤碼，打開容器，點擊「管理」——「安裝 Google 代碼管理工具」：
這個就是Google Tag Manager的追蹤碼，可以看到Google Tag Manager的追蹤碼是有兩段，一段要求安裝在head裡，一段要求安裝在body。
一般是按官方的要求安裝，當然，你可以將兩段追蹤碼都安裝到head裡。
安裝Google Tag Manger追蹤碼
让DE将追踪码添加到網站的模板頁：
一段到head裡，一段在body裡。
這樣就可以了。
驗證安裝
安裝後，需要驗證Google Tag Manager追蹤碼是否安裝準確。
在驗證之前，先需要在Google Tag Manager容器發佈一個版本，這樣Google Tag Manager追蹤碼才能正常加載，點擊右上角的“提交”就可以發佈版本：
然後打開Chrome開發者工具，找到Network，在Filter裡用“GTM-”過濾：
可以看到GTM的請求是正常加載，狀態是200表示加載成功，也就是Google Tag Manager追蹤碼安裝成功。
如果你使用的WordPress，延伸閱讀：WordPress中安裝Google Tag Manager追蹤碼
