GTM埋設電子商務大全1 - Value變數抓取

GTM電子商務埋設大全1 – CSS Selector抓取Value,GA4電子商務完整埋設

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

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

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

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

前往GA4官方文件

GTM埋設電子商務大全1 - Value變數抓取


官方參考文件:GA4評估電子商務埋設

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

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

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

電子商務事件埋設

變數Value抓取

GTM埋設電子商務大全1 - Value變數抓取

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

打開F12查看該元件

GTM埋設電子商務大全1 - Value變數抓取

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

使用Console工具定位該元件

GTM埋設電子商務大全1 - Value變數抓取
document.querySelector('#rl-apa-variation-price').textContent

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

透過REGEX做資料清洗

GTM埋設電子商務大全1 - Value變數抓取

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

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

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

將程式碼貼回GTM自訂JS

GTM埋設電子商務大全1 - Value變數抓取

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

GTM埋設電子商務大全1 - Value變數抓取

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

創立自訂HTML

GTM埋設電子商務大全1 - Value變數抓取

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

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

本文總結

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

error: