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

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

想追蹤網站的數據和流量，但卻不知道如何下手嗎？那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 Aanlytics，GTM網站事件追蹤功能可以揭密瀏覽者在頁面上的真實使用（互動）情況，例如在GA的網站內容報表當中，你的平均網頁停留時間為五分鐘，但使用者確實有把文章讀完嗎？我們能用GTM的事件追蹤，在不用更改網站後台的情況下，追蹤使用者捲動網頁的百分比。

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

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

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

有在投放Google關鍵字和GDN廣告的人對於再行銷不陌生，當我們在Google Adworks完成設定後，通常會需要將代碼埋到網站。此時我們便可用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的安裝，可以直接到到代碼、觸發條件、以及變數的設置。

1. 完成GTM帳戶和容器的填寫

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

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

2. 將GTM程式碼貼到網頁當中

輸入好資訊後，勾選接受服務條款，就會進到安裝 Google 代碼管理工具的介面。你需要將程式碼貼到網站的<head>與<body>中，即可完成GTM的設置。

此時，你可以將資料傳給工程師，或者跟著我們的步驟，簡單的將其置入到網站當中，這將是本次Google tag manager教學當中唯一需要碰到程式碼的地方，不過因為相當簡單且實用，希望各位都能學起來，以下我們將以Wordpress網站為例安裝GTM。

3. WordPress如何安裝GTM？

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

4.怎麼確保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)、變數( Vabriable)是什麼。乍看之下有點摸不著頭緒，但我們能把他們理解成前因後果的關係。

基礎網站設置有：

▶ 帳戶(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、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、變數 Vabriable的概念複習一次，最後搭配實作練習才能熟練。我們第二篇GTM教學文章【追蹤碼實作篇，點擊事件按鈕一次就學好】，可以深化GTM的應用，讓行銷人員能夠追蹤更多元的數據，包含網站事件點擊和表單追蹤。

延伸閱讀，開始進階應用GTM做網站分析和廣告投放：

【GA教學】Google Analytics教學，一次學會網站分析！

完整的Google adwords教學，教你如何在2020操作關鍵字廣告！