GTM應用

GTM應用1-[安裝篇]GTM簡介與安裝

網站架設完成之後,往往要埋入許多追蹤碼,可以藉由免費的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元素架構

帳戶

帳戶是GTM架構中的最高層級,一個帳戶可以用來管理一個或多個容器,通常建議一個容量對應一個網域,因此如果有多個子網域,則會建議建立多個容器。

注意事項

如果是公司行號,建議不用使用員工自己的Gmail創建GTM,而是要用公司的共用Gmail帳戶建立最高權限的帳戶,如有多位員工管理的需要,直接使用「授權」的方式即可,以免日後該員工離職或是輪調更換管理人員時,該GTM最高管理權限帳戶不好移轉。

當我們正式進到GTM的後台介面時,可以從上面的「管理」頁籤,進行帳戶與容器的設定。

GTM管理帳戶與容器

以下簡單介紹一下帳戶與容器的權限:

GTM的管理權限

帳戶權限

點擊進入「帳戶」底下的「使用者管理」後,可以將GTM的操作權限,授權給不同的使用者,分為:

  • 系統管理員:最高權限,不僅可以設定容器的使用權限,也可以管理該帳戶的其他使用者權限(當然也可以刪除原本創建帳戶的管理者,例如老闆,因此要授權此權限時要特別注意)。
  • 使用者:需由「系統管理員」設定管理容器的不同權限。

GTM帳戶權限設定

關於使用者相關詳細說明,可以參閱Google官方使用者和權限文件

容器權限

在右側「容器」底下的「使用者管理」中,可以設定「容器」的使用權限,分為:

  • 發布:容器最高的權限,可以任意設定容器內的代碼等,更可以自由選擇要發布的容器版本,建議一個容器只要有一個容器發布者即可,避免容器的發布版本錯亂,通常會是網站的主要工程師。
  • 核准:除了可以任意設定容器的內容之外,也可以把設定好的容器建立為版本,但無法發布容器。
  • 編輯:可以任意新增、編輯容器內的代碼、觸發器與變數等設定,也可以預覽容器的設定,但無法發布容器。
  • 讀取:權限最低,只能查看容器內的代碼設定,無法預覽及發佈容器。

GTM容器權限設定

容器

在GTM中,帳戶與容器的關係,類似於 GA 中帳戶與資源的關係,容器可以放置多個代碼(Tag)與觸發條件(Trigger),因此可以大幅節省在網站埋設代碼的時間。

若是同時經營多個不相關的網域網站,則以一個容器對應一個網域或APP為主要規劃即可;反之,如果經營兩個彼此關聯的網站(例如澤稼有個客戶經營電商站,並且另外架設一個做為引流的行銷部落格),或是有經營一個網站搭配APP,那個建議可以共用一個容器即可。

每次設定好該容器的內容,如新增/編輯代碼,或是觸發條件等之後,都必須要發布容器才會生效,因此容器則會有許多版本。

GTM容器版本

代碼(Tag)

代碼就是程式碼,前文提到,就算是不會程式的行銷人員,也可以不用每次都依賴工程師設定網站的事件,主要就是因為GTM除了已經將代碼視覺化,也內建了許多代碼範本,只要直接填入相關參數,即可完成代碼的設定。

但是代碼設定完成後,並不會主動進行任何動作;代碼需要被某些條件「觸發」才會將資料傳送到如GA或是FB等第三方工具,已達成追蹤事件的功能。

GTM代碼分為:

  • 精選代碼:由Google本身所開發,當然最主要也是針對Google自家的工具,例如最常見的GA事件追蹤代碼。
  • 第三方代碼:非Google的開發者所開發的程式,例如「FB臉書像素轉換代碼」等。但因為第三方代碼是由非Google的開發廠商或人員所開發,當然在代碼來源風險上面,就是我們需要多留意的地方。
  • 自訂代碼:顧名思義,就是自家工程師可以自行撰寫的程式。

更多代碼相關的說明可以參考Google官方關於代碼文件

GTM代碼

觸發條件(Trigger)

觸發條件則是用來定義代碼的啟動時機。例如我們希望使用者在打開頁面時,就觸發歡迎的提示視窗的代碼,或是當使用者點擊聯絡我們的表單送出按鈕時,才進行追蹤欄位資訊的代碼。

設定觸發條件須先選擇觸發條件的類型,例如:網頁瀏覽、按鈕點擊、表單提交等,更多觸發條件相關的說明可以參考Google官方觸發條件類型文件

GTM的觸發條件

GTM的觸發條件

觸發條件由變數(Variables)、運算符號(Operators)與值(Values)所組成:

GTM的觸發條件組成元素

變數(Variables)

變數是定義觸發條件的執行的值,如我們想追蹤點擊,那點擊的網址就是我們要設定的變數,包含GTM提供的內建變數(例如:網頁網址、點擊物件、點擊文字等),以及由我們自訂的變數(例如「Click My ID=purchase_btn」,「Click My ID」不是       GTM內建提供,即為我們自訂的變數。

變數的格式為「{{變數名稱}}」,例如:{{Click URL}}。

GTM觸發條件的變數

運算符號

運算符號是用來定義變數與值之間的關係,兩者之間一定要對應得上才能確保觸發條件能順利運作,例如:等於、包含、未包含等;例如:「Click ID=purchase_btn」,「=」即為「運算符號」。

GTM觸發條件的運算符號

「值」為精準定義變數要是「什麼東西」,例如:「Click ID=purchase_btn」,「purchase_btn」即為「值」。當然,「值」也可以是「網頁網址」,或是自訂義的英文數字名稱。

又假如想要了解讀者在某個頁面捲動了多少深度,如果設定50%時要觸發某個追蹤代碼,則「滾軸深度」為變數;「值」為50%。

GTM觸發條件的值

總合來說:如果我們希望「消費者在到達訂單成功頁面時(訂購完成),需要追蹤(紀錄)訂單資訊」,即可設定:

  • 傳送什麼資料到哪個第三方工具:傳送「轉換價值」到「GoogleAds」;
  • 觸發條件:某位使用者「到達訂單成功頁面」;
  • 變數:設定「資料層變數(連至另一篇文章)」以及內建的「Page URL(網頁變數)」,例如{{url}}=checkout.html。
補充說明

其中,觸發條件較常使用的,除了「網頁瀏覽(PageView,廣義來說,通常指使用者開啟頁面)」、「網頁點擊(使用者點擊了某按鈕或位置)」、「表單提交」、「頁面捲動」之外,「元素可見度」也是常見的項目,但這名稱主要是因為翻譯的關係,實際上是指「當網頁中的某個元素在頁面中顯現」的時候觸發該代碼。例如,有些網站的選單是複合式的,點了某個選單項目,會延伸子選單,此子選單就是「正常狀態是隱藏,點了父選單時才會顯示,抑或是現在很多網站常用的「LazyLoad延遲載入圖片或影片」等。

且網頁元素可見度的觸發條件有以下設定的類型:

  • 每個網頁一次:僅有第一次出現會觸發,後面該元素再次出現時,就不會再觸發;但切換頁面再回來該頁面或是重新刷新頁面時,該元素第一次出現一樣會觸發。
  • 每個元素一次:這種情況通常會應用在「該觸發條件有多個元素」時,每個元素都只會在第一次出現時觸發。
  • 每個元素在畫面上顯示時:該元素只要出現一次,就會觸發一次。

在網站安裝GTM代碼

註冊GTM

進入Google Tag Manager頁面後,需要先新增一個帳戶。

GTM新增帳戶

帳戶名稱主要輸入「公司名稱」以及選擇「主要服務地區」,接下來較重要的,是在容器欄位輸入網站網域名稱,並且勾後「目標廣告平台」(容器類型,分為「網站」、「iOS / Android App」…等)。

補充說明

底下「與 Google 和其他方匿名共用資料」選項,可以自行選擇是否勾選,主要是「是否要跟Google分享你的數據資料,讓Google官方進行分析」,但這部分完全不影響我們自身對數據或報表的解讀或呈現。(簡言之,就是單純分享給Google他們而已)

與 Google 和其他方匿名共用資料

關於更多的「目標廣告平台(容器類型)」詳細說明,可以參考Google官方設定及安裝代碼管理工具文件

GTM容器設定

補充說明

第一次使用GTM在建立帳戶的同時,就會同步建立第一個容器;如要另外建立新容器,則可以從「管理」的右側容器區塊新建容器:

GTM新增容器

安裝GTM代碼

不同類型網站安裝GTM代碼

確認帳戶與容器建立完成之後,會彈出GTM程式碼視窗,將兩段GTM程式碼貼到到網站中即可。這邊需要特別注意:兩段程式碼分別需要貼到網站中的「<head>」及「<body>開頭」的位置:

GTM程式碼

一般網站

如果是一般自己架的客製化網站,可以將兩段程式碼複製給工程師,請工程師貼入即可,但需要注意:要每一個頁面都貼(但通常工程師都會利用「範本」的方式架設網站,因此可以直接貼在範本模板的「<head>裡」及「<body>正下方」即可)。

WordPress網站

  • 自訂主題編輯器

如果是使用WordPress架設的網站,可以直接在後台「佈景主題編輯器」中,直接開啟「header.php」檔案,直接將兩段程式碼各自貼在對應的區塊(每個主題不盡相同,例如截圖是澤稼之前的主題,非常地難用,因此進行改版重新設計) ,完成後點擊「更新檔案」按鈕即可。

WordPress安裝GTM程式碼

  • Site Kit by Google外掛套件

如果真的對程式碼完全沒概念,且是使用WordPress架設的網站,那麼也可以利用Google推出的Site Kit by Google外掛安裝GTM。

Step1

第一次使用時,會引導你串接GA的設定;這邊可以直接設定也可以後續再設定,但如果要直接串接GA,需要先到GA後台建立GA的資源。
WordPress的Site Kit by Google引導串接GA

Step2

點擊左側的Site Kit by Google外掛功能選單下的「Setting」之後,在右側的Site Kit by Google介面中,切換到「Connect More Services」頁籤,即可看到GTM,點擊「Set up Tag Mannger」按鈕。
WordPress的Site Kit by Google外掛套件設定GTM

Step3

此步驟須先至GTM後台設定好GTM的帳戶與容器,接著在Site Kit by Google直接串接GTM即可。
WordPress的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的Google Tag Manager for WordPress外掛套件串接GTM

備註說明

一般不推薦用外掛安裝,因為外掛安裝越多,網站載入的速度可能會受到影響,因此如果對WordPress的熟手,會建議直接修改主題即可。

其他電商平台

如果網站是電商平台,則可以依照下方連結進行設定GTM的安裝:

查看GTM代碼

如果錯過前面的程式碼彈窗,後續需要查看該容器的程式碼,可以從「管理->容器區塊->安裝 Google 代碼管理工具」中,查看該容器的程式碼:

查看GTM的容器程式碼

利用預覽模式檢查GTM是否安裝成功

將GTM程式碼安裝到網站之後,會建議先檢查一下是否安裝正確,確保可以執行無誤。

除了在「架設網站系列3-安裝 GA4 與必備設定」提到的Tag Assistant可以做測試,也可以利用GTM裡的「預覽模式」,檢查GTM程式碼是否安裝成功。

Step1

回到GTM首頁,點擊頁面右上方的「預覽」按鈕,此「預覽」按鈕可以檢查GTM的代碼是否設置正確,當然也可以用來檢查安裝在網站裡的GTM程式碼是否正確。
GTM的預覽模式按鈕

Step2

確認網站網址後,直接連結;連結完成後,會自動開啟網站頁面,且右下角會有GTM預覽的信息提示窗,點擊「Finish」文字連結即可。
連結GTM與網站
網站的GTM信息彈窗

GTM預覽頁面

發布 Google Tag Manager 容器代碼

測試如果沒問題,即可提交變更,也就是發布在此容器相關的編輯與設定:直接在GTM後台主界面,點擊右上角的「提交」按鈕即可。
GTM的提交按鈕

提交的彈窗上方有兩個頁籤:

  • 建立版本:類似儲存的功能,並不會真的開始進行網站裡代碼的相關動作。通常用於還沒測試過代碼是否有問題,僅先儲存目前修改的進度。
  • 發布及建立版本:除了建立版本,同時也會正式發布,網站裡的代碼會正式開始運作。通常如果確定代碼沒問題了,可以直接發佈。

不論是「建立」或是「發布」容器,皆可自行輸入版本號以及補充資訊。

GTM的提交設定彈窗

發布後,即可在主界面的「版本」功能頁籤裡查看各版本的紀錄,也可以刪除過去的版本。

GTM的版本紀錄

更多關於容器發布相關的說明,可以參閱Google官方發布、版本和核准文件

系列文章

若需要額外的設計或是功能,或是想瞭解關於網站SEO相關問題,或是WordPress架站服務,歡迎立即諮詢澤稼,將有專人為您服務,如果是從本文進行接洽,則另有優惠,可免費幫您安裝GTMGA3&4,以利後續您的網站追蹤。