GTM基本教學,包括代碼、觸發器、變數的細節解說,如何搭配每一個區域應用在GTM裡面。以及常見的GTM會使用的串接代碼,例如GA4自訂事件、GADS連接等。都是可以一次在GTM完成,而不需要經過工程師的埋設原始碼動作。
GTM已經全面升級為GOOGLE TAG,在埋設基礎代碼並沒有太大的差別。但有著「繼承變數的新功能」。一樣也是新增完Google Tag 後即可以開始做GA4的自訂事件、自訂事件漏斗的處理。
章節內容
GTAG新介面
目前GTM的基本Config都已經變成Google Tag,大致跟以前的GA4設定沒有差別,不過多出「事件參數繼承、以及變動代碼全域參數的設定」。如果GTM有包含傳送SERVER,這時候需要在GTM中的參數,多一個「send_container_url」並且帶上GTM標記伺服器的網址。
3個GTM重要架構
GTM三個重要元素:代碼、觸發器、變數。
代碼:你想要網站執行的指令。
觸發器:你想要甚麼時候執行指令。
變數:執行指令時附帶的資料;將觸發器的條件細分。
代碼(Tag)
想要GTM替網站完成甚麼事情,包含FB Pixel、Google ADS轉換、自訂html,將按鈕埋設特定追蹤等。下方會有常用代碼設定介紹。
其中Facebook Pixel可以透過GTM裡面的自訂html進行事件的傳輸,也可以透過臉書提供的範本來進行埋設pixel像素事件。
觸發器(Trigger)
在什麼樣的「情形條件」要讓代碼執行啟動,例如,當Page URL contains “thanks”、當客人按下官網的按鈕、當使用者進入到首頁時、卷軸程度為50%時。
觸發條件有些時候會指定特定頁面,特定按鈕,因此可以透過「變數」附加在觸發器中,來做更詳細的觸發條件篩選。
變數(Varible)
從官網上的DataLayer獲取的網站資料資料,包括可以使用在代碼裡的參數。例如,透過GTM追蹤GA4電子商務轉換事件,攜帶商品Value、Goolge轉換、攜帶使用者信箱等。另外一個使用方式是,明確定義出Trigger的目地,指定網頁、指定按鈕、指定..等。
舉例來說,當你不想要指定網站上每一頁都觸發,這時候你就可以指定變數 – 當 Page URL 包含 thanks。
總而言之,變數是可以放在代碼,當作參數;也可以放在觸發器,當作條件設置。
快速理解 – GTM三元素
代碼為最上層、觸發為中間層、變數為最下層。
「代碼」包含「觸發器」「變數」
「觸發器」包含「變數條件」
「變數」可被「代碼」「觸發器」包含
GTM常用的串接代碼
GA4設定 – 將網站與GA4連結在一起
GTM是負責串接兩邊連結的橋樑,常見會這樣操作的,大多都會自架網站,或是想要擁有多組GA4追蹤資源。目前GA4設定已經全面變成GOOGLE TAG但如果你是原本就有設定好的,無須更動,官方會自動幫你換成Gtag的設定。
自定事件傳送至GA4
例如點擊按鈕、追蹤登入成功、表單提交、購買送出等。如果想要看GA4與GTM串接,可以查看這篇
GADS轉換追蹤 – 傳送GADS轉換事件
可提供後續行銷人員評估KPI、優化等,
※小提示:剛建立Gads轉換的人,記得都要建立”轉換連接器“,條件用”All PAGE”即可。
GADS再行銷
將造訪你的網站用戶,打包起來再次投遞廣告。
自訂Html
用在代碼沒有出現在GTM的,例如LINE LAP的轉換評估,FB PIXEL(當然目前也有範本可以使用),或是第三方追蹤、跑馬燈,都可以直接用cHtml埋設,或是<script></script>以自訂JS的形式撰寫客製化追蹤。透過GTM來自定JS,通常會需要用到CSS-Selector來進行網站元件的定位,後續可以追取電商金額的價值,並回傳給GA4
基本上,大多品牌方、代理方,只要懂一般網站事件追蹤,即可用GTM處理全部。GTM其實可以幫網站處理很多追蹤,全看工程員的邏輯思維來運用。