DOM變數的功能滿適合用在許多類型的網站，像是電商資料的數值、表單內的個人資料抓取。如果網站開發人員設計有到位，基本上抓取這些很容易。今天這篇算是比較進階的教學，你得先了解一些CSS Selector的使用方式，以及懂查看網頁的Html。學會抓取dom的元素後，基本上你已經可以抓取大約快全部的GTM內容，可以說是接近無敵了!
如果你是想要學習完整的CSS-Selector抓取方法，那你可以參閱這篇「基礎CSS-SELECTOR選擇器使用，選取器抓取表格的值」
進入變數
進入GTM左側選單的變數中，並點選新增，於選單中新增「DOM元素變數」。
DOM元素的詳細介紹
編號=網站元素中的ID屬性
Css選取器(CSS Seletor)可找尋網站html當中的ID、CLASS或其他屬性，是一個很常用的技巧。
EX: 測試按鈕
abc為這一個Button的ID，因此如果你選擇選取方式為ID，下面填寫”abc”即可。
如果想要學完整CSS-SELECTOR，可以查看這一篇文章。
如果是要CSS選擇器設定電商事件的參數，可以參考「GTM電子商務埋設大全1 – CSS Selector抓取Value，GA4電子商務完整代碼埋設」
對應網站元素填入空格中
藉由第4張範例圖，我們可以得知8358元的標籤，裡面的ID為total_amont，因此在GTM的DOM元素變數中，按照以下步驟。
如果想查看完整電商事件金額，你可以查看「CSS Selector抓取Value，GA4電子商務完整代碼埋設」。
1.選擇「編號(ID)」，作為選取條件
2.輸入選取條件為「total_amount」
3.在屬性名稱中填入「value」
**可以看範例圖說明
預覽模式檢查
進入剛剛要抓取的頁面，點選DOM READY，即可看到變數8358的金額，已經成功被GTM抓取。這一招也可以應用在電子商務的Value抓取，或名單類型網站都適用。
DOM資料的抓取，可以幫助我們抓取，並返回網站的動態內容資料，例如每一單的購物金金額，隨著DOM內容不同，也可以返回不同的Value給GTM做讀取。是一招電子商務埋設技巧必備之一！