Dspyder數位黑客|GTM教學|GA4教學

GTM基礎教學|新手必看3個重要GTM構成元素

GTM基礎教學|新手必看3個重要GTM構成元素

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埋設教學,基礎GTM埋設,GTMGA4串接

想要GTM替網站完成甚麼事情,包含FB Pixel、Google ADS轉換、自訂html,將按鈕埋設特定追蹤等。下方會有常用代碼設定介紹。

其中Facebook Pixel可以透過GTM裡面的自訂html進行事件的傳輸,也可以透過臉書提供的範本來進行埋設pixel像素事件。

觸發器(Trigger)

GTM埋設教學,基礎GTM埋設,GTMGA4串接

在什麼樣的「情形條件」要讓代碼執行啟動,例如,當Page URL contains “thanks”、當客人按下官網的按鈕、當使用者進入到首頁時、卷軸程度為50%時。

觸發條件有些時候會指定特定頁面,特定按鈕,因此可以透過「變數」附加在觸發器中,來做更詳細的觸發條件篩選。

變數(Varible)

GTM埋設教學,基礎GTM埋設,GTMGA4串接

從官網上的DataLayer獲取的網站資料資料,包括可以使用在代碼裡的參數。例如,透過GTM追蹤GA4電子商務轉換事件,攜帶商品Value、Goolge轉換、攜帶使用者信箱等。另外一個使用方式是,明確定義出Trigger的目地,指定網頁、指定按鈕、指定..等。

舉例來說,當你不想要指定網站上每一頁都觸發,這時候你就可以指定變數 – 當 Page URL 包含 thanks。
總而言之,變數是可以放在代碼,當作參數;也可以放在觸發器,當作條件設置

快速理解 – GTM三元素

代碼為最上層、觸發為中間層、變數為最下層。

「代碼」包含「觸發器」「變數」

「觸發器」包含「變數條件」

「變數」可被「代碼」「觸發器」包含

GTM常用的串接代碼

GA4設定 – 將網站與GA4連結在一起

GTM埋設教學,基礎GTM埋設,GTMGA4串接

GTM是負責串接兩邊連結的橋樑,常見會這樣操作的,大多都會自架網站,或是想要擁有多組GA4追蹤資源。目前GA4設定已經全面變成GOOGLE TAG但如果你是原本就有設定好的,無須更動,官方會自動幫你換成Gtag的設定。

自定事件傳送至GA4

GTM埋設教學,基礎GTM埋設,GTMGA4串接

例如點擊按鈕、追蹤登入成功、表單提交、購買送出等。如果想要看GA4與GTM串接,可以查看這篇

GTM3分鐘無痛教學-串接GA4

如果你是想要自行蓋自訂事件/自訂事件漏斗,你可以參閱這篇

GADS轉換追蹤 – 傳送GADS轉換事件

GTM埋設教學,基礎GTM埋設,GTMGA4串接

可提供後續行銷人員評估KPI、優化等,
※小提示:剛建立Gads轉換的人,記得都要建立”轉換連接器,條件用”All PAGE”即可。

詳閱GAds-轉換事件設定

GADS再行銷

GTM埋設教學,基礎GTM埋設,GTMGA4串接

將造訪你的網站用戶,打包起來再次投遞廣告。

自訂Html

GTM埋設教學,基礎GTM埋設,GTMGA4串接

用在代碼沒有出現在GTM的,例如LINE LAP的轉換評估,FB PIXEL(當然目前也有範本可以使用),或是第三方追蹤、跑馬燈,都可以直接用cHtml埋設,或是<script></script>以自訂JS的形式撰寫客製化追蹤。透過GTM來自定JS,通常會需要用到CSS-Selector來進行網站元件的定位,後續可以追取電商金額的價值,並回傳給GA4

基本上,大多品牌方、代理方,只要懂一般網站事件追蹤,即可用GTM處理全部。GTM其實可以幫網站處理很多追蹤,全看工程員的邏輯思維來運用。

error: