在之前介紹「自動事件變數」的文章當中，我們提到如果無法透過網站的網址、Cookie 或是資料層取得所需的「值」時，可以透過「自動事件變數」取得，但會有個缺點，就是使用者必須要跟網站有互動，才有辦法抓到所需的「值」。
在該篇文章中，我們還有提到另一個變數：「DOM 元素」變數，同樣也可以幫助我們抓取網頁上的數字或是文字等資料，就算使用者沒有跟網頁產生任何互動（點擊），只要有顯示在網頁上的文字或是標籤內的屬性，我們都可以透過「DOM 元素」變數取得，例如：購物完成頁面的訂單編號或是訂單金額等。
本篇重點
什麼是 DOM？
在使用 GTM 的「DOM 元素」變數之前，我們必須要先認識什麼是 DOM，如果你之前已經看過「自動事件變數」的介紹文章，也理解其作用，那要理解 DOM 就不是太困難的事情。
沒看過的朋友這邊請 》GTM 變數介紹：自動事件變數
DOM 全名是 Document Object Model 文件物件模型，如果我們在網頁上面按右鍵，點選「檢查網頁原始碼」，我們會得到以下畫面。
這是來自伺服器端的網頁原始碼，我們無法從瀏覽器去更動這些代碼，因為這是一個靜態頁面。
當瀏覽器向伺服器發出請求，瀏覽器在收到伺服器的回應之後，會依照 HTML 定義的結構內容搭配網站的 CSS 樣式以及 JS 技術，顯示最終的網站樣貌給使用者。
接著回到網頁上再按一次右鍵，這次我們選擇「檢查」，接著去點選下方（這位置可以調整，你的可能在右邊）檢查工具「左上角的箭頭」，就可以選取頁面上的「DOM 元素（DOM Element）」，如下圖：
隨著滑鼠移動到網頁上不同的位置，你會看到滑鼠游標所到之處出現不同的色塊，一個色塊，就代表著一個「DOM 元素」，點擊之後下方會出現相對應的原始碼。
或是反過來操作也可以，滑鼠在下方檢查工具中選取代碼，網頁上面就會出現相對應色塊。
上圖我們將滑鼠移到了「下載行程介紹」連結上並點擊，下方原始碼出現 <a></a> 標籤，內含相關屬性：id、class 或是 data-tour 等，還有 <a></a> 內的文字，我們都可以透過「DOM 元素」變數取得它們的值。
而從網頁原始碼到 DOM 的過程，就是瀏覽器將靜態 HTML 轉譯成 DOM 文件物件模型，將巢狀結構的 HTML 變成樹狀的 DOM，如下圖右邊。
透過這樣的轉譯，我們就能使用 Javascript 對於單一物件去改變畫面，例如最常見的：當你對一則貼文送出愛心，該貼文畫面上的愛心就會 +1。
玩「DOM 」
當我們在網頁上按右鍵選擇「檢視網頁原始碼」時，是不能對這些代碼做修改的，如果要修改這些代碼，必須要從網站的伺服器端進行。（當然，原始碼我們碰不到）
但如果在網頁上按右鍵選擇「檢查」時，我們則可以修改這些「DOM 元素」，不過這個變化僅止於在瀏覽器端，網頁本身的原始碼並沒有任何改變，也就是說，只有你自己看得到。
針對要修改的部分點擊兩下，可以點擊標籤或是文字，去更改其內容，都是可以做到的。
而這樣的修改，在重新載入頁面之後，畫面就會恢復原狀了（這是因為我們重新跟伺服器發出了請求，伺服器給了網頁最原始的 HTML 結構）
除了修改文字以及標籤的部分，也可以修改或是新增標籤元素（tag element）內的屬性，例如：調整 CSS 樣式，先預覽看看是否為你想要的樣子，並與設計師討論，接著再請工程師針對伺服器端的網頁原始碼進行修改，可以減少很多往來的溝通成本。
何時會用到 「DOM 元素」變數？
當今天網站沒有工程師可以協助推送參數到資料層 Data Layer 中或是儲存參數到 Cookie 中時，我們就無法使用「資料層」變數或是「第一方 Cookie」變數搭配 GA4 事件完成追蹤，獲取如訂單編號或是訂單金額這些重要的值。
此時我們可以利用「DOM 元素」變數來協助抓取頁面上的資料，例如結帳完成的感謝頁面上的訂單編號或是訂單金額等，使用「DOM 元素」變數搭配 GA4「購買（Purchase）」事件進行購物流程的追蹤分析，傳送相對應的事件參數到 GA4 中，以利我們了解使用者的購買行為。
了解 DOM 以及「DOM 元素」變數之後，接下來我們就可以開始進入設定環節了。
如何設定 DOM 元素？
新增「DOM 元素」變數
GTM 左側面板選取「變數」> 下方「使用者定義的變數」區塊右上角點選「新增」 > 變數類型選擇「DOM 元素」
來到「DOM 元素」變數設定介面 > 「選取方式」可以用「編號（ID）」或是「CSS 選擇器（CSS Selector）」> 接著要先回到訂單完成頁面找是否有相對應 ID 或是 CSS 可以使用
找出網頁 DOM 元素 ID 或是 CSS 選擇器
從下圖中可以看到，元素中並沒有任何「編號 ID」 可以使用，所以我們必須要用「CSS 選擇器」，去選到 tag <bdi></bdi> 這個「DOM 元素」的位置。
（如果有 ID 的話，<bdi> 標籤會長這樣 <bdi id=”order”>，就會有「編號 ID」可以使用。）
於訂單完成頁面的「總計金額數字」上按滑鼠右鍵 > 選擇「檢查」> 下方檢查工具中找到該數字所屬元素(這邊是 bdi)，右鍵點選該元素 > 選單中選擇「Copy」> 選擇「Copy Selector」
設定元素選擇器
回到變數設定介面，將上面複製的 selector 貼入「元素選擇器」欄位。
如果你所點選的元素位置是被放置在好幾層 HTML 代碼之內，所複製的這一串選擇器就會變得非常的長，舉例來說，我們剛剛複製的如下：
post-14 > div.entry-content > div > div > ul > li.woocommerce-order-overview__total.total > strong > span > bdi
這是因為從最上層的元素開始一路選下來，目的是要確保這是整個頁面絕無僅有獨一無二的元素，不會與其它標籤元素重複，但其實我們不需要這麼長一串。
主要是後續維護不方便，萬一網站工程師移除了某個標籤（Tag），這串就失效了，「DOM 元素」變數就會抓不到該金額。
我們只要用到下面這段就足夠了，加上屆時「purchase」事件代碼只會在這個訂單完成頁面觸發，因此在這兩個條件之下（必須是訂單完成頁面＋這串 Selector），代表這會是網頁上的唯一。
span.woocommerce-Price-amount > bdi
(代表我們只要標籤元素 <span></span> class 值為 woocommerce-Price-amount 底下的子標籤元素 <bdi></bdi> 內的文字元素)
將這串放入「元素選擇器」欄位當中，接著我們給予變數一個命名「DomV – Order_total_price」後儲存（變數的命名自由隨意，好讀好懂就可以。）
「DOM 元素」變數的設定到這邊結束。
（關於「CSS 選取器」 的進一步介紹，可以參考這篇文章：如何使用 GTM 的「CSS 選取器」(CSS Selectors)？）
同場加映：如何確認該 class 是否唯一？
方法一：
可以在檢查工具上面搜尋，蘋果用戶 command + F ，Window 使用者是 Ctrl + F，接著在搜尋框輸入 woocommerce-Price-amout ，就可以確認是否為網頁上唯一的 class。
方法二：
於網頁上按下滑鼠右鍵 > 點選「檢查」> 下方檢查工具中選取「Console」頁籤 > 輸入 document.querySelectAll(‘.woocommerce-Price-amout‘) > Enter
這樣就可以看到這個 class 在頁面上的數量，如果發現超過一個，影響到「DOM 元素」變數的抓取，請往上層繼續尋找，並確保你的「CSS 選取器（ Css Selectors）」不會過長，且是該網頁上的唯一。
檢查變數是否運作正常
設定完變數之後，可以來到預覽模式確認該「DOM 元素」變數是否有抓到我們需要的值。
GTM 預覽模式 > 左側面板選擇「purchase」事件 > 右邊「變數」頁籤中找到剛剛設定的變數 > 確認「值」是否為正確的訂單金額
確定該變數抓取到的「值」無誤之後，我們就可以將其放到追蹤事件的事件參數中使用了。
用同樣的方法進行訂單編號的「DOM 元素」變數設定，並以此類推到其它想要抓取的元素，例如你可能想要抓取表單名稱或是產品名稱等，都可以透過這樣的方式。
補充一下
一定要在 DOM Ready 之後啟動
記得一定要在 DOM Ready 之後才啟動你的代碼，確保 DOM 已經完成，否則很有可能會抓不到需要的值。
雖然有時候你會看到在 DOM Ready 之前，設定的「DOM 元素」變數也會有值（例如上面那張預覽模式的範例圖片），但正確的做法還是要等到頁面上的 DOM 都完成之後，才去啟動代碼比較不會出錯，避免出現傳送到 GA4 的事件參數沒有「值」的情況。
因此你的代碼觸發條件類型建議要是「DOM 就緒」或是「視窗已載入」，並指定在訂單完成頁面觸發。
如果對於 GTM 網頁瀏覽類型觸發條件還不熟悉的朋友，可以參考這篇文章：認識 GTM 網頁觸發條件。
「DOM 元素」變數的值是「字串」
如果是用來抓取訂單金額，要注意這邊抓到的是「字串(string)」而非「數字(number)」，要傳送到 GA4 訂單金額欄位（value）的變數類型，必須要是數字(number)，才有辦法計算訂單總額。
（關於將抓到的變數類型由「字串」轉成「數字」的方式，請參考這篇文章進行設定：如何將「DOM 元素」變數抓取的值，由「字串」轉變成「數字」？）
能用「資料層」，就用「資料層」
如果可以推送資料到資料層（Data Layer）或是資料層內有訂單相關資訊可以取用，就請使用「資料層變數」取得相關參數，因為「DOM 元素」變數很容易因為網站改版或是版面的微調，讓 CSS 選擇器或是 ID 失效，便會抓不到相對應的值。
至於如何使用「資料層變數」？可以參考文章：GTM 變數介紹：資料層變數（Data Layer Variable）
「屬性名稱」欄位是幹嘛的？
在設定「DOM 元素」變數時，最下方還有個欄位「屬性名稱」是要來抓取該元素內的「屬性（attribute）」。
如果保留空白，就會直接抓取該 DOM 元素內的文字，下圖範例中，元素 <bdi></bdi> 內的文字，也就是訂單價格「 $12.6 」。
但如果你需要的是該元素內的某個屬性，請一字不漏地將該屬性名稱包含大小寫都要完全一樣的填入。
關於屬性的部分，請參考文章自動事件變數介紹中的設定示範，就會更理解這邊說的「屬性」是指什麼了。
跟「自動事件變數」的差別？
互動！就是使用者的互動！
「自動事件變數」抓取的是使用者當下與網頁互動時，該元素內的「屬性值」，而「DOM 元素」變數則不需要使用者有互動就能抓取，只要頁面的 DOM 已經準備完成，我們就可以透過「DOM 元素」變數來抓取。
如果想多認識「自動事件變數」，可以閱讀這篇：GTM 變數介紹：自動事件變數(Auto Event Variable)，我該如何應用？
總結一下
到目前為止，這篇文章簡單介紹了什麼是文件物件模型（DOM），並告訴你如何查找網頁上的 DOM，甚至還可以對其作修改，接著舉例什麼樣的情況下，可以使用 GTM 中的「DOM 元素」變數滿足事件追蹤上的需求，並且一步一步的帶你完成設定。
最後補充了幾點使用「DOM 元素」變數需要注意的事情，必須說，如果網站有資料層（Data Layer）可以取得相關的資料，就請盡可能地使用資料層來處理，是最為一勞永逸且不會因為網站改版造成「CSS 選取器」無法作用，造成抓取不到資料的窘境。
以上，未來如果有任何關於「DOM 元素」變數的訊息，也會一併更新到這篇文章當中。
延伸閱讀
如果你很喜歡這篇文章並且覺得內容有幫助，又剛有些多餘時間，歡迎看看其它文章，繼續探索（這坑？這地獄？這片樂土？）
同時，如果對於內容有疑問或是建議，也歡迎你留言告訴我們：）
