GTM教學 - GA4電子商務埋設5 - CSS Selector抓取Coupon

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

台灣開店平台快速架站，GA4設定也滿全面；所以只有少數會需要使用到Coupon的參數資料。為了讓教學落實完整性，這集也是講Coupon。不過這集內容我覺得稍微有難度，你應該也可以從中學習到不少埋設的知識。Coupon參數用於顯示網站的折扣，透過 price – Coupon = value 得出該電子商務事件的value。如果你的網站會有折價券、折扣、優惠碼等活動，那麼這個參數就可以考慮傳入GA4。

如果要自行透過GTM埋設電商事件，那要從哪裡開始執行。接下來這一系列會拆解，關於GTM埋設電商事件，你所需要的資料。將在這些集中，為你一一的拆解。如果你想要增加電子商務追蹤的準確率，那務必要考慮伺服器追蹤，因為目前使用者大多為蘋果用戶，另外也會安裝阻擋外掛插件，而這一些都會造成網站無法順利發送資料至GA4。

本篇會假設讀者已經熟悉GA4的基礎追蹤、GA4的基礎串接都已經施行完畢。如果你這些不熟悉的，那麼本篇文章就會相對較吃力。

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

章節內容

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

前往GA4官方文件

GTM電子商務埋設大全5 - CSS Selector抓取Coupon｜GA4電子商務完整代碼埋設

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

另外你可能會有疑慮，這樣自己埋設，會不會因為網頁跳轉，或是其他消費者行為，導致追蹤失效? 因此這一集教學，也包含寫入至Cookie或是寫入至LocalStorage也可以。客人只要一輸入優惠券代碼，不用擔心資料遺漏。

這樣僅能減少追蹤的遺失機率；使用者情況上百種，還有IOS, AdBlock,或是其他不為人知的插件做干擾，因此不保證100%完整追蹤! 基本上所有系統追蹤一定會有遺漏。

如果你想要針對某一個變數抓取，以下是整理的教學清單。

電子商務事件埋設

抓取優惠券欄位

本次要抓取的目標是當客戶結帳時，抓取輸入的coupon代碼。所以需要先對應網站內，可以輸入優惠券的地方，程式碼可能會跟我的教學不一樣，所以要記得自己調整一下程式碼。

查看網站DOM元件

這一個「id = “coupon_code”」，對應到前面提及 – 網站輸入優惠券的欄位。以這個為目標，作為CSS選擇器的抓取。

輸入對應程式碼

document.querySelector("#coupon_code");

這次抓取id，因此輸入的符號不是「.」，而是「#」，要區分清楚。可以直接照範例上面的輸入，但務必確認你的網站欄位是否有一樣!

調整CSS語法

document.querySelector("#coupon_code").value;

我們使用「.value」擷取選擇器抓到欄位後的「值」。有很多專有名詞，要注意一下!

設定自訂JS

打開你的GTM，並且新增一個自訂JS變數，將你剛剛的程式碼輸入近來，並且分別再多新增兩個程式碼。

newv = 'coupon'  +  '='  + coupon 
document.cookie = newv

因為GTM不支援ES6以上的寫法，因此我們要額外多宣告一個變數。利用這個變數輸入至cookie才有辦法執行!如果你還是不理解為甚麼這樣，推薦你可以先看上面的影片，比較易懂!

新增一個cookie變數

新增一個cookie變數，目的是為了讀取剛剛寫好的COOKIE值。

Debug模式檢查

進入GTM DEBUG模式檢查，可以看到有兩個變數，一個是我們透過JS寫的；另外一個是Cookie抓取的純「value」。我們要的就是Cookie那一個，也就是「coupon cookie」這一欄。

將變數套入至html中

將你所命名的cookie變數名稱，以{{name}}的方式套入至，GA4電子商務官方文件中的Coupon裡面即可。不要忘記最後可以再Debug模式中確認一次，並且記得發布。那你就完成今天第五集，電子商務埋設的教學囉!

Coupon或是前面一集所講到的網紅追蹤，基本上都會有資料遺漏的問題，即便是透過cookie也是。隨著隱私權，裝置的更新，追蹤做不到100%的全面追蹤，我們只能做到最好，減少數據遺漏。

本文總結

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

GTM教學｜GA4電商埋設5｜GA4電商埋設