在之前的文章中，我們介紹了什麼是 Google 代碼管理工具（GTM），幫助大家理解使用 GTM 的好處、方便性以及其運作原理，其中我們也簡略提到了 GTM 三大基本元素：「代碼」、「觸發條件」以及「變數」，如果要完成一個追蹤事件的設定以及正確取得所需的事件參數值，這三個東西缺一不可。
希望透過這篇文章，可以幫助初踏入 GTM 地獄世界的初學者，有一個了解 GTM 三大基本元素的全面觀，未來在規劃追蹤事件或是想在網站上執行特定動作時，初期就可以在腦海中有一個建置邏輯，也方便在會議上即時回答老闆奇怪的問題。
本篇重點
從生活來看 GTM 代碼、觸發條件以及變數
假設我們今天要設定一個 GA4 追蹤事件，這三項基本元素，在追蹤事件流程當中，各自負責扮演的角色是什麼？
代碼：要做什麼？
觸發條件：何時要做？
變數：過程中傳遞的資訊。
舉個生活中的例子，例如：中午接到老婆打來的電話，被告知當下午四點小孩子放學的時候，要去學校接小孩去安親班上課，並打電話回報老婆小孩子的狀況。
代碼：去學校接小孩到安親班上課。（做什麼？）
觸發條件：下午四點小孩子放學的時候。（何時做？）
變數：小孩子的狀況（傳遞的資訊）
接收資訊：老婆（GA4）
在這樣的例子中，可以把老婆想像成是 Google Analytics 4，負責接收與記錄相關的資訊，幾點去接小孩到安親班上課則分別是觸發條件以及代碼，而小孩子的狀況例如是否肚子餓、是否疲倦等，就是變數所要傳遞的資訊。
再舉個例子，如果今天女朋友跟你說肚子餓了，你的求生慾大腦就會開始立刻馬上找她可能想吃的餐廳。
代碼：找女朋友想吃的餐廳（做什麼？）
觸發條件：女朋友跟你說肚子餓了（何時做？）
變數：女朋友的心情狀態（傳遞的資訊）
接收資訊：求生慾的大腦（GA4）
從網站追蹤來看 GTM 代碼、觸發條件以及變數
再來看行銷日常場景，如果今天要追蹤網站上特定按鈕的點擊，譬如說：加入購物車（add_to_cart），老闆想要透過 GA4 了解每天把商品加入購物車的人有多少？加了什麼商品？我們就可以透過 GTM 來執行這件事情。
代碼：記錄加入購物車這個動作以及加入的商品，並發送到 GA4（做什麼？）
觸發條件：當使用者點擊加入購物車的按鈕時（何時做？）
變數：商品名稱以及價格等（傳遞的資訊）
接收資訊：GA4
透過這樣的方式，行銷人員就可以自行透過 GTM 在網站上做很多事情，甚至可以在網站上設定 Pop Up 廣告或是訊息，例如：當使用者捲動頁面到畫面 75% 位置的時候，跳出電子報訂閱視窗或是優惠代碼，鼓勵使用者訂閱或是下單。
代碼：跳出訂閱視窗 or 優惠代碼（做什麼？）
觸發條件：當使用者捲動頁面到畫面 75% 位置的時候 （何時做？）
變數：使用者填入的 Email 或是取得的優惠代碼（傳遞的資訊）
接收資訊：GA4
這些都是透過代碼、觸發條件以及變數共同完成的工作，現在我們有了個概念，再來就是看看在 GTM 中這些東西分別在哪裡？以及進一步了解代碼、觸發條件和變數的類型。
GTM 代碼（Tag）：做什麼？
如同上述所說，代碼主要是在執行動作，在 GTM 中的代碼有分很多種類型（超過 50 種），一般常用到的會是 GA4 評估 ID 安裝、 Google Analytics 事件追蹤、Google Ad 轉換追蹤、Google Ads 再行銷、Meta Pixel 安裝以及透過自訂 Javascript 執行，像是 Pop Up 視窗的 JS 腳本等等。
在 GTM 介面右側選擇「代碼」 > 右上角「新增」 > 可以看到相當多代碼類型
選擇「Google Analytic（分析）」 以及「Google Ads」可以展開看到更多專屬的代碼類型。
未來的文章中，我們會再逐一說明各種代碼類型的應用，初期只要先了解到在 GTM 中有什麼代碼類型可以應用就可以了，未來針對需求，有相對應的代碼類型可以應用。
GTM 觸發條件（Triggers）：何時做？
代碼只負責聽命令執行，因此必須要有人告訴代碼，你何時該執行？
這時候就是觸發條件登場的時候了，GTM 本身內建相當多種觸發方式，基本上已經足夠滿足大部分的網站追蹤設定，至於更進階的透過 Data Layer 資料層建制的觸發事件，我們會另外做一期跟大家講解，現在只要先了解觸發條件的類型以及原理。
簡單介紹一下幾個常用的基本觸發類型：
- 網頁瀏覽觸發：當使用者觀看網頁時，代碼隨即啟動，我們可以指定特定網頁或是全部網頁都啟動代碼（例如：GA4 基本代碼）
- 僅連結：當使用者點擊特定連結的按鈕、文字或是元素（ID 或是 Class）時，即啟動代碼。
- 捲動頁數：當使用者捲動頁面到特定位置時，即啟動代碼。
- 表單提交：當使用者提交表單時（form_submit），即啟動代碼。
- 初始化：當頁面載入時，立即啟動代碼。
- 元素可見度：當特定元素如 ID 或是 Class 出現在畫面中時，即啟動代碼。
- Youtube 影片：顧名思義，就是當使用者開始、暫停播放 Youtube 影片時，啟動代碼。
族繁不及備載，未來也將會有更多設定方式的介紹文章，透過實作學習是最快的方式，現在只要知道全貌，未來如果老闆提出了無理相關的資訊跟需求想要了解時，你腦海中大概可以有個輪廓，理解這件事情透過 GTM 能不能做到？可以怎麼做？難易度如何？是否需要網站工程師協助等。
關於「觸發條件」，可以參考這篇文章：「GTM 觸發條件介紹：我們該在「何時」使用「何種」觸發條件？」，將有更詳細的解釋。。
GTM 變數（Variables）：傳遞資訊 & 明確告知什麼「時候」觸發
變數是電腦語言的一種，顧名思義就是會變動的數值，讓你可以儲存特定項目的「值」並且將這個「值」傳遞給需要使用的地方，例如回傳給 GA4，讓我們不用在每次傳遞資訊時，填入絕對數值。
在 Google Tag Manager（GTM）中，變數（Variables）用於收集和儲存資訊，變數允許你在代碼（Tags）、觸發條件（Triggers）和其它配置中使用特定的數據「值」，這些數據「值」可以來自於網頁內容、使用者操作所觸發，或是其他來源。
可能是商品名稱、價格、ID、SKU、網址、主機名稱、年齡、使用者填入的電話、點擊的文字以及連結等，都可以設定為變數方便我們抓取資料。
透過變數，我們可以動態地抓取和利用這些數據，以便在 Google Analytics 或其它第三方工具中進行分析和追蹤。
在 GTM 變數介面中，可以看到有相當多的內建變數可以供我們使用，例如來自資料層的變數 「Click Classes」、「Click ID」、「Click Text」 、「Click URL」 或是「捲動深度」變數等等。
除了網頁相關資訊的傳遞以外，在觸發條件中，我們也會用到這邊的變數來設定條件，當符合條件時，啟動代碼，例如：當 Click ID（這是變數） 包含「ThisIsID」的時候，啟動點擊事件代碼。
在右上角「設定」中，可以選擇更多的內建變數，逐一勾選之後，就會在上圖的變數介面中出現。
而透過 GTM 的預覽模式「變數」頁籤，我們也可以看到相當多的網頁資訊供我們使用，以捲動畫面的事件為例，我們可以看到事件發生所在「網頁位置」、「捲動深度」、「捲動方向」以及觸發的 GA4 代碼等等資訊。
這些變數資訊提供了寶貴的數據，可以用於分析使用者行為、優化網頁設計和改善用戶體驗，同時，我們也可以將這些變數應用於觸發條件的設定或是事件參數的設定中，進一步細化事件追蹤和分析。
假設我們今天點了網頁上的某個連結，以點擊事件為例。
在上圖中，由於是捲動事件，我們並未點擊任何按鈕或連結，所以與點擊相關的變數都顯示為 undefined（未定義）。但如果我們真的點擊了某個連結，我們其實是可以得到更多資訊的。
可以看到 Click Text 以及 Click URL 都有了相對應的值，連點擊的 Class 和元素都有傳入，當這些資訊送到 GA4 當中，我們就可以透過 GA4 的報表看到使用者點擊連結的頁面網址以及其頁面標題。
同時，我們也可以將這變數應用在觸發條件當中，例如：當 Click URL 包含 scroll-tracking-setting-by-gtm 時，啟動代碼。
或是透過事件設定，將相對應的值傳送到 GA4 當中（或任何對應的接收工具）。
了解三者關係後，更好規劃 GTM 設定
了解了代碼、觸發條件和變數之間的關係後，我們能更好地規劃 GTM 的設定。在初期階段，只需牢記這三個基本元素各自的角色，未來在設計事件追蹤時就會更容易理清楚。
1. 代碼：這是用來執行特定操作的指令，我們需要明確了解每段代碼的功能，即要做什麼事情。
2. 觸發條件：這是決定代碼何時被觸發的規則，我們需要確定在何種情況下應該執行代碼，也就是何時要做這個事情。
3. 變數：這是在執行過程中，我們要傳遞或是利用的動態資訊。
特別是在網頁或網站初步建置時，我們可以先清楚地明確要追蹤的項目以及需要的變數。
例如，是否能夠給特定的 DOM 元素設置一個獨特的 ID，這樣未來在設定觸發條件時就會更加容易，透過與網站工程師的事前溝通，我們可以更好地準備好所需的資訊，進而使日後在 GTM 的設定上更加順暢。
延伸閱讀
如果你很喜歡這篇文章並且覺得內容有幫助，又剛有些多餘時間，歡迎看看其它文章，繼續探索（這坑？這地獄？這片樂土？）
同時，如果對於內容有疑問或是建議，也歡迎你留言告訴我們：）
