GTM教學 - 電子商務埋設大全1 - CSS Selector抓取Value

電子商務事件中的Value屬於必備參數，務必在埋設的過程中，要將Value給傳入至GA4。如果沒有value會發生你的GA4營利報表無法計算準確的事件金額，不管是加入購物車、購買等電子商務事件。

如果要自行透過GTM埋設電商事件，那要從哪裡開始執行。接下來這一系列會拆解，關於GTM埋設電商事件，你所需要的資料。將在這些集中，為你一一的拆解。如果你想要增加電子商務追蹤的準確率，那務必要考慮伺服器追蹤，因為目前使用者大多為蘋果用戶，另外也會安裝阻擋外掛插件，而這一些都會造成網站無法順利發送資料至GA4。

本篇會假設讀者已經熟悉GA4的基礎追蹤、GA4的基礎串接都已經施行完畢。如果你這些不熟悉的，那麼本篇文章就會相對較吃力。

本集事件：GTM電子商務埋設add_to_cart
抓取變數：Value
範例網站：WordPress

章節內容

前往GA4官方文件

首先打開這一個官方文件頁面，可以看到這邊有GA4的標準datalayer的文件。那我就以add_to_cart_為各位示範，該如何將裡面的常數，個別轉成動態資料後傳入GA4。讓GA4可以正常收集網站前台的產品資料。

另外小補充，DVL中的Value跟Price還是有差別，在item陣列下方的price，是指產品個別價格，個別價格會乘以數量，等於ec中的Value，指這個事件帶來多少收益。

那麼你要的資料都在網站前台，包括價格，數量，先從價格開始，就以這一個網站的價格作為範例。我們要先拿到它的價格，並傳回去給GTM作為變數使用。GTM才可以幫我們在送正確的資料給GA4。

我們的目標是56.1USD，其中不要$符號，也不要USD幣別。那們我就先用Css Selector抓取資料這一整行，後續再來做資料清洗。

打開F12會看到他在 li標籤中的 id 是這一長串，因此我們就先用這一長串定位。

document.querySelector('#rl-apa-variation-price').textContent

但會拿到圖片範例中，一長串的東西，其中有一些空行、符號、幣別，這都不是我們所需要的。

透過Regex 來做資料篩選，而我們只要56.10。因此regex 可以打上，並把他建立一個新變數(value)。

value = obj.match(/[\d]+.[\d]+/[0])

會變補上一個[0]，因為目前還是陣列，不是字串格式。要注意的是，圖片範例與你的官網絕對不同，還是要依照網站程式碼，做上面的教學方式，照抄基本上行不通的。

在GTM這邊補上一個Number()方法，即可以將字串修正為數值。因為我們要用數值做後續的加減乘除運算，原本是字串格式，運算是做不到的！

完成後，回到GTM預覽模式，看有沒有正確抓到，並且確認格式是否為number。

將GA4的官方文件中的DataLayer貼上，並將value換成我們剛剛的變數「{{ProductValue}}」即完成。最後可以再回到預覽模式中，看一下是否有成功觸發變數，發送的Html代碼是否也有成功。

如果都有成功，再來需要的可能是提升追蹤的準確度「GTM – ServerSide 伺服器追蹤教學 | 伺服器配置設定」，這邊是後面如果你需要使用伺服器追蹤GA4的事件，那這篇就可以作為參考

此使用範例網站為：WordPress，無任何外掛插件，純以GTM埋設GA4電子商務事件。請注意本網站的網站程式碼，與讀者的應該都不同。因此還是需要依照網站調整必要資料。例如「Console, DOM, REGEX」等。有任何問題，歡迎可以留言、發信給我。