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

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

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

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

章節內容

前往GA4官方文件

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

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

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

document.querySelector('.strong[class="partslink"]').textContent

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

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

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

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

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

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

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

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

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