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做讀取。是一招電子商務埋設技巧必備之一！
更多文章
Looker Studio
- Looker Studio教學｜Looker Studio 公式｜電商指標
- Looker Studio教學｜5個Looker Studio 混和資料功能
- Looker Studio 教學｜指標維度是甚麼
- Looker Studio 教學｜數據工程師帶你從0學Looker Studio
- Looker Studio教學｜導入臉書廣告數據｜Adveronix 免費工具
GA4
- GA4教學｜ 數據保留多久? 延長GA4數據保留時間?
- GA4教學｜Measurment Protocol 實例
- GA4教學｜GA4 如果有Not Set該怎麼辦
- GA4教學｜GA4閾值門檻｜GA4資料不正確
- GA4教學｜GA4常見來源判定順序
- GA4教學｜如何處理GA4重複事件
- GA4教學｜自訂探索報表使用解說介紹｜洞察來源unassigned
- GA4教學｜GA4報表出現Unassigned如何解決
- GA4教學｜排除金物流網域｜Referrer必備知識
- GA4教學｜ 一定要知道的GA4資料設定
GTM
- GTM教學｜GTM觸發條件常失敗
- GTM教學｜設定 Consent Mode 同意聲明模式
- GTM教學｜GTM問題總整理
- GTM教學｜設定臉書像素｜常見Meta問題總整理
- GTM教學｜WordPress表單驗證事件｜GA4追蹤教學
- GTM教學｜手動設定GCP SERVER伺服器配置
- GTM教學｜臉書像素重複事件怎麼解決
- GTM教學｜GTM常用變數中文解說
- GTM教學｜伺服器追蹤｜自訂網域追蹤
- GTM教學｜伺服器追蹤教學4｜Http解說
- GTM教學｜追蹤來自部落格轉換成效
- GTM教學｜伺服器追蹤教學3 | Facebook轉換Capi設定
- GTM教學｜伺服器追蹤教學2 | GA4事件設定
- GTM教學｜伺服器追蹤教學 | 伺服器配置設定
- GTM教學｜Tiktok廣告電子商務埋設大全3｜廣告代碼埋設
- GTM教學｜Tiktok廣告電商埋設2
- GTM教學｜廣告電商埋設1｜電商必要參數抓取
- GTM教學｜電商埋設5｜GA4電商埋設
- GTM教學｜電子商務埋設大全4｜GA4電子商務完整埋設
- GTM教學｜GTM電商埋設3｜抓取ItemName
- GTM教學｜GTM電商埋設2｜抓取ItemID
- GTM教學｜電商埋設1｜抓取Value
- GTM教學｜提升廣告成效｜Adblocker阻擋原理
- GTM教學｜GTAG部署方式三大整理
- GTM教學｜Google Ads 強轉換 | 購買金額
- GTM教學｜自訂網址追蹤｜不是只有「UTM」才能做網址追蹤
- GTM教學｜AutoEvent追蹤使用者點選的圖片
- GTM教學｜CSS Selector抓取表格的值
- GTM教學｜了解網站熱門頁面｜GTM追蹤點擊事件
- GTM教學｜埋設事件｜確認GA4有無收到事件
- GTM教學｜自訂網址追蹤｜不是只有「UTM」才能做網址追蹤
- GTM教學｜3分鐘檢查GA4事件重複錯誤
- GTM教學｜GA4電子商務事件埋設範本
- GTM教學｜DOM抓取電商中的轉換價值
- GTM教學｜新的GTM容器一定要做這設定
- GTM教學｜設定GA4事件大全
- GTM教學｜推薦GTM範本｜全新DataLayer寫入方式
- GTM教學｜網站計時器埋設｜抓出使用者進站停留時間
- GTM教學｜如何辨別是否網站為SPA站
- GTM教學｜名單型網站追蹤｜Thankyou Page 填寫表單事件
- GTM教學｜網站通話追蹤｜臉書私訊、加LINE
- GTM教學｜自訂網址追蹤｜不是只有「UTM」才能做網址追蹤
BigQuery
- BigQuery教學｜BigQuery預測GA4數據
- BigQuery教學｜視覺化報表怎麼製作
- BigQuery教學｜基礎必備語法｜免費BigQuery資料導入
- BigQuery教學｜串接BIgQuery | BIgQuery費用