GTM 變數介紹:DOM 元素(DOM Element) ,如果沒有工程師協助,就讓DOM元素給你幫助
Published in
12 min readJan 7, 2024
在之前 介紹「自動事件變數」的文章當中,我們提到如果無法透過 網站的網址、 Cookie 或是 資料層取得所需的「值」時,可以透過 「自動事件變數」取得,但會有個缺點,就是使用者必須要跟網站有互動,才有辦法抓到所需的「值」。
在該篇文章中,我們還有提到另一個變數 :「DOM 元素」變數,同樣也可以幫助我們抓取網頁上的數字或是文字等資料,就算使用者沒有跟網頁產生任何互動(點擊),只要有顯示在網頁上的文字或是標籤內的屬性,我們都可以透過「 DOM 元素」變數取得,例如:購物完成頁面的 訂單編號或是 訂單金額 等。
如果你趕時間,只想要了解設定方式,請直接跳到 這邊 。
本篇重點
- 什麼是 DOM?
- 玩「DOM 」 - 何時會用到 「DOM 元素」變數?
- 如何設定 DOM 元素?
- 新增「DOM 元素」變數
- 找出網頁 DOM 元素 ID 或是 CSS 選擇器
- 設定元素選擇器
- 同場加映:如何確認該 class 是否唯一?
- 檢查變數是否運作正常 - 補充一下
- 總結一下
什麼是 DOM?
在使用 GTM 的 「DOM 元素」變數之前,我們必須要先認識什麼是 DOM,如果你之前已經看過 「自動事件變數」 的介紹文章,也理解其作用,那要理解 DOM 就不是太困難的事情。
沒看過的朋友這邊請 》 GTM 變數介紹:自動事件變數
DOM 全名是 Document Object Model 文件物件模型,如果我們在網頁上面按右鍵,點選 「檢查網頁原始碼」 ,我們會得到以下畫面。
這是來自伺服器端的網頁原始碼,我們無法從瀏覽器去更動這些代碼,因為這是一個靜態頁面。
當瀏覽器向伺服器發出請求,瀏覽器在收到伺服器的回應之後,會依照 HTML 定義的結構內容搭配網站的 CSS 樣式以及 JS 技術,顯示最終的網站樣貌給使用者。