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

GTM

想追蹤網站的數據和流量,但卻不知道如何下手嗎?那Google Tag Manager (簡稱為GTM)將成為你的救星!我們將在這篇GTM教學中,以自身SEO實戰經驗,教導你如何輕鬆安裝和設定GTM,同時釐清新手最容易搞不清楚的GTM觸發條件、代碼及變數…等概念,讓行銷人員從此不用再仰賴工程師埋Code,也能輕鬆管理和追蹤數據。

 

GTM是什麼?

Google 代碼管理工具(Google Tag Manager, 以下簡稱GTM) 是一套代碼管理系統 (TMS)。在安裝完成後,網站分析師與行銷人員不用更改網站的程式碼,透過GTM即能輕易地將各種追蹤程式碼以及第三方應用工具安裝到網站中,讓追蹤和管理都在同一個平台完成。

如果你對於GTM已經有一定的了解,可以跳到後半部的埋設代碼實戰。我們將一步一步帶你教你如何用GTM來開啟GA Pageview功能。

gtm設定

 

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,再行銷就完成綁定了!

gtm埋設retargeting再行銷

 

Google Ads 轉換追蹤代碼能以三種方式來埋設

 

gtm教學retargeting再行銷

 

Google 代碼管理工具是最簡單輕鬆的方法

 

你還沒接觸過Google廣告投放嗎?我們完整的Google adwords教學非常適合新手來閱讀。

 

臉書廣告投放,埋FB Pixel不用會寫程式碼

投放臉書廣告前,必須在網站程式碼中插入一段FB Pixel,FB廣告後台方能監控受眾和你網站的互動。但若有GTM的幫忙,一切手續都能在三分鐘內完成,只需完成代碼和觸發條件的設定,臉書廣告就能跑起來了!

fb像素

 

如對於臉書廣告投放不熟悉,Facebook Pixel完整教學用淺白的用語教你臉書廣告如何運行和操作。

 

GTM帶來的好處有哪些?

gtm優點

 

如上圖所示,GTM對於不會寫程式碼的人來說,是相當好用的工具。但我們仍然建議不管是工程師和還是懂得寫程式碼的行銷人員,都以GTM作為代碼管理工具,為什麼呢?原因有三:

 

GTM簡化置入流程

google tag manager教學

 

 

簡單來說,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帳戶和容器的填寫

gtm安裝教學

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

 

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

 

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

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

gtmt程式碼安裝

 

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

 

3. WordPress如何安裝GTM?

google tag manager wp安裝

 

 

 

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

 

4.怎麼確保GTM安裝成功?

GTM安裝成功

 

 

google tag manager

 

這是最後也是最重要的步驟,我們不希望已經在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

照著指示操作即可完成GTM安裝,不需要動到後台程式碼

 

google tag manager

完成安裝後,該項目應該顯示為connected

 

最重要的是,Site Kit by Google還能幫你的網站安裝以上的應用工具,只需照著螢幕指示,點擊滑鼠就能完成,讓安裝GTM完全不需要動到程式碼 (前提是要先完成Search Console和Google Analytics的整合,才能接著安裝GTM)。

GTM介面說明

gtm功能區介紹

 

在操作GTM前,我們先了解其介面設計,主要分成四個區域。

 

1. 管理區:

若要新增容器使用者、更改帳戶容器設定,或者提交新的版本都在此進行。

2. 功能區:

代碼(Tag)、觸發條件(Trigger)、變數(Variabel)就是在此設定。我們稍後會有更詳盡的解釋。

3. 工作區:

這邊會紀錄是哪位使用者新增或變更了哪些代碼。

4. 版本區:

會顯示最新的版本和發布時間。在提交的代碼後,就會生成一個新的版本,而以往舊的版本和活動紀錄都可在這區找到,若有發生埋設代碼出錯,也能在此還原舊版本設定。

 

GTM元素組成架構

在GTM左半邊的功能區,就是我們主要埋設追蹤會用到項目。整體架構除了帳戶(Account)和容器(Container)之外,我們必須先了解代碼(Tag)、觸發條件(Trigger)、變數( Vabriable)是什麼。乍看之下有點摸不著頭緒,但我們能把他們理解成前因後果的關係。

gtm架構

 

基礎網站設置有:

▶ 帳戶(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代碼 Tag

 

在教學的最開始,我們說GTM是一套代碼管理系統 (TMS),能輕易地將各種追蹤程式碼以及第三方應用工具安裝到網站中。而代碼就是追蹤程式碼和第三方應用工具提供的Javascript程式碼片段。也就是說,我們能把代碼當成分流器,希望用哪個行銷工具來分析和收集數據,就把其設定為代碼。

 

觸發條件 Trigger

gtm觸發條件Trigger

 

觸發條件具體定義出代碼如何被觸發,當中觸發條件是由變數(Variables)、運算符號(Operators)與值(Values)所組成。

GTM觸發條件Trigger

 

其中觸發條件類型(Trigger types)當中有許多選擇,例如:網頁瀏覽、網頁點擊、網頁元素可見度、網頁表單提交、網頁捲動頁數、網頁YouTube影片、自訂觸發事件等,更多觸發條件類型可以參考Google官方說明。至於要類型選擇哪一項,則因你想要追蹤的代碼是什麼而異,以下簡單說明:

 

  • 網頁瀏覽:使用者是否有瀏覽特定頁面
  • 網頁點擊:使用者是否有點擊特別欄位按鈕,例如:致電詢問、CTA (Call-To-Action)
  • 網頁YouTube影片:影片是否有被播放、播放進度、是否有跳轉
  • 網頁元素可見度:通常用來追蹤表單提交和頁面特定元素的曝光與否
  • 網頁表單提交:同樣可拿來追蹤表單的提交狀況
  • 網頁捲動頁數:觀察使用者的瀏覽深度

觸發條件設定

 

例如於我們想追蹤捲動深度,可以參照以上「網頁捲動頁數」設定,作為觸發條件

  • 觸發條件類型(Trigger types):選擇捲動頁數
  • 附加條件:垂直捲動頁數達75%以上
  • 啟用這項觸發條件的時機:視窗載入(更多時機解釋請參考Google說明)
  • 變數(Variables):網頁網址(Page URL)
  • 運算符號(Operators):等於
  • 值(Values):www.learnGTM.com/topic

 

變數 Variable

GTM變數Variable

 

簡單來說,變數定義觸發條件的執行準則,列出哪些網頁特質會啟動代碼。以我們的例子來說,就是當瀏覽者載入特定頁面後代碼會被觸發,當中的特定頁面就是我們要指定的,可以用網頁網址(Page URL)作為變數。其餘變數還包含:點擊元素(Click Element)、點擊類別(Click Classes)、點擊 ID(Click ID)、點擊目標(Click Target)…等。

gtm作用

有沒有覺得點擊類別(Click Classes)和點擊 ID(Click ID)相當眼熟呢?其實類別跟ID就是我們常附加在HTML當中的屬性,就像把程式碼分門歸類(即是類別),並給予身分證(ID)。例如在上圖的範例當中,「什麼是SEO」的標題有類別(class)為”ez-toc-section”和ID為”_SEO”。

 

而我們就可以觀察在網頁當中的區塊、段落、或者物件,是否具有類別和ID,如此便能夠做為設置的變數。Click Target (點擊目標)、Click URL (點擊網址)、Click Text (點擊文字) 一樣能在HTML當中找到。

 

如果我們要追蹤的事件是獨一無二的,就需確保該變數在當前頁面不重複即可 ,這樣的話選擇哪一個變數都沒有差別。(若變數類型的值重複了,可能會導致代碼被重複觸發,因而讓數據失準)。

 

google tag assistant

最後,在GTM預設的變數當中,只有網頁其下的項目會被勾選,使用者可以依據選定的觸發條件來開啟變數類型,例如若想追蹤網頁YouTube影片的觀看,通常會將影片類型變數開啟,而若是想追蹤表單提交,則會勾選表單類型。以上的內建變數若無法滿足需求,也可以新增自定義變數。除此之外,更多的變數類型請參閱更多GTM內建變數資訊

 

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設定一覽表:

  1. 代碼(Tag):通用Analytics分析程式碼片段
  2. 觸發條件(Trigger):網頁瀏覽 (All Pages)
  3. 變數(Variable):不指定 (當觸發條件為網頁瀏覽時,不用指定變數)

 

步驟1、新增代碼:通用Analytics分析

gtm pageview設定

 

此時可以順便將左上角的代碼命名。你會注意到我們將GA作為開頭,例如GA_Pageview,這是為了區分不同代碼類別,方便管理所制定,當然也可以依照自己喜好的方式來命名。

 

步驟2、追蹤類型:網頁瀏覽

因為我們想在GA報表當中得知使用者在我們整個網站的瀏覽情況,因此要選擇頁面瀏覽。其中還有許多選項,包含事件、交易、計時等,是用來追蹤特定行為時才會用到的,例如你想追蹤促銷活動的按鈕點擊等特定互動,則可選用「事件」。

 

步驟3、選取設定變數欄位:建立新的 Google Analytics 設定變數

這裡的設定變數是為了導入指定的GA帳戶而生。由於我們尚未將GA和GTM綁定,因此需要先新增一個GA設定變數。

gtm追蹤id

|  到Google Analytics後台管理的資源設定,複製追蹤編號(追蹤ID)

 

google tag manager教學

|   把GA追蹤編號(追蹤ID)貼到GTM當中

 

我們要到Google Analytics後台管理的資源設定,方能取得追蹤編號,也就是追蹤ID (例如UA-XXXXXXXXX-1)。回到GTM在「變數設定」畫面中貼上並儲存,即完成代碼設定。當往後選擇GA作為代碼時,即可直接套用該設定變數,不用再重新輸入一次。

 

步驟4、設定觸發條件類型:All Pages

gtm是什麼

完成代碼設定後,我們還需要設定觸發條件才能儲存代碼。點擊下方觸發條件,然後選擇All Pages即可。這樣我們就成功啟動GTM中GA最基本PageView功能了

 

步驟5、如何確保Pagview已經成功啟用?

google tag manager是什麼

同樣以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流量成長、社群操作、內容行銷、數位廣告、數據分析,
以專業數位顧問角色協助客戶成功!

Bryan

SEO成長專員,擅長分析數據及觀察使用者行為,規劃完整SEO關鍵字策略,協助客戶提升品牌價值。
近期文章
最多人看
關注我們
Shopping Basket
立即諮詢