GTM 變數介紹：DOM 元素(DOM Element) ，如果沒有工程師協助，就讓DOM元素給你幫助

在之前 介紹「自動事件變數」的文章當中，我們提到如果無法透過 網站的網址、 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 技術，顯示最終的網站樣貌給使用者。