電子商務事件中的ItemName屬於必備參數，務必在埋設的過程中，要將ItemName給傳入至GA4。ItemName攸關於你的營利報表中的品項名稱是否能正常顯示，如果沒有ItemName會導致報表有notset顯示。
本篇會假設讀者已經熟悉GA4的基礎追蹤、GA4的基礎串接都已經施行完畢。如果你這些不熟悉的，那麼本篇文章就會相對較吃力，如果你需要使用到CssSelector抓取網站前台資料，那務必也在本篇教學開始前熟悉這項技能。如果你是想要提升GA4電子商務事件收集的準確度，我會建議你使用伺服器追蹤，透過伺服器追蹤來分派你所有第三方平台的資料收集。
本集事件：GTM電子商務埋設add_to_cart
抓取變數：ItemName
範例網站：WordPress
章節內容
前往GA4官方文件
官方參考文件：GA4評估電子商務埋設。
主要搭配GA4的電子商務官方文件中的DLV，這些系列我會把這些變數，個別當作每一集的主題，個別拆解出來，做實戰抓取的演練。
ItemName- 為個別商品品項的名稱。他也是一個非常重要的資料，所以務必在你的JSON中帶入ItemName，以免造成GA4店商報表無法正常顯示。
如果你想要針對某一個變數抓取，以下是整理的教學清單。
電子商務事件埋設
變數ProductID抓取
這次的目標是”2013 – BUICK – ENCORE – Driver Side Headlamp assy composite”的產品項目名稱。並且保留String字串格式、不需要去除多餘符號、空行。
如果你的產品像我的名稱這麼長，也有辦法只擷取特定的產品名稱。例如「天然無毒手作家用的2號環保洗碗精」，你只想要「2號環保洗碗精」的名稱，也是辦得到的。
打開F12查看該元件
本次抓取ItemName，會遇到一個問題，這一次沒有Class，或是ID可以抓取。(summary entry-summary不適用)
因此我們需要直接抓「h1」標籤，但「h1」標籤可能會重複出現在一個頁面多次。因此這個範例會先使用以下方法；藉由這個方法，我會得知該頁面有幾個重複h1標籤，最後再選定物件。
本次範例：document.querySelectorAll()
過往範例：document.querySelector()
- 確定該頁面有幾個h1
- 要抓取的元素，在第幾個順序中
- 確認其他頁面，h1順序也在同一個
- 寫js
搜尋該頁面的全部h1標籤
由於我這個網站的產品名稱，是被h1所包覆，並且沒有留下任何class, id，因此我才需要這個方式。如果你的網站有任何ID, Class，請直接自行判斷使用！
document.querySelectorAll('h1')範例中有４個項目，我要的產品名稱位於「０」的項目中。其他的都不是我要的物件。
於程式碼後面加上[0]
document.querySelectorAll('h1')[0]將上一張圖的程式碼結尾加上[0]，我們可以直接拿到該標籤的物件。但這個還不是我們要的結果，因為我們並不需要<h1></h1>。
再提醒一次，不要直接將程式碼拿去你的網站使用，絕對是行不通的。每一間網站的撰寫方式都不同，所以還是要看你的網站原始碼結構而定。
於字尾加入text的方法
document.querySelectorAll('h1')[0].textContent最後再將「.textContent」放在句尾及可以拿到完整的產品名稱！
將程式碼貼回GTM自訂JS中
將剛剛在網站前台輸入的CSS Selector整串複製過來，記得前面加個「var Name_list」；或是其他你看得懂的變數名稱。Name_list可換成任何看得懂的名稱。
完成後，回到GTM預覽模式，看有沒有正確抓到。ProductID, ProductValue，兩個變數都是在前面兩篇文章，有做抓取的教學範例。如果有此問題的也歡迎閱讀。
創立自訂HTML
將GA4的官方文件中的DataLayer貼上，並將item_name換成剛剛的變數「{{ProductName}}」即完成。最後可以再回到預覽模式中，看一下是否有成功觸發變數，發送的Html代碼是否也有成功。如果你是從前面教學看到這邊，請直接依照原本的Dlv作修改就好，如範例圖所示。
本文總結
本集的程式碼難度算是中下，透過一兩句js即可完整抓取，電子商務中的產品名稱。不用轉型態、Regex，所以相對處理起來快速許多！
此使用範例網站為：WordPress，無任何外掛插件，純以GTM埋設GA4電子商務事件。請注意本網站的網站程式碼，與讀者的應該都不同。因此還是需要依照網站調整必要資料。例如「Console, DOM, REGEX」等。有任何問題，歡迎可以留言、發信給我。