【GTM教學】新手篇：十分鐘搞懂 Google Tag Manager
你是不是也有以下困擾呢?
- 跟廣代合作需要請工程師在網站中埋入追蹤碼，等待工期讓你錯失最佳廣告投放時機？
- 不懂程式的行銷人要埋碼只能雙眼傻看螢幕，懇求工程師幫幫忙，但常遇溝通鴻溝心很累？
- 網站被埋設了成千上萬個追蹤碼，也搞不清楚到底埋了哪些？
- 代碼埋得太多，導致網頁載入的速度很慢，等待的時間令人抓狂？
- 想要查看成效，卻不知道到底哪個追蹤碼有帶來轉換？
行銷夥伴的痛苦我們都知道！今天就介紹一個解套的數據分析神器，讓行銷人從一連串複雜的代碼中解放出來，現在就讓我們來認識一下這個工具是什麼吧！
目錄
一、認識 Google Tag Manager
二、使用 Google Tag Manager 管理代碼優勢
１. 簡化埋設網站追蹤代碼的流程
２. 提升網站載入的速度
３. 減少代碼埋錯的機會
三、介紹 Google Tag Manager 的基本元素
１. Accounts（帳戶）
２. Containers（容器）
３. Tag（代碼標籤）
４. Triggers（觸發器）
四、申請 Google Tag Manager 的流程
１. 設置帳號名稱與容器名稱
２. 將 GTM 程式碼貼到網頁原始碼中
３. 確保 GTM 安裝成功
４. 串接 GA3 或是 GA4 的追蹤代碼
一、認識 Google Tag Manager
Google Tag Manager（ 以下簡稱 GTM ）
是一款強大的免費代碼部署工具，你可以將所有需要修改或者更新的代碼上傳至 GTM，安裝完成後，網站分析師與行銷人員不用去修改或是更新網站的原始碼，只要透過 GTM 即能輕易地將各種追蹤程式碼以及第三方應用工具安裝到網站中，讓追蹤和管理都在同一個平台完成。
對於不會寫程式代碼的行銷人而言，GTM 簡直就是救星。使用 GTM 進行管理，除了可以減少埋碼的人力投入、簡化流程外，還可以降低人為操作失誤，一次看到目前所有代碼的運行狀態。
二、使用 Google Tag Manager 管理代碼優勢
１. 簡化埋設網站追蹤代碼的流程
簡單來說，GTM 就像是哆啦A夢的百寶袋一樣，我們可以把 Google Analytics、Google Ads、Facebook Pixel 等各式各樣的追蹤代碼，全部都放在裡面統一進行管理，再也不用拜託工程師將這些代碼一個一個的埋到網站後台。GTM 是業界熟悉並通用的工具，因此不管是要跟網站商、工程師、廣告代理商還是數據分析師接洽，都可以有效降低溝通成本。
２. 提升網站載入的速度
假如你在網站後台埋入大量的追蹤代碼，會增加網頁讀取的時間，但透過 GTM 管理的代碼則不會被寫入網站的 html 之中，如此以來就可以加快網頁載入速度，提升使用者體驗，同時優化 SEO 排名。
３. 減少代碼埋錯的機會
過去我們直接在網站後台埋碼，若想檢驗網站的埋碼有沒有成功，必須要發布網站後才可以進行測試。但如果我們今天改用 GTM 進行安裝管理，便可以在代碼發布前先偵錯，直接就可以進行調整。若代碼更新有發現錯誤，由於 GTM 是以版本做紀錄，因此使用者可以還原最初埋設的版本。
三、介紹 Google Tag Manager 的基本元素
Google Tag Manager 的基本元素一共包括幾個部分：Accounts（帳戶）、Containers（容器）、Tag（代碼）、Triggers（觸發器）。
１. Accounts（帳戶）
帳戶是 GTM 中最高的層級，通常情况下每個公司只需要一個帳户。一個帳戶可以用來管理一個或多個電商網站，一般來說一家公司只需要一個帳戶，便可管理旗下所有電商網站。如果有多個網站要安裝各自的代碼，可以創建多個容器（containers）。這樣就可以同時追蹤不同公司的行銷成效。
若需創建新帳戶，可按下 GTM 頁面右上的「建立帳戶」如上圖。
２. Containers（容器）
容器是專門放置代碼標籤（Tag）的地方，一個帳戶中至少會有一個容器，而一個容器一般來說會對應一個網域，對應的容器可以存放多組代碼標籤（Tag）跟觸發器( Trigger )，因此就不需要在每個網頁都放入程式追蹤碼。
如果要新增容器，可點一下齒輪符號選擇「建立容器」
３. Tag（代碼標籤）
網站後台新增各種追蹤代碼的最終目的，就是要收集用戶的特定行為進行數據的判讀與分析，這些片段的程式碼各自具有不同的用途，最常見的用途就是回傳訊息。當我們在不同的行銷活動上進行標記時，程式碼會將其接收到的訊息回傳至第三方工具，用來分析行銷活動的成效，而這些負責收集相關訊息的程式碼就被我們稱作代碼標籤（Tag）。
新增標籤 ( Tag ) 的方式如下：在「容器」中選擇「新建代碼」，如下圖。
代碼標籤（Tag）的追蹤類型有以下幾種：事件、交易、計時、裝飾連結、裝飾表單。
４. Triggers（觸發器）
Triggers（觸發器）定義代碼被觸發的規則，其中的觸發條件是由變數(Variables)、運算符號(Operators)與值(Values)所組成。一般的運作模式如下圖，我們會設置觸發事件，告訴系統在什麼情況下可以開始收集資料。
【 觸發條件類型 】
使用者可以根據想要追蹤的目標選擇類型，例如：網頁瀏覽、網頁點擊、網頁元素可見度、網頁表單提交、網頁紀錄變更、JavaScript 錯誤、網頁捲動、網頁計時器、網頁影片（例如YouTube）、自訂觸發事件等等。
【 變數 Variable 】
變數是定義觸發條件執行的規則，告訴代碼標籤該在什麼時候回傳訊息。而變數又可以細分為內建變數（Built-in Variables）與使用者自訂變數（User-defines Variables）兩種。內建變數是系統預設，有相當多種常用的觸發方式，比如點擊類別（Click Classes），你只要簡單點選即可啟用；而使用者自訂變數是我們根據需求特別定義的變數，比如購買完成（ purchaseComplete ），當成功進行交易後才回傳資料。
【 運算符號 Operator 】
運算符號定義變數與值之間的關係，讓系統用來判斷觸發條件的狀態（ true 或 false），兩者之間一定要對應上才能確保觸發條件順利運行，最常見的運算符號如等於（equals）、包含（contains）、或未包含（doesn’t contains）。
【 值 Value 】
明確定義變數的內容，比如出現特定數字或是網頁網址，便會觸發代碼標籤收集資訊。
一個容器可能會含有一個「標籤」和「觸發條件」來記錄特定行為，假如我們想要評估使用者對這個頁面內容感興趣的程度，我們可以觀察用戶平均的網頁捲動深度，可以參照「網頁捲動頁數」觀察使用者看到哪裡，並設置觸發條件，這樣我們就可以收集到該部分的資訊囉！
・觸發條件：當使用者的網頁卷動深度達到 50%。
・代碼標籤：滾軸深度事件 50%。
四、申請 Google Tag Manager 的流程
了解了 GTM 是什麼以後，現在就開始來實操吧！
１. 設置帳號名稱與容器名稱
進入 GTM 後，先創建帳戶，再來是創建容器名稱，最後將要監測該網站的所有代碼添加到剛剛命名的容器中。
２. 將 GTM 程式碼貼到網頁原始碼中
創建完成後，GTM 會提供一段代碼，將代碼埋入要追蹤的網站頁面原始碼 與 後面，即可完成設置。
３. 確保 GTM 安裝成功
在這邊給大家推薦一個 Chrome 的擴充功能 Tag Assistant（by Google），我們可以使用這項功能了解是否已經正確且成功地在網站上安裝各種標籤，安裝完成後啟動，重新刷新頁面就可以看到是否有跑出來相對應的代碼，到這裡就大功告成啦！
４. 串接 GA3 或是 GA4 的追蹤代碼
請參考另外筆者所撰寫的數據新手村，裡面有詳細的步驟教學喔！
更多 GA 教學相關閱讀：
【 GA4 導入與轉移 】
【 Google Analytics 】
【 Google Analytics 4 Property 】
【 Google Tag Manger 】
【 Google Looker Studio 】
【 實際應用 】
