想追蹤網站的數據和流量,但卻不知道如何下手嗎?那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操作關鍵字廣告!
免費預約數位顧問諮詢
Inbound Asia集客數據行銷公司,專注於集客式行銷服務,
協助客戶網站建置、SEO流量成長、社群操作、內容行銷、數位廣告、數據分析,
以專業數位顧問角色協助客戶成功!