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

電子商務事件中的ItemName屬於必備參數，務必在埋設的過程中，要將ItemName給傳入至GA4。ItemName攸關於你的營利報表中的品項名稱是否能正常顯示，如果沒有ItemName會導致報表有notset顯示。

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

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

章節內容

1 前往GA4官方文件
2 電子商務事件埋設
3 本文總結
4 更多文章

前往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」等。有任何問題，歡迎可以留言、發信給我。

GTM教學｜GA4電商埋設3｜抓取ItemName