文章目錄
更新時間:2024年12月4號
這一篇介紹GTM裡的變數。
認識變數
GTM中的變數是具名的預留位置,程式碼在網站或行動應用程式上執行時,系統會在這類位置中填入對應的值。
變數的分類
內建變數
這裡介紹網頁容器的變數。
網頁
以https://www.haranhuang.com/google/google-tag-manager?cid=132為示例。
- Page Hostname (網頁主機名稱):表示主機名稱,這裡就是www.haranhuang.com
- 網頁路徑:表示網址的路徑,這裡就是/google/google-tag-manager
- 網頁網址:表示完整網站,這裡就是/google/google-tag-manager?cid=132
- Referrer (參照網址):表示上一個頁面來源,如從網頁A這個頁面,那這裡就是A
公用程式
- 容器編號:表示容器ID,如GTM-TCH6XWZ。
- 容器版本:表示當前容器的版本標號,GTM每做一次發佈,就會生成一個版本標號。延伸閱讀:線上GTM有Bug,通過「版本」回滾迅速修復錯誤
- 環境名稱:如果透過環境的 [共用預覽畫面] 連結或環境程式碼片段送出容器請求,系統會傳回使用者提供的目前環境名稱;若是內建環境,系統會傳回「Live」、「Latest」或「Now Editing」,其他情況則會傳回空白字串。
- Event (事件):存取 dataLayer 中的
event
鍵。這個鍵是目前 dataLayer 事件的名稱 (例如 gtm.js、gtm.dom、gtm.load 或自訂事件名稱)。 - HTML ID:允許自訂 HTML 代碼標示成功或失敗;搭配代碼觸發順序使用。
- 隨機號碼:傳回隨機號碼值。
錯誤
- Error Message (錯誤訊息):存取 dataLayer 中的
gtm.errorMessage
鍵 (由 JavaScript 錯誤觸發條件設定),結果會是包含錯誤訊息的字串。 - Error URL (錯誤網址):存取 dataLayer 中的
gtm.errorUrl
鍵 (由 JavaScript 錯誤觸發條件設定),結果會是包含錯誤發生處網址的字串。 - Error Line (錯誤行):存取 dataLayer 中的
gtm.errorLine
鍵 (由 JavaScript 錯誤觸發條件設定),結果會是檔案中發生錯誤的行數。 - Debug Mode (偵錯模式):如果容器目前在預覽模式中運作,則傳回 true。
點擊
- Click Element (點擊元素):存取 dataLayer 中的
gtm.element
鍵 (由點擊觸發條件設定),結果會是點擊發生處 DOM 元素的參考資料。 - Click Classes (點擊類別):存取 dataLayer 中的
gtm.elementClasses
鍵 (由點擊觸發條件設定),結果會是所點擊 DOM 元素上類別屬性的字串值。 - Click ID (點擊 ID):存取 dataLayer 中的
gtm.elementId
鍵 (由點擊觸發條件設定),結果會是所點擊 DOM 元素上 ID 屬性的字串值。 - Click Target (點擊目標):存取 dataLayer 中的
gtm.elementTarget
鍵 (由點擊觸發條件設定)。 - Click URL (點擊網址):存取 dataLayer 中的
gtm.elementUrl
鍵 (由點擊觸發條件設定)。 - Click Text (點擊文字):存取 dataLayer 中的
gtm.elementText
鍵 (由點擊觸發條件設定)。
這幾個變數通常用於點擊事件追蹤,用的最多的是Click Classes和Click ID,延伸閱讀:詳解Google Analytics 4 事件追蹤——自訂事件(觸發條件法)
表單
- Form Classes (表單類別):存取 dataLayer 中的
gtm.elementClasses
鍵 (由表單觸發條件設定),結果會是表單上類別屬性的字串值。 - Form Element (表單元素):存取 dataLayer 中的
gtm.element
鍵 (由表單觸發條件設定),結果會是表單 DOM 元素的參考資料。 - Form ID (表單 ID):存取 dataLayer 中的
gtm.elementId
鍵 (由表單觸發條件設定),結果會是表單上 ID 屬性的字串值。 - Form Target (表單目標):存取 dataLayer 中的
gtm.elementTarget
鍵 (由表單觸發條件設定)。 - Form Text (表單文字):存取 dataLayer 中的
gtm.elementText
鍵 (由表單觸發條件設定)。 - Form URL (表單網址):存取 dataLayer 中的
gtm.elementUrl
鍵 (由表單觸發條件設定)。
這幾個變數通常用於表單提交追蹤,用的最多的是Form Classes和Form ID,延伸閱讀:Google Analytics 4 中做表單互動追蹤
紀錄
- History Source (記錄來源):存取 dataLayer 中的
gtm.historyChangeSource
鍵 (由記錄變更觸發條件設定)。 - New History Fragment (新記錄片段):存取 dataLayer 中的
gtm.newUrlFragment
鍵 (由記錄變更觸發條件設定),結果會是紀錄事件之後的網頁網址片段部分 (亦稱為雜湊) 字串值。 - New History State (新記錄狀態):存取 dataLayer 中的
gtm.newHistoryState
鍵 (由記錄變更觸發條件設定),結果會是將網頁推送到紀錄以引發紀錄事件的狀態物件。 - Old History Fragment (舊記錄片段):存取 dataLayer 中的
gtm.oldUrlFragment
鍵 (由記錄變更觸發條件設定),結果會是紀錄事件之前的網頁網址片段部分 (亦稱為雜湊) 字串值。 - Old History State (舊記錄狀態):存取 dataLayer 中的
gtm.oldHistoryState
鍵 (由記錄變更觸發條件設定),結果會是在紀錄事件發生之前就啟用的狀態物件。
這幾個變數通常用於單頁應用追蹤(SPA/PWA)追蹤,延伸閱讀:Google Analytics 4 中做單頁應用追蹤(SPA/PWA)
捲動
- Scroll Depth Threshold (捲動深度門檻):存取 dataLayer 中的
gtm.scrollThreshold
鍵 (由捲動深度觸發條件設定)。門檻是一個數值,用來指定導致觸發條件啟動的捲動深度。以百分比做為門檻時,該數值在 0 到 100 之間;以像素做為門檻時,該數值則代表指定的像素數量。 - Scroll Depth Units (捲動深度單位):存取 dataLayer 中的
gtm.scrollUnits
鍵 (由捲動深度觸發條件設定);單位可以是「像素」或「百分比」,您可以指定一種當做觸發條件啟動門檻的單位。 - Scroll Direction (捲動方向):存取 dataLayer 中的
gtm.scrollDirection
鍵 (由捲動深度觸發條件設定);方向可以是「垂直」或「水平」,表示觸發條件啟動門檻的方向。
影片
- Video Current Time (影片目前時間):存取 dataLayer 中的
gtm.videoCurrentTime
鍵。這個鍵會是一個整數,用來代表影片中發生事件的時間 (以秒為單位)。 - Video Duration (影片播放時間):存取 dataLayer 中的
gtm.videoDuration
鍵。這個鍵會是一個整數,用來代表影片總長度 (以秒為單位)。 - Video Percent (影片百分比):存取 dataLayer 中的
gtm.VideoPercent 鍵。
這個鍵會是一個整數 (0-100),用來代表事件發生時影片的播放長度所佔百分比。 - Video Provider (影片提供者):存取 dataLayer 中的
gtm.videoProvider
鍵 (由 YouTube 影片觸發條件設定),結果會是影片提供者的名稱,亦即「YouTube」。 - Video Status (影片狀態):存取 dataLayer 中的
gtm.videoStatus
鍵。這個鍵會是偵測到事件時的影片狀態 (例如「play」或「pause」)。 - Video Title (影片標題):存取 dataLayer 中的
gtm.videoTitle
鍵 (由 YouTube 影片觸發條件設定),結果會是影片標題。 - Video URL (影片網址):存取 dataLayer 中的
gtm.videoUrl
鍵 (由 YouTube 影片觸發條件設定),結果會是影片的網址,例如「https://www.youtube.com/watch?v=gvHcXIF0rTU」。 - Video Visible (影片可見):存取 dataLayer 中的
gtm.videoVisible
鍵 (由 YouTube 影片觸發條件設定)。如果能在可視區域中看到影片,結果就會設為 True,如果看不到 (例如需捲動位置,或為「在背景播放」標籤),則設為 False。
這幾個變數通常用於Youtube影片追蹤,延伸閱讀:Google Analytics 4 中對Youtube影片做追蹤
可見度
- Percent Visible (可見百分比):存取 dataLayer 中的
gtm.visibleRatio
鍵 (由元素可見度觸發條件設定)。可見百分比是一個從 0 到 100 的數值,用來表示觸發條件啟動時,選取的元素有多大的比例處於可見狀態。 - On-Screen Duration (畫面持續時間):存取 dataLayer 中的
gtm.visibleTime
鍵 (由元素可見度觸發條件設定)。畫面持續時間是一個數值,用來表示觸發條件啟動時,選取的元素處於可見狀態有多久 (以毫秒計)。
這幾個變數通常用於展示追蹤,延伸閱讀:「GTM」用元素可見度做表單提交跟蹤
使用者定義的變數
導覽
- 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
- 通訊協定(Protocol):https://
- 主機名稱(Hostname):www.haranhuang.com
- 通訊埠(Port):443/80
- 路徑(Path):/google/google-tag-manager
- 副檔名(Filename Extension):html,副檔名表示這個連接的文件格式
- 查詢(Query):如果查詢鍵是cid,则變數值是132
- 片段(Fragment):ga
網頁變數
- JavaScript 變數:就是全域 JavaScript 變數。
- 第一方 Cookie:從第一方 Cookie 裡獲取值。
- 自訂 JavaScript:這個變數會使用提供的 JavaScript 函式,在瀏覽器中計算變數值。每次使用這個變數時,系統會執行該函式並使用其傳回值。
- 資料層變數:獲取
dataLayer.push()
裡的資料層變數,延伸閱讀:GTM中資料層變數版本1和版本2的區別
網頁元素
- DOM 元素:這個值已設定 DOM 元素文字或指定 DOM 元素屬性值。
- 元素可見度:此值是根據指定 DOM 元素的可見狀態而設定。延伸閱讀:「GTM」用元素可見度做表單提交跟蹤
- 自動事件變數:系統會擷取觸發了事件的項目資訊 (例如點擊、表單提交、元素可見度等等)。
- Element (元素):這會傳回元素物件,且可視為自訂 JavaScript 物件 (例如
{{Element}}.title
),或 CSS 選取器中的物件 (例如 {{Element}} matches CSS Selectordiv.foo
)。 - Element Type (元素類型):這會傳回
element.tagName
值 (例如「A」、「BUTTON」、「IMG」)。 - Element Attribute (元素屬性):指定屬性名稱後,這個選項就會傳回該屬性的值。
- Element Classes (元素類別):這會傳回元素
class
屬性內的類別清單。 - Element ID (元素 ID):這會傳回
ID
屬性的值。 - Element Target (元素目標):這會傳回
target
屬性的值 (例如「_blank」)。 - Element Text (元素文字):這會傳回元素文字內容的值。
- Element URL (元素網址):這會傳回從
href
或action
屬性收集的元素網址。 - History New URL Fragment (記錄新網址片段):這會傳回瀏覽器記錄中的新網址片段 (例如「#summary」)。
- History Old URL Fragment (記錄舊網址片段):這會傳回瀏覽器記錄中的舊網址片段 (例如「#intro」)。
- History New State (記錄新狀態):這會傳回新記錄狀態物件 (由網站的
pushState
呼叫控制)。 - History Old State (記錄舊狀態):這會傳回舊記錄狀態物件 (由網站的
pushState
呼叫控制)。 - History Change Source (記錄變更來源):這會傳回造成記錄變更的事件 (例如「pushState」、「replaceState」等等)。
- Element (元素):這會傳回元素物件,且可視為自訂 JavaScript 物件 (例如
公用程式
Google Analytics 設定:設定層級參數。UA版本的,已經棄用。- Google 代碼:事件設定:設定層級參數,延伸閱讀:Google Tag Manager裡的兩個設定變數
- Google 代碼:配置設定:來設定事件層級參數,延伸閱讀:Google Tag Manager裡的兩個設定變數
- 使用者提供的資料:收集聯絡表單資訊,例如電子郵件、電話、姓名和地址。用於強化轉換,延伸閱讀:運用Google Tag Manager設定Google Ads強化轉換(Enhanced Conversions)
- 對照表:系統會根據對照表中的指示設定這個值,這個功能常用與區分不同的環境識別對應的評估ID,延伸閱讀:「GTM」用對照表管理多環境下的多個評估ID
- 常值:這個值已設為您提供的字串。通常會將衡量ID用常值變數存儲。
- 未定義值:內含 JavaScript 的「未定義」值。
- 環境名稱:此值為環境連結的名稱,容器可以透過此連結載入 (例如「Live」)。
- 自訂事件:推送至資料層的自訂事件名稱。
- 規則運算式表格:與對照表變數相似,但前者多了一項功能,可針對要比對的項目執行規則運算式模式。
- 隨機數字:介於 0 到 2147483647 的任一隨機數字。
容器資料
- 偵錯模式:如果是在偵錯模式下查看容器,值會設為 true。
- 容器 ID:表示容器ID,如GTM-TCH6XWZ。
- 容器版本號碼:表示當前容器的版本標號,GTM每做一次發佈,就會生成一個版本標號。延伸閱讀:線上GTM有Bug,通過「版本」回滾迅速修復錯誤
變數的使用
創建變數
如果要創建內建變數,在GA4裡點擊「變數」——「設定」,然後勾選保存即可:
如果要創建使用者定義的變數,在GA4裡點擊「變數」——「新增」——「請選擇變數類型以開始設定…」,選擇變數類型:
在對其做設定即可。