GTM教學｜DOM抓取電商中的轉換價值
DOM變數的功能滿適合用在許多類型的網站，像是電商資料的數值、表單內的個人資料抓取。
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做讀取。是一招電子商務埋設技巧必備之一！
需要任何協助嗎？
最快一個工作天將與您聯繫。
其他文章推薦
查看更多 →
GTM 教學｜Shopify 如何設定META 免費像素?
這篇會教你使用SHOPIFY 的顧客事件 (自訂像素) Customer Pixel 來安裝行銷常用代碼。例如，META, GA4, Gads 轉換代碼等。透過AI 可以快速協助我們完成這些行銷追蹤碼的設定。
Meta 廣告數據保存時間多久｜解決 Meta 廣告數據保存問題？
如果你要拉取超過 3 年以上的數據，Meta 廣告數據僅保存期限36個月不能超過 37 個月，也就是保存三年的意思。
【成功案例】GA4 電商事件規劃
本次黑客協助規劃舒康雞電商網站，完整規劃GA4電子商務必要事件，以及正確觸發事件。精準蒐集網站用戶行為，大幅提高網店轉換率。
【成功案例】轉換率優化模組
本次黑客與三隻斑馬合作，提供轉換率優化模組埋設，幫助電商網站改善用戶動線、用戶體驗，以增加廣告用戶的實際購買轉換率。本次黑客協助提供撰寫前端轉換率模組，以及完整設定、指導轉換率模組使用教學。
Meta Ads MCP 是什麼？不用寫程式也能讓 AI 分析 Meta 廣告
行銷人、廣告投手一定要學的 MCP 串接方式。輕鬆讓 AI 讀取 Meta 廣告資料，透過 MCP 開始分析你的 Meta 廣告數據、GA4 數據等更多。一站式輕鬆分析廣告數據、廣告操作等複雜任務交給AI！
【成功案例】網站設計&動線規劃
本次黑客與金旺貿易合作，網站設計與網站流程用戶規劃。透過黑客的網站設計與數據分析經驗規劃網站整體動線，讓 2B 網站能夠在名單蒐集提升轉換率，以及最大化部落格自然流量效益
【成功案例】網站轉換率優化
本次黑客與懶得煮的Tom老闆合作，電商網站轉換率優化案例。包刮，提供加入購物車成效、提供產品瀏覽次數。以及協助完成網站改版網站設計。成功提高購物車轉換率 10.6%、瀏覽產品 3.7 %。
【成功案例】GA4 導入
本次黑客與 低調生活DLIFE 合作，協助提供完整 GA4 數據健檢、完整GA4事件規劃、提供頂尖數據儀表板。再透過快客數據串接，協助客戶打造一系列的數據報表，同時也提供完整數據流工作的完整解說。
【成功案例】GA4 導入
本次黑客與 澄駒國際車業 合作，協助提供完整GA4事件規劃、提供頂尖數據儀表板。透過快客數據串接，協助客戶打造一系列飛快的數據報表，同時也提供完整數據流工作的完整解說。