聯絡我們LINE加入 LINEFacebook粉絲專頁
GTM教學|GA4電商埋設5|GA4電商埋設
GTM

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

電子商務事件中的Coupon屬於非必備參數 ,務必在埋設的過程中,Coupon給傳入至GA4。 台灣開店平台快速架站,GA4設定也滿全面;所以只有少數會需要使用到Coupon的參數資料。為了讓教學落實完整性,這集也是講Coupon。不過這集內容我覺得稍微有難度,你應該也可以從中學習到不少埋設的知識。Coupon參數用於顯示網站的折扣,透過 price - Coupon = value 得出該電子商務事件的value。如果你的網站會有折價券、折扣、優惠碼等活動,那麼這個參數就可以考慮傳入GA4。 如果要自行透過GTM埋設電商事件,那要從哪裡開始執行。接下來這一系列會拆解,關於GTM埋設電商事件,

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

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

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

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

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

前往GA4官方文件

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

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

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

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

GTM電子商務埋設大全1 – CSS Selector抓取Value

GTM電子商務埋設大全2 – CSS Selector抓取ItemID

GTM電子商務埋設大全3 – CSS Selector抓取ItemName

GTM電子商務埋設大全 4 – CSS Selector抓取ItemName

電子商務事件埋設

抓取優惠券欄位

本次要抓取的目標是當客戶結帳時,抓取輸入的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 教學|Shopify 如何設定META 免費像素?
GTM

GTM 教學|Shopify 如何設定META 免費像素?

這篇會教你使用SHOPIFY 的顧客事件 (自訂像素) Customer Pixel 來安裝行銷常用代碼。例如,META, GA4, Gads 轉換代碼等。透過AI 可以快速協助我們完成這些行銷追蹤碼的設定。

【成功案例】GA4 電商事件規劃
成功案例

【成功案例】GA4 電商事件規劃

本次黑客協助規劃舒康雞電商網站,完整規劃GA4電子商務必要事件,以及正確觸發事件。精準蒐集網站用戶行為,大幅提高網店轉換率。

【成功案例】轉換率優化模組
成功案例

【成功案例】轉換率優化模組

本次黑客與三隻斑馬合作,提供轉換率優化模組埋設,幫助電商網站改善用戶動線、用戶體驗,以增加廣告用戶的實際購買轉換率。本次黑客協助提供撰寫前端轉換率模組,以及完整設定、指導轉換率模組使用教學。

Meta Ads MCP 是什麼?不用寫程式也能讓 AI 分析 Meta 廣告
AI

Meta Ads MCP 是什麼?不用寫程式也能讓 AI 分析 Meta 廣告

行銷人、廣告投手一定要學的 MCP 串接方式。輕鬆讓 AI 讀取 Meta 廣告資料,透過 MCP 開始分析你的 Meta 廣告數據、GA4 數據等更多。一站式輕鬆分析廣告數據、廣告操作等複雜任務交給AI!

【成功案例】GA4 導入
成功案例

【成功案例】GA4 導入

本次黑客與 低調生活DLIFE 合作,協助提供完整 GA4 數據健檢、完整GA4事件規劃、提供頂尖數據儀表板。再透過快客數據串接,協助客戶打造一系列的數據報表,同時也提供完整數據流工作的完整解說。

【成功案例】GA4 導入
成功案例

【成功案例】GA4 導入

本次黑客與 澄駒國際車業 合作,協助提供完整GA4事件規劃、提供頂尖數據儀表板。透過快客數據串接,協助客戶打造一系列飛快的數據報表,同時也提供完整數據流工作的完整解說。

GA4教學|數據工程師教你使用GA4 MCP
GA4

GA4教學|數據工程師教你使用GA4 MCP

這篇文章會教你使用 CLAUDE 或是其他 AI AGENT 帶你從 0 串接 GA4 MCP。需要注意創立 Service Account 時候,建議使用個人帳號,如果你是使用企業帳號,則會有權限限制的問題,導致你的GA4 沒辦法加入 Service Account。

【成功案例】修復GA4 網店總收益落差
成功案例

【成功案例】修復GA4 網店總收益落差

台灣開店平台常有數據與GA4 數據大幅落差問題。導致數據人員無法判讀數據的困擾。

【成功案例】修復GA4 網店工作階段判讀落差
成功案例

【成功案例】修復GA4 網店工作階段判讀落差

本次黑客修復網店utm 臉書廣告歸因判讀,以及direct / none 歸因判讀錯誤問題。成功將網店的臉書廣告歸因提升141% 正確修復,而direct / none 也有明顯下降!