網站架設完成之後,往往要埋入許多追蹤碼,可以藉由免費的GTM管理工具,讓網站管理者或行銷人員更方便整合網站埋設的追蹤碼,本文先介紹GTM相關概念與安裝GTM。
GTM是什麼
有在經營管理網站的工程師或是行銷人員應該都知道,一個網站架設完成之後,往往要埋入許多追蹤碼,例如 Google Analytics追蹤碼、GA 事件追蹤碼、GoogleAds轉換追蹤碼…等,因此網站除了原始碼之外,還有會有很多額外的追蹤代碼,以至於影響網頁的載入速度。
因此在2012年,Google發表了免費的Google Tag Manager工具(GTM),讓網站管理者或是行銷人員,可以更方便管理網站埋設的第三方追蹤代碼。
同時,GTM裡面還有內建了許多的事件代碼範本,因此如果不懂程式的行銷人員需要埋入一些程式碼,也可以直接自己利用視覺化的操作介面執行,無需每次都依靠工程師。
本文就帶大家認識GTM相關的基礎概念,以及如何在網站安裝GTM代碼。
認識GTM的元素架構
要開始正式使用GTM之前,須先了解的GTM的組成架構:帳戶(Accounts)、容器(Containers)、代碼(Tag)、觸發條件(Triggers)、變數(Variable)。
帳戶
帳戶是GTM架構中的最高層級,一個帳戶可以用來管理一個或多個容器,通常建議一個容量對應一個網域,因此如果有多個子網域,則會建議建立多個容器。
注意事項
如果是公司行號,建議不用使用員工自己的Gmail創建GTM,而是要用公司的共用Gmail帳戶建立最高權限的帳戶,如有多位員工管理的需要,直接使用「授權」的方式即可,以免日後該員工離職或是輪調更換管理人員時,該GTM最高管理權限帳戶不好移轉。
當我們正式進到GTM的後台介面時,可以從上面的「管理」頁籤,進行帳戶與容器的設定。
以下簡單介紹一下帳戶與容器的權限:
帳戶權限
點擊進入「帳戶」底下的「使用者管理」後,可以將GTM的操作權限,授權給不同的使用者,分為:
- 系統管理員:最高權限,不僅可以設定容器的使用權限,也可以管理該帳戶的其他使用者權限(當然也可以刪除原本創建帳戶的管理者,例如老闆,因此要授權此權限時要特別注意)。
- 使用者:需由「系統管理員」設定管理容器的不同權限。
關於使用者相關詳細說明,可以參閱Google官方使用者和權限文件。
容器權限
在右側「容器」底下的「使用者管理」中,可以設定「容器」的使用權限,分為:
- 發布:容器最高的權限,可以任意設定容器內的代碼等,更可以自由選擇要發布的容器版本,建議一個容器只要有一個容器發布者即可,避免容器的發布版本錯亂,通常會是網站的主要工程師。
- 核准:除了可以任意設定容器的內容之外,也可以把設定好的容器建立為版本,但無法發布容器。
- 編輯:可以任意新增、編輯容器內的代碼、觸發器與變數等設定,也可以預覽容器的設定,但無法發布容器。
- 讀取:權限最低,只能查看容器內的代碼設定,無法預覽及發佈容器。
容器
在GTM中,帳戶與容器的關係,類似於 GA 中帳戶與資源的關係,容器可以放置多個代碼(Tag)與觸發條件(Trigger),因此可以大幅節省在網站埋設代碼的時間。
若是同時經營多個不相關的網域網站,則以一個容器對應一個網域或APP為主要規劃即可;反之,如果經營兩個彼此關聯的網站(例如澤稼有個客戶經營電商站,並且另外架設一個做為引流的行銷部落格),或是有經營一個網站搭配APP,那個建議可以共用一個容器即可。
每次設定好該容器的內容,如新增/編輯代碼,或是觸發條件等之後,都必須要發布容器才會生效,因此容器則會有許多版本。
代碼(Tag)
代碼就是程式碼,前文提到,就算是不會程式的行銷人員,也可以不用每次都依賴工程師設定網站的事件,主要就是因為GTM除了已經將代碼視覺化,也內建了許多代碼範本,只要直接填入相關參數,即可完成代碼的設定。
但是代碼設定完成後,並不會主動進行任何動作;代碼需要被某些條件「觸發」才會將資料傳送到如GA或是FB等第三方工具,已達成追蹤事件的功能。
GTM代碼分為:
- 精選代碼:由Google本身所開發,當然最主要也是針對Google自家的工具,例如最常見的GA事件追蹤代碼。
- 第三方代碼:非Google的開發者所開發的程式,例如「FB臉書像素轉換代碼」等。但因為第三方代碼是由非Google的開發廠商或人員所開發,當然在代碼來源風險上面,就是我們需要多留意的地方。
- 自訂代碼:顧名思義,就是自家工程師可以自行撰寫的程式。
更多代碼相關的說明可以參考Google官方關於代碼文件。
觸發條件(Trigger)
觸發條件則是用來定義代碼的啟動時機。例如我們希望使用者在打開頁面時,就觸發歡迎的提示視窗的代碼,或是當使用者點擊聯絡我們的表單送出按鈕時,才進行追蹤欄位資訊的代碼。
設定觸發條件須先選擇觸發條件的類型,例如:網頁瀏覽、按鈕點擊、表單提交等,更多觸發條件相關的說明可以參考Google官方觸發條件類型文件。
觸發條件由變數(Variables)、運算符號(Operators)與值(Values)所組成:
變數(Variables)
變數是定義觸發條件的執行的值,如我們想追蹤點擊,那點擊的網址就是我們要設定的變數,包含GTM提供的內建變數(例如:網頁網址、點擊物件、點擊文字等),以及由我們自訂的變數(例如「Click My ID=purchase_btn」,「Click My ID」不是 GTM內建提供,即為我們自訂的變數。
變數的格式為「{{變數名稱}}」,例如:{{Click URL}}。
運算符號
運算符號是用來定義變數與值之間的關係,兩者之間一定要對應得上才能確保觸發條件能順利運作,例如:等於、包含、未包含等;例如:「Click ID=purchase_btn」,「=」即為「運算符號」。
值
「值」為精準定義變數要是「什麼東西」,例如:「Click ID=purchase_btn」,「purchase_btn」即為「值」。當然,「值」也可以是「網頁網址」,或是自訂義的英文數字名稱。
又假如想要了解讀者在某個頁面捲動了多少深度,如果設定50%時要觸發某個追蹤代碼,則「滾軸深度」為變數;「值」為50%。
總合來說:如果我們希望「消費者在到達訂單成功頁面時(訂購完成),需要追蹤(紀錄)訂單資訊」,即可設定:
- 傳送什麼資料到哪個第三方工具:傳送「轉換價值」到「GoogleAds」;
- 觸發條件:某位使用者「到達訂單成功頁面」;
- 變數:設定「資料層變數(連至另一篇文章)」以及內建的「Page URL(網頁變數)」,例如{{url}}=checkout.html。
補充說明
其中,觸發條件較常使用的,除了「網頁瀏覽(PageView,廣義來說,通常指使用者開啟頁面)」、「網頁點擊(使用者點擊了某按鈕或位置)」、「表單提交」、「頁面捲動」之外,「元素可見度」也是常見的項目,但這名稱主要是因為翻譯的關係,實際上是指「當網頁中的某個元素在頁面中顯現」的時候觸發該代碼。例如,有些網站的選單是複合式的,點了某個選單項目,會延伸子選單,此子選單就是「正常狀態是隱藏,點了父選單時才會顯示,抑或是現在很多網站常用的「LazyLoad延遲載入圖片或影片」等。
且網頁元素可見度的觸發條件有以下設定的類型:
- 每個網頁一次:僅有第一次出現會觸發,後面該元素再次出現時,就不會再觸發;但切換頁面再回來該頁面或是重新刷新頁面時,該元素第一次出現一樣會觸發。
- 每個元素一次:這種情況通常會應用在「該觸發條件有多個元素」時,每個元素都只會在第一次出現時觸發。
- 每個元素在畫面上顯示時:該元素只要出現一次,就會觸發一次。
在網站安裝GTM代碼
註冊GTM
進入Google Tag Manager頁面後,需要先新增一個帳戶。
帳戶名稱主要輸入「公司名稱」以及選擇「主要服務地區」,接下來較重要的,是在容器欄位輸入網站網域名稱,並且勾後「目標廣告平台」(容器類型,分為「網站」、「iOS / Android App」…等)。
補充說明
底下「與 Google 和其他方匿名共用資料」選項,可以自行選擇是否勾選,主要是「是否要跟Google分享你的數據資料,讓Google官方進行分析」,但這部分完全不影響我們自身對數據或報表的解讀或呈現。(簡言之,就是單純分享給Google他們而已)
關於更多的「目標廣告平台(容器類型)」詳細說明,可以參考Google官方設定及安裝代碼管理工具文件。
補充說明
第一次使用GTM在建立帳戶的同時,就會同步建立第一個容器;如要另外建立新容器,則可以從「管理」的右側容器區塊新建容器:
安裝GTM代碼
確認帳戶與容器建立完成之後,會彈出GTM程式碼視窗,將兩段GTM程式碼貼到到網站中即可。這邊需要特別注意:兩段程式碼分別需要貼到網站中的「<head>」及「<body>開頭」的位置:
一般網站
如果是一般自己架的客製化網站,可以將兩段程式碼複製給工程師,請工程師貼入即可,但需要注意:要每一個頁面都貼(但通常工程師都會利用「範本」的方式架設網站,因此可以直接貼在範本模板的「<head>裡」及「<body>正下方」即可)。
WordPress網站
- 自訂主題編輯器
如果是使用WordPress架設的網站,可以直接在後台「佈景主題編輯器」中,直接開啟「header.php」檔案,直接將兩段程式碼各自貼在對應的區塊(每個主題不盡相同,例如截圖是澤稼之前的主題,非常地難用,因此進行改版重新設計) ,完成後點擊「更新檔案」按鈕即可。
- Site Kit by Google外掛套件
如果真的對程式碼完全沒概念,且是使用WordPress架設的網站,那麼也可以利用Google推出的Site Kit by Google外掛安裝GTM。
Step1
第一次使用時,會引導你串接GA的設定;這邊可以直接設定也可以後續再設定,但如果要直接串接GA,需要先到GA後台建立GA的資源。
Step2
點擊左側的Site Kit by Google外掛功能選單下的「Setting」之後,在右側的Site Kit by Google介面中,切換到「Connect More Services」頁籤,即可看到GTM,點擊「Set up Tag Mannger」按鈕。
Step3
此步驟須先至GTM後台設定好GTM的帳戶與容器,接著在Site Kit by Google直接串接GTM即可。
- Google Tag Manager for WordPress 外掛
除了Site Kit by Google外掛之外,你也可以試試使用 Google Tag Manager for WordPress 外掛,此外掛在使用較為容易,只要將預先於GTM後台設定完成的容器編號(GTM-xxxxxxx),複製貼上即可;而缺點則是此外掛僅針對GTM做使用,無法使用GA等其他工具。
如果真的完全不懂語法或程式,此外掛下方的容器相容性建議使用「停用相容」的選項即可。
備註說明
一般不推薦用外掛安裝,因為外掛安裝越多,網站載入的速度可能會受到影響,因此如果對WordPress的熟手,會建議直接修改主題即可。
其他電商平台
如果網站是電商平台,則可以依照下方連結進行設定GTM的安裝:
- SHOPLINE:Google 代碼管理工具 (GTM) 安裝方式
- Shopify:Google 代碼管理工具
- EasyStore:EasyStore 擴充套件
查看GTM代碼
如果錯過前面的程式碼彈窗,後續需要查看該容器的程式碼,可以從「管理->容器區塊->安裝 Google 代碼管理工具」中,查看該容器的程式碼:
利用預覽模式檢查GTM是否安裝成功
將GTM程式碼安裝到網站之後,會建議先檢查一下是否安裝正確,確保可以執行無誤。
除了在「架設網站系列3-安裝 GA4 與必備設定」提到的Tag Assistant可以做測試,也可以利用GTM裡的「預覽模式」,檢查GTM程式碼是否安裝成功。
Step1
回到GTM首頁,點擊頁面右上方的「預覽」按鈕,此「預覽」按鈕可以檢查GTM的代碼是否設置正確,當然也可以用來檢查安裝在網站裡的GTM程式碼是否正確。
Step2
確認網站網址後,直接連結;連結完成後,會自動開啟網站頁面,且右下角會有GTM預覽的信息提示窗,點擊「Finish」文字連結即可。
發布 Google Tag Manager 容器代碼
測試如果沒問題,即可提交變更,也就是發布在此容器相關的編輯與設定:直接在GTM後台主界面,點擊右上角的「提交」按鈕即可。
提交的彈窗上方有兩個頁籤:
- 建立版本:類似儲存的功能,並不會真的開始進行網站裡代碼的相關動作。通常用於還沒測試過代碼是否有問題,僅先儲存目前修改的進度。
- 發布及建立版本:除了建立版本,同時也會正式發布,網站裡的代碼會正式開始運作。通常如果確定代碼沒問題了,可以直接發佈。
不論是「建立」或是「發布」容器,皆可自行輸入版本號以及補充資訊。
發布後,即可在主界面的「版本」功能頁籤裡查看各版本的紀錄,也可以刪除過去的版本。
更多關於容器發布相關的說明,可以參閱Google官方發布、版本和核准文件。
系列文章
- GTM應用2-[串接篇]GTM串接GA4及FB Pixel應用
- GTM應用3-[事件篇]GTM安裝GA4事件追蹤
若需要額外的設計或是功能,或是想瞭解關於網站SEO相關問題,或是WordPress架站服務,歡迎立即諮詢澤稼,將有專人為您服務,如果是從本文進行接洽,則另有優惠,可免費幫您安裝GTM及GA3&4,以利後續您的網站追蹤。