想追蹤網站的數據和流量，但卻不知道如何下手嗎？那 Google Tag Manager （簡稱為GTM）將成為你的救星！我們將在這篇 GTM 教學中，以自身 SEO 實戰經驗，教導你如何輕鬆安裝和設定 GTM，同時釐清新手最容易搞不清楚的GTM 觸發條件、代碼及變數…等概念，讓行銷人員從此不用再仰賴工程師埋 Code，也能輕鬆管理和追蹤數據。
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 安裝，不需要動到後台程式碼，超簡單又超輕鬆！
｜完成安裝後，該項目應該顯示為 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)：通用 Analytics 分析程式碼片段
▶ 觸發條件 (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-如何設定GA Pageview？
恭喜你，已經掌握了 GTM 的基本概念，也將 GTM 埋設到網站上了，距離獲得數據只剩一步之遙，就讓我們實際操作一個範例，來加深觀念吧！
當我們想啟動 Google Aanlytics 時，又碰到需要埋設程式碼的問題了，不過因為我們已經學會操作 GTM，所以程序變得相當簡單喔。
GA Pageview 設定一覽表：
- 代碼 (Tag)：通用 Analytics 分析程式碼片段
- 觸發條件 (Trigger)：網頁瀏覽 (All Pages)
- 變數 (Variable)：不指定 （當觸發條件為網頁瀏覽時，不用指定變數）
步驟1、新增代碼：通用 Analytics 分析
此時可以順便將左上角的代碼命名。你會注意到我們將GA作為開頭，例如 GA_Pageview，這是為了區分不同代碼類別，方便管理所制定，當然也可以依照自己喜好的方式來命名。
步驟2、追蹤類型：網頁瀏覽
因為我們想在 GA 報表當中得知使用者在我們整個網站的瀏覽情況，因此要選擇頁面瀏覽。其中還有許多選項，包含事件、交易、計時等，是用來追蹤特定行為時才會用到的，例如你想追蹤促銷活動的按鈕點擊等特定互動，則可選用「事件」。
步驟3、選取設定變數欄位：建立新的 Google Analytics 設定變數
這裡的設定變數是為了導入指定的 GA 帳戶而生。由於我們尚未將 GA 和 GTM 綁定，因此需要先新增一個 GA 設定變數。
｜ 到 Google Analytics 後台管理的資源設定，複製追蹤編號（追蹤ID）
｜ 把GA追蹤編號（追蹤ID）貼到GTM當中
我們要到 Google Analytics 後台管理的資源設定，方能取得追蹤編號，也就是追蹤 ID （例如UA-XXXXXXXXX-1）。回到 GTM 在「變數設定」畫面中貼上並儲存，即完成代碼設定。當往後選擇 GA 作為代碼時，即可直接套用該設定變數，不用再重新輸入一次。
步驟4、設定觸發條件類型：All Pages
完成代碼設定後，我們還需要設定觸發條件才能儲存代碼。點擊下方觸發條件，然後選擇 All Pages 即可。這樣我們就成功啟動 GTM 中 GA 最基本 PageView 功能了
步驟5、如何確保Pagview已經成功啟用？
同樣以 Tag Assistant (by Google) 來檢驗，網站埋的 GA ID 是否跟剛才埋設的相同。
結語：Google Tag Manager需搭配實作才能熟練！
相信 GTM 可以為行銷人員帶來許多方便，但由於埋設過程需要足夠的基本知識才能進行，建議大家再將代碼 Tag、觸發條件 Trigger、變數 Variable 的概念複習一次，最後搭配實作練習才能熟練。我們第二篇 GTM 教學文章【追蹤碼實作篇，點擊事件按鈕一次就學好】，可以深化 GTM 的應用，讓行銷人員能夠追蹤更多元的數據，包含網站事件點擊和表單追蹤。
延伸閱讀，開始進階應用 GTM 做網站分析和廣告投放：
【GA教學】Google Analytics教學，一次學會網站分析！
完整的Google adwords教學，教你如何在2020操作關鍵字廣告！
免費預約數位顧問諮詢
Inbound Asia集客數據行銷公司，專注於集客式行銷服務，
協助客戶網站建置、SEO流量成長、社群操作、內容行銷、數位廣告、數據分析，
以專業數位顧問角色協助客戶成功！
