GTM教學｜GA4電商埋設2｜抓取ItemID

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

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

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

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

前往GA4官方文件

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

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

電子商務事件埋設

變數ProductID抓取

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

打開F12查看該元件

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

Console定位元件

document.querySelector('.strong&#91;class="partslink"]').textContent 但會拿到圖片範例中，一長串的東西，其中有一些空行、符號，這些都不是我們所需要的。因此需要下一步，透過REGEX正規表達式做資料的清洗。

透過REGEX做資料清洗

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

obj = a.match(/&#91;A-Za-z]+&#91;\d]+/)&#91;0] 會變補上一個[0]，因為目前還是一個陣列，不是字串格式。要注意的是，圖片範例與你的官網絕對不同，還是要依照網站程式碼，做上面的教學方式，照抄基本上行不通的。

將程式碼貼回GTM自訂JS中

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

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

最後再創立一個自訂HTML

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

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

本文總結

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