GTM 變數介紹：DOM 元素(DOM Element) ，如果沒有工程師協助，就讓DOM元素給你幫助
在之前 介紹「自動事件變數」的文章當中，我們提到如果無法透過 網站的網址、 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 元素」變數搭配「購買（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 元素」 變數的訊息，也會一併更新到這篇文章當中。
