更新時間：2024年12月4號
在GTM中，變數（Variable）是最重要的核心功能之一。
無論是設定GA4事件參數、建立觸發條件、讀取Cookie、取得網址參數，或是從Data Layer擷取資料，都離不開變數。
如果把GTM想像成一套自動化系統：
因此，想要學好GTM與GA4事件追蹤，首先必須理解變數的運作方式。
什麼是GTM變數？
GTM官方的定義如下：
變數是具名的預留位置，系統會在程式執行時自動填入對應的值。
簡單來說，變數就是一個用來儲存資料的容器。
例如：
| 變數 | 值 |
|---|---|
| {{Page URL}} | https://www.haranhuang.com |
| {{Click URL}} | https://www.google.com |
| {{Click Text}} | 立即購買 |
| {{User ID}} | 123456 |
當使用者瀏覽網站或觸發事件時，GTM會動態取得這些值，並提供給觸發條件或代碼使用。
GTM變數在哪裡設定？
在這裡可以看到兩大類變數：
GTM變數分類
內建變數（Built-in Variables）
它是不需要自行建立，僅需勾選啟用，無法修改內容，不同容器類型提供的變數不同
網頁
假設網址為：
https://www.haranhuang.com/google/google-tag-manager?cid=132d
對應各網頁變數說明如下：
| 變數 | 中文名稱 | 回傳值 |
|---|---|---|
| Page URL | 網頁網址 | https://www.haranhuang.com/google/google-tag-manager?cid=132 |
| Page Hostname | 網頁主機名稱 | http://www.haranhuang.com |
| Page Path | 網頁路徑 | /google/google-tag-manager |
| Referrer | 參照網址 | 上一頁網址 |
公用程式
| 變數 | 中文名稱 | 回傳值 |
|---|---|---|
| Analytics Client ID | Analytics 用戶端 ID | Client ID |
| Analytics Session ID | Analytics 工作階段 ID | Session ID |
| Analytics Session Number | Analytics 工作階段編號 | 工作階段編號 |
| Event | 事件 | 取得Data Layer中的event值 |
| Environment Name | 環境名稱 | 例如 Live、Latest、Now Editing 或自訂環境名稱 |
| Container ID | 容器 ID | 例如GTM-TCH6XWZ |
| Container Version | 容器版本 | 每次發布容器都會產生新的版本號，是個數字 |
| Random Number | 隨機號碼 | 每次讀取都會產生新的隨機值 |
| HTML ID | HTML ID | 可用於判斷代碼執行成功或失敗，通常搭配代碼觸發順序使用 |
錯誤
當使用 JavaScript Error Trigger 時可使用。
| 變數 | 中文名稱 | 回傳值 |
|---|---|---|
| Error Message | 錯誤訊息 | JavaScript 錯誤觸發時，回傳錯誤訊息內容 |
| Error URL | 錯誤網址 | JavaScript 錯誤發生的網址 |
| Error Line | 錯誤行數 | JavaScript 錯誤發生的程式碼行數 |
| Debug Mode | 偵錯模式 | 如果GTM容器目前處於預覽模式，則回傳 true，否則回傳 false |
點擊
點擊追蹤最常使用的一組變數。
假設點擊位置的程式為：
<a id="buy-now" class="btn primary-btn" href="/contact"> 立即購買 </a>
對應各點擊變數說明如下
| 變數 | 中文名稱 | 回傳值 |
|---|---|---|
| Click Element | 點擊元素 | <a id=”buy-now” class=”btn primary-btn” href=”/contact”>立即購買</a> |
| Click Classes | 點擊類別 | 取得被點擊元素的class btn primary-btn |
| Click ID | 點擊 ID | 取得被點擊元素的IDbuy-now |
| Click Target | 點擊目標 | 空值（若設定 target=”_blank” 則回傳 _blank） |
| Click URL | 點擊網址 | 取得連結網址/contact |
| Click Text | 點擊文字 | 取得按鈕文字“立即購買” |
實務上最常使用Click ID、Click Classes、Click Text。
表單
當使用 Form Submission Trigger 時可使用。
假設表單的程式為：
<form id="contact-form" class="form contact-form" action="/thank-you" target="_self"> <button type="submit">送出表單</button> </form>
對應各表單變數說明如下：
| 變數 | 中文名稱 | 回傳值 |
|---|---|---|
| Form Classes | 表單 Class | form contact-form |
| Form Element | 表單 DOM | <form id=”contact-form” class=”form contact-form” action=”/thank-you” target=”_self”>…</form> |
| Form ID | 表單 ID | contact-form |
| Form Target | 表單Target | _self |
| Form Text | 表單文字 | 送出表單 |
| Form URL | 表單網址 | /thank-you |
這樣與前面的點擊變數範例保持一致：
- Click 系列使用同一個 <a> 範例
- Form 系列使用同一個 <form> 範例
回傳值直接對應範例中的實際內容
常見用途：表單送出追蹤、 Lead收集分析、詢價表單轉換追蹤
紀錄
在SPA追蹤中，在商品列表頁從
https://www.haranhuang.com/product/list#page=1
跳轉到
https://www.haranhuang.com/product/list#page=2
對應各記錄變數說明如下：
| 變數 | 中文名稱 | 回傳值 |
|---|---|---|
| History Source | 記錄來源 | pushState 或 replaceState |
| New History Fragment | 新記錄片段 | #page=2 |
| New History State | 新記錄狀態 | {page: 2, category: “shoes”} |
| Old History Fragment | 舊記錄片段 | #page=1 |
| Old History State | 舊記錄狀態 | {page: 1, category: “shoes”} |
捲動
假設使用者在此頁面往下捲動到 50%（垂直捲動），各捲動變數說明如下：
| 變數 | 中文名稱 | 回傳值 |
|---|---|---|
| Scroll Depth Threshold | 捲動深度門檻 | 使用單位取決於Units選擇的類型，回傳50 |
| Scroll Depth Units | 捲動深度單位 | 用百分比還是像素，這裡是百分比，回傳percent |
| Scroll Direction | 捲動方向 | 是水平和還是垂直，這裡是垂直，回傳vertical |
一句話理解：
- Threshold = 捲動到多少
- Units = 用百分比還是像素
- Direction = 往哪個方向捲動
常見用途： 內容閱讀深度分析、長文互動分析、Landing Page 成效評估
影片
使用者播放影片（https://www.youtube.com/watch?v=gvHcXIF0rTU）並觀看到30%暫停。
各影片變數說明如下：
| 變數 | 中文名稱 | 回傳值 |
|---|---|---|
| Video Current Time | 影片目前時間 | 45 |
| Video Duration | 影片總長度 | 150 |
| Video Percent | 影片播放百分比 | 30 |
| Video Provider | 影片提供者 | YouTube |
| Video Status | 影片狀態 | pause |
| Video Title | 影片標題 | GA4 GTM 事件追蹤教學 |
| Video URL | 影片網址 | https://www.youtube.com/watch?v=gvHcXIF0rTU |
| Video Visible | 影片可見 | true |
一句話總結
- Current Time = 播到哪一秒
- Duration = 影片總長度
- Percent = 播放進度百分比
- Provider = 來源平台
- Status = 播放狀態
- Visible = 是否在畫面中
常見用途：影片觀看率分析、影片完成率分析、GA4 Video Engagement Tracking
可見度
假設此元素被使用者捲動到畫面中（75%）並停留一段時間（3.2 秒）後觸發
<div class="banner" id="promo-banner"> 限時優惠：立即購買 </div>
| 變數 | 中文名稱 | 回傳值 |
|---|---|---|
| Percent Visible | 可見百分比 | 75 |
| On-Screen Duration | 畫面持續時間 | 3200 |
一句話總結
- Percent Visible = 看到了多少比例
- On-Screen Duration = 看了多久（毫秒）
常見用途：Banner曝光追蹤、表單曝光追蹤、CTA可見度分析
使用者定義的變數
雖然內建變數很方便，但實務上最常使用的其實是：使用者定義變數。
因為網站的資料需求幾乎都需要自行建立。
導覽
- HTTP 參照網址 ：瀏覽的前一個網頁的網址，可選擇的網址元件如下：「完整網址」、「通訊協定」、「主機名稱」、「通訊埠」、「路徑」、「副檔名」、「查詢」及「片段」。
- 網址：當前訪問的網址，可選擇的網址元件如下：「完整網址」、「通訊協定」、「主機名稱」、「通訊埠」、「路徑」、「副檔名」、「查詢」及「片段」。
HTTP 參照網址和網址裡的可選的網址元件是一樣，這裡以網址https://www.haranhuang.com/google/google-tag-manager/a.html?cid=132#ga 為範例，講解網址元件對應的變數:
| 變數 | 中文名稱 | 回傳值 |
|---|---|---|
| Full URL | 完整網址 | https://www.haranhuang.com/google/google-tag-manager/a.html?cid=132#ga |
| Protocol | 通訊協定 | https:// |
| Hostname | 主機名稱 | http://www.haranhuang.com |
| Port | 通訊埠 | 443 |
| Path | 路徑 | /google/google-tag-manager/a.html |
| Filename Extension | 副檔名 | html |
| Query | 查詢參數 | cid=132 |
| Fragment | 片段 | ga |
網頁變數
這類變數在實務上非常常見。
| 變數 | 中文名稱 | 回傳值／說明 |
|---|---|---|
| JavaScript Variable | JavaScript 變數 | 讀取瀏覽器中的全域 JavaScript 變數，例如 window.userId = “12345” |
| 1st Party Cookie | 第一方 Cookie | 從網域下的Cookie取得值，例如 _ga=GA1.2.123456789.123456789 |
| Custom JavaScript | 自訂 JavaScript | 執行一段函式並回傳結果，每次觸發都會即時計算 |
| Data Layer Variable | 資料層變數 | 讀取 dataLayer.push() 中指定 key 的值 |
網頁元素
| 變數 | 中文名稱 | 回傳值／說明 |
|---|---|---|
| DOM Element | DOM 元素 | 回傳指定DOM元素的文字內容或指定屬性值（依設定而定，例如 text、href、value） |
| Element Visibility | 元素可見度 | 根據指定DOM元素是否進入可視區域判斷，回傳可見相關值（常用於曝光與可見觸發） |
| Auto-Event Variable | 自動事件變數 | 自動擷取觸發事件時的元素資訊（如 click、form submit、element visibility 等事件來源） |
公用程式
常見的工具型變數包括：
| 變數 | 中文名稱 | 回傳值／說明 |
|---|---|---|
| Analytics Storage | Analytics 儲存空間 | 回傳Client ID、Session ID、Sessions Number |
| Google Tag: Event Settings | Google 代碼：事件設定 | 代碼層級設定 |
| Google Tag: Configuration Settings | Google 代碼：配置設定 | 事件層級或全域設定 |
| User-Provided Data | 使用者提供的資料 | 收集使用者輸入資料，例如 email、電話、姓名、地址 |
| Lookup Table | 對照表 | 根據輸入條件回傳對應值 |
| Constant | 常值 | 固定字串，例如Measurement ID，不隨事件改變 |
| Undefined Value | 未定義值 | JavaScript undefined，常用於測試或阻止變數輸出 |
| Environment Name | 環境名稱 | GTM環境名稱，例如 Live、Latest、Now Editing 或自訂環境 |
| Custom Event | 自訂事件 | 讀取 Data Layer 中的 event 值 |
| Regex Table | 規則運算式表格 | 使用正則表達式比對輸入值並回傳結果 |
| Random Number | 隨機數字 | 每次觸發回傳0–2147483647 的隨機整數 |
容器資料
| 變數 | 中文名稱 | 回傳值／說明 |
|---|---|---|
| Debug Mode | 偵錯模式 | 當GTM進入預覽模式時回傳 true，否則為 false |
| Container ID | 容器 ID | GTM 容器唯一識別碼，例如 GTM-TCH6XWZ |
| Container Version | 容器版本號碼 | 每次GTM發佈後產生的版本號，例如 12、15 |
建立使用者定義變數
如果要創建使用者定義的變數，在GA4裡點擊「變數」——「新增」——「請選擇變數類型以開始設定…」，選擇變數類型：
在對其做設定即可。
如果您在操作上仍有任何疑問，歡迎留言交流，或加入：Google Analytics 4交流社團發問