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替網站完成甚麼事情，包含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串接，可以查看這篇

GTM3分鐘無痛教學-串接GA4。

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

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

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

詳閱GAds-轉換事件設定

GADS再行銷

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

自訂Html

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

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

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