如何準備給工程師的 GA4 電子商務 Data Layer 資料層文件?

Ian
I think, therefore I do.
9 min readMar 4, 2024

在「 Data Layer 資料層是什麼?」這篇文章中,我們提到在未來操作 GTM 的路上,你會需要與工程師團隊合作,將需要的事件和參數推送到網站的「 Data Layer 資料層 」。

然而,我們不能只是把 Google 官方文件丟給工程師,自己就沒事了。

身為 GTM 操作者的你,必須要準備一份清晰的「 推送到 Data Layer 的代碼文件」,以指導工程師如何在 正確的位置推送 正確的資料 到網站的 Data Layer ,這樣我們就能夠使用 GTM 抓取相關的事件名稱和參數,並將其回傳到 GA4 中。

最常見的操作之一就是將 GA4 電子商務事件相關參數推送到 Data Layer 上,因此,這篇文章將會以電子商務事件作為範例,同時提供一些建議事項,讓你能夠盡量避免錯誤,否則一來一往實在是曠日廢時,浪費團隊的寶貴時間。

建立電子商務資料層文件

我們希望在使用者完成訂單之後,可以在資料層抓取到該筆訂單的相關參數,對於電子商務事件,GA4 已預設了相對應的事件名稱和參數。為了在 GA4 電子商務報表中正確顯示資料,我們必須按照它的設定方式完全進行操作。

以購買(purchase)事件為例,以下是官方提供的資料層推送代碼範例:

GA4 建議事件 — purchase

在上圖推送到資料層的代碼中,傳送了「 訂單價格(value)」、「 稅金費用(tax)」、「 運費(shipping)」、「 幣別(currency)」、「 折價券代碼(coupon)」以及「 產品相關的資訊(items) 」,如:產品 id、產品名稱、產品類別、單價以及數量。

除了「 currency」以及「 value」是官方建議的 purchase 事件必備參數以外,我們也建議要放入「 transaction_id 」,如果有重複觸發的訂單時(例如使用者「不小心」刷新完成訂單頁面),GA4 會自行對照訂單 id,避免紀錄重複的資料。

我們先來假設一下目前的情況:

團隊想要追蹤使用者完成購買時,該筆訂單的 總金額以及 購買了哪些產品 ,我們該如何準備這份給工程師的 Data Layer 文件?

文件格式參考

【為什麼我們要推送 GA4 電子商務資料到網站的資料層中?】

讓網站工程師了解到我們打算放什麼代碼到網站上,例如:推送 purchase 事件的這段代碼是為了要了解到購買我們產品的人都是來自於哪些渠道?花了多少時間才完成購買等?讓行銷團隊有數據可以參考,以規劃未來的行銷活動。

同時也附上官方文件,方便工程師進一步閱讀: GA4 建議事件 — purchase

我們會如何運用資料層中的資料?

告知工程師,我們將會使用 Google 代碼管理工具(GTM) 去抓取 Data Layer 內的資料,接著將資料傳送到 Google Analytic 4 當中分析使用。

如果工程師不了解什麼是 GTM,可以附上這篇文章: Google 代碼管理工具是什麼?,或是 官方文件 供其參考,必要時也可以與工程師約個會議,向他們進行解釋。

預計推送的事件、網站頁面以及時間點

告知工程師我們需要在「 什麼時候」於「 哪些頁面」推送「 哪些資料 」到資料層。

例如:當使用者「 完成購買」時,於 訂單完成頁面(thank you page)啟動代碼,推送 結帳相關資訊以及 purchase 事件到資料層。或是當使用者點選「 加入購物車」時,推送 add_to_cart 事件以及 加入的產品相關資料 到資料層。

告知工程師相關注意事項

提醒工程師一些要注意的小細節,例如:

  1. 訂單價格 value」、「稅金費用 tax」以及「運費 shipping」這類型的參數必須要是數字(number)。
  2. 不同的事件必須要使用不同的 dataLayer.push 代碼,不能混用,請完整參照本文件中所提供的代碼格式,同時也可以在代碼中註解提醒項目。
  3. 代碼中的「值」為範例,請放上相對應的變數,非固定「值」。
  4. 如有任何不確定或是因文件不清楚無法理解的部分,請聯絡文件負責人:[信箱地址以及分機號碼]

提供代碼範例

給工程師的代碼,不要直接複製貼上在 Email、Word 文件或是 Google Doc,此舉很容易造成代碼因為文件編碼方式不同,使得複製貼上的代碼出現錯誤。建議可以使用 Gist 來分享代碼,以確保複製貼上時的完整性。

例如,我們可以這麼做:

代碼 1 : 購買(purchase)追蹤事件
代碼連結:[https://gist.github.com/ga4-purchase]
推送時機:當使用者完成購買來到訂單完成頁面時,同時附上訂單完成頁面網址。

代碼 2 :加入購物車(add_to_cart)追蹤事件
代碼連結:[https://gist.github.com/ga4-add-to-cart]
推送時機:當使用者點擊「加入購物車」時,推送該事件以及加入購物車的產品相關資訊。

代碼 3 : 以此類推…

範例文件下載

針對上述的文件格式,我們也提供了一份參考範例可以複製,依照自己的需求修改調整就可以。

此為 Google Doc 複製連結:「 給工程師的 Data Layer 資料層文件

補充一下

保持事件參數的一致性

每當我們新載入一個頁面,原本在 Data Layer 中的資料都會被清空,這點我們在文章「 Data Layer 資料層是什麼? 」有提到過。

因此在每個電子商務事件中, 如果一開始就有帶了 items 相關參數,請在下一個事件中也帶上相同格式的 items 參數 ,例如:

你在「 view_item」事件有帶上 items 相關參數,包含 item_brand 以及 item_category,請在接續的 「 add_to_cart 」事件中的 items 相關參數也帶上 item_brand 以及 item_category。

此舉可以確保資料的一致性,避免下一個事件中 Data Layer 中沒有相關資料可以取用,未來在使用 GA4 報表時,才能避免在追蹤流程錯失相關資料。

雖 item_id 一樣,但不會溯源

延續上圖,儘管前後兩個事件的 dataLayer.push 都帶了一樣的參數 item_id,但是並不會因此自動在下一個頁面的 Data Layer 中延續 items 的相關事件參數,GA4 也不會自動在事件之間比對,因此每一個 dataLayer.push 都要再帶一次 items 的相關參數。

(值得注意的是,有些網站當使用者瀏覽產品(view_item)並按下加入購物車(add_to_cart)後,因為頁面沒有跳轉,此時的資料層已經存在由 view_item 事件推送 ecommerce 參數,此時推送到資料層的 add_to_cart 事件代碼儘管沒有帶 ecommerce 相關參數,依然是有值可以取得的。 )

一個推送代碼只能帶一個事件

不要在同一段推送代碼中,放入兩個事件,如果這麼做的話,資料層只會存在最後一個事件的名稱,以下圖為例的話,最後資料層中僅會存在事件 add_to_cart

遵循官方文件命名

如果要讓 GA4 電子商務報表可以正確接收相對應的電子商務資料, dataLayer.push 代碼中的 事件以及 參數名稱一定要跟 官方文件的命名 完全一樣,這點在 GTM 操作人員撰寫給工程師的文件時就必須要注意,避免工程師複製了錯誤的代碼,造成 GA4 電子商務報表無法正常運作。

注意必要的電子商數事件參數

有些參數是必須的,如果有推送 items 參數,請記得一定要帶 item_id 以及 item_name,或是有推送 purchase 事件的話,也一定要帶 currency 以及 value 兩個參數,否則電子商務報表中的「 商品收益 」欄位將會是一片空白。

value 參數只能是數字(number)

如果有使用到跟金額相關的參數,如: valueshippingtax 或是 discount,請一定要記得其「 」類型必須為數字,不要加入金錢或是貨幣相關符號,例如:”$25″ 以及 “€30.03″。

總結一下

最後,我們來整理一下這些步驟:

  1. 準備一份文件,告知工程師該代碼的用途,我們為什麼需要這麼做以及會怎麼應用
    (這件事通常就是一次工,未來合作久了,也不需要再跟工程師說明一次了)
  2. 於文件中標明代碼安裝注意事項,並重複確認我們準備的代碼正確性,也請不要用 Google Doc、Word 或是直接將代碼撰寫在信件中,避免因為文件編碼問題造成代碼錯誤。
  3. 文件發送出去之前,自我檢查一下是否有這些錯誤,避免雙方一來一往曠日費時。
  4. 可以的話,你可以透過 GTM 的「自訂 HTML」代碼先自行推送一次 dataLayer.push 代碼,測試是否會如預期般地執行,再將文件發送給工程團隊或是 PM。

身為 GTM 操作人員,在請工程師推送資料到 Data Layer 資料層時,切記一定要準備好一份完整的文件給工程師團隊閱讀,最好也能安排一場快速的簡報或是一通電話,搭配著文件告知工程師或是 PM 你需要他們幫忙做的事情,都可以讓雙方的合作更有效率。

--

--