GTM埋設電子商務大全2 - itemid變數抓取

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

電子商務事件中的ItemID屬於必備參數,務必在埋設的過程中,要將ItemID給傳入至GA4。

如果你還沒有看前一篇怎麼設定GA4的Value,那你可以參考這篇「GTM電子商務埋設大全1 – CSS Selector抓取Value,GA4電子商務完整代碼埋設」。

本篇會假設讀者已經熟悉GA4的基礎追蹤、GA4的基礎串接都已經施行完畢。如果你這些不熟悉的,那麼本篇文章就會相對較吃力。如果你是想要提升GA4電子商務事件收集的準確度,我會建議你使用伺服器追蹤,透過伺服器追蹤來分派你所有第三方平台的資料收集。

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

前往GA4官方文件

GTM電子商務埋設大全2 - CSS Selector抓取ItemID


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

ItemID在GA4電子商務DLV埋設,也算是一個非常重要的資料,所以務必在你的JSON中帶入ItemID,以免造成GA4店商報表無法正常顯示。如果你還沒有看過第一集,針對產品價格(Value)的抓取,可以回去翻閱「GTM電子商務埋設大全1 – CSS Selector抓取Value」。

電子商務事件埋設

變數ProductID抓取

GTM電子商務埋設大全2 - CSS Selector抓取ItemID

這次的目標是”GM2503….”的項目ID。並且我們這次不需要把這個項目轉成int,一樣保留string字串格式即可。就先用css selector抓取資料這一整行,後續再來做資料清洗。

打開F12查看該元件

GTM電子商務埋設大全2 - CSS Selector抓取ItemID

透過<strong>裡面的class屬性 = “partslink”,抓取我要的字串 “GM2503330”。這一串請務必理解讀懂,這是一句很重要的觀念!

Console定位元件

GTM電子商務埋設大全2 - CSS Selector抓取ItemID
document.querySelector('.strong[class="partslink"]').textContent

但會拿到圖片範例中,一長串的東西,其中有一些空行、符號,這些都不是我們所需要的。因此需要下一步,透過REGEX正規表達式做資料的清洗。

透過REGEX做資料清洗

GTM電子商務埋設大全2 - CSS Selector抓取ItemID

透過Regex 來做資料篩選,而我們只要”GM2503330″。因此regex 可以打上如範例圖那樣,建立一個新變數(obj)。

obj = a.match(/[A-Za-z]+[\d]+/)[0]

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

將程式碼貼回GTM自訂JS中

GTM電子商務埋設大全2 - CSS Selector抓取ItemID

將剛剛在網站前台輸入的CSS Selector整串複製過來,記得前面加個「var product」,product可換成任何你看得懂的變數名稱。

GTM電子商務埋設大全2 - CSS Selector抓取ItemID

完成後,回到GTM預覽模式,看有沒有正確抓到。

最後再創立一個自訂HTML

GTM電子商務埋設大全2 - CSS Selector抓取ItemID

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

上面的「productvalue」是我們上一集所教的,如果還不知道可以回去看上一篇文章。跟著這些教學,你就能逐漸把這些”‘常數”,變成你的網站上的資料囉。

本文總結

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

error: