Skip to content

GTM 埋設 GA4 電子商務事件代碼 完整教學

Google Analytics 4 電子商務報表,一直是所有使用 GA 的使用者在關注的議題, GA4 電子商務報表到底能不能取代通用版 GA (Universal Analytics)進階型電子商務? 現階段的答案是:不行的;雖然 GA4 電子商務報表已經啟用,但仍然有不少功能尚未釋出,要取代通用版 GA 進階型電子商務,還需要點時間;儘管如此,導入 GA4 電子商務絕對是必要的,因為 GA4 取代通用版 GA 是早晚的問題,提早佈署完成正確的 GA4 電子商務事件,並開始收集數據,確保未來 GA4 釋出新報表與功能時,數據已經到位,可以馬上拿來做使用。

本篇教學文章將會帶你認識 GA4 電子商務架構,並教你如何正確佈署 GA4 電子商務訊號,透過網站資料層 (dataLayer)儲存所需資訊,最後再使用 Google Tag Manager 埋設 GA4 電子商務事件代碼。

通用版 GA 進階型電子商務 vs GA4 電子商務

和通用版 GA 一樣, 要使用 GA4 電子商務報表就必須使用 GA4 規範的電子商務格式;只有這樣, GA 在處理數據時才會認得並將其納入電子商務報表訊號,下方將列出通用版 GA 和 GA4 電子商務格式的差異與介紹。

電子商務事件行為名稱對照表

先前在 Google Analytics 4 事件,你必須知道的4件事情 有提到,所有 GA4 事件都是由事件名稱和事件參數組成,而上述提到的電子商務行為就會對應到 GA4 事件的事件名稱,針對每一個電子商務行為發送相對的事件名稱, GA4 就會認得該事件並將事件納入對應的電子商務行為。

上方對照表中紅字部分可以看到, GA4 在結帳步驟計算方式和通用版 GA 完全不一樣, GA4 取消了自定義結帳步驟(checkout step1~5),取而代之的是固定行為名稱,依照每個網站結帳流程不同,使用的事件行為也會不同,行銷人員可以自由決定是否要使用瀏覽購物車頁面(view_cart)當作結帳第一步,也可以自由決定是否要使用添加運送與付款資訊(add_shipping_info&add_payment_info),只要確保結帳流程至少有送出開始結帳(begin_checkout)即可。

電子商務商品物件參數對照表

在上方對照表中紅字部分可以看到,商品分類在 GA4 收集方式和通用版 GA 不同,通用版 GA 使用 category 欄位儲存商品分類,並用”/”區分不同層級(最多5個分類層級),而 GA4 將商品分類獨立分成了 5 個不同的分類欄位,詳細範例如下:

{
  //通用版 GA 商品分類參數範例
  category: '分類層級1/分類層級2/分類層級3/分類層級4/分類層級5'
  //GA4 商品分類參數範例
  category: '分類層級1',
  category2: '分類層級2',
  category3: '分類層級3',
  category4: '分類層級4',
  category5: '分類層級5'
}

注意:GA4 正確的商品分類層級為 category, category2, category3, category4, category5 ,官方文件中的範例是錯誤的!官方文件分類:category, category_2, category_3, category_4, category_5

所有 Google Analytics 4 電子商務行為都支援商品物件參數,商品物件參數主要是用來儲存商品資訊,每一個商品資訊會由一個或多個商品參數組成;使用商品參數時,必須包含 item_id 或 item_name 其中之一,其餘商品參數則為選用,可以根據需求使用需要的商品參數;舉例來說,當我們購買了 A、B、C 三個產品,就會產生三個商品物件參數,範例如下:

[{
  item_id: 123,
  item_name: '商品A',
  price: 999
},
{
  item_id: 456,
  item_name: '商品B',
  price: 888
},
{
  item_id: 789,
  item_name: '商品C',
  price: 777
}]

電子商務行為參數對照表

GA4 每一個電子商務事件都有各自支援的事件參數,使用支援的電子商務參數可以讓 GA4 在辨識電子商務行為的同時,將對應的參數資訊加上,完整 GA4 電子商務事件與支援參數可以參考官方文件

GA4 電子商務事件代碼設定教學

開始以前,請確保網站已經導入電子商務資料層,如果網站本來就已導入通用版 GA 進階型電子商務資料層,GA4 可以直接沿用資料層參數;如果網站是第一次導入電子商務,可以查看 GTM Data Layer 資料層 基礎介紹,並參考 Google Tag Manager 開發者文件,依照指示導入正確的電子商務資料層參數。

步驟1: 建立 GA4 設定代碼

建立 GA4 設定代碼

建立 GA4 設定代碼,詳細資訊可以參考 GTM 安裝 Google Analytics 4 網站資料串流教學

步驟2: 新增 GA4 電子商務資料層變數

所有 GA4 電子商務參數都必須先設定為 GTM 變數,使用 GTM 資料層變數存取網站送出的資料層參數,建議搭配 dataLayer checker 外掛插件 查詢網站送出的資料層參數,範例如下:

dataLayer checker 可以查看網站送出的資料層參數,左邊為參數在資料層的路徑,右邊為對應的參數值;儲存參數在資料層的路徑,用於新增 GTM 資料層變數,取得該路徑對應的參數值。

上圖為 transaction_id 資料層變數範例,將所有要使用的電子商務事件參數,都用此方式新增 GTM 資料層變數,除了 item 變數以外,資料層版本使用預設版本2即可。

上圖為 GA4 電子商務 item 參數範例, item 參數格式為陣列(array),包含所有商品物件資訊item 變數建議設定為資料層版本1,否則有可能會出現不可預期的錯誤!

注意:官方文件提供的 items 範本使用的是巢狀結構,而資料層版本1是不支援巢狀結構的,因此,要使用資料層版本1的變數, items 必須使用單一結構,範例如下:

如果網站本來就有使用資料層儲存通用版 GA 進階型電子商務資訊,可以直接使用數據酷獨家開發的 GTM 變數範本,將通用版 GA 商品資訊自動轉為 GA4 商品資訊格式,詳細介紹與使用方式可以參考 [GTM 變數範本] GA4 items 電子商務訊號格式轉換 使用教學

步驟3: 新增 GA4 電子商務事件代碼

GA4 電子商務 事件代碼埋設

上圖為 GA4 電子商務購買完成事件範例,詳細設定說明如下:

更多有關 GA4 事件代碼設定的說明,可以參考使用 GTM 埋設 GA4 事件代碼

步驟4: 新增 GA4 電子商務事件觸發器

GTM purchase 購買自訂事件

使用資料層產生的觸發器製作自訂事件,並設定為事件代碼觸發條件。

步驟5: 確認事件代碼的正確性

google analytics 電子商務 事件代碼

使用 GTM 預覽模式檢查 GA4 電子商務事件代碼是否能正常觸發、送出的參數與參數值是否正確,確認無誤後即可發布 GTM 容器版本。

備註:同步使用 GA4 debug view 可以保證數據有確實被接收!

結語

發佈 Google Tag Manager 版本後,前往 Google Analytics 4 資源 營利 -> 電子商務購買 查看新版 GA4 電子商務報表,如果設置正確,各電子商務指標(項目瀏覽量、加入購物車次數、觀看後加入購物車率、商品購買數量、商品收益)應該都要有對應數字,如果有缺漏,建議返回 GTM 容器,檢查對應的電子商務事件是否設置錯誤。

看完本篇教學文章後,如果對 Google Analytics 4 資源電子商務訊號有任何問題,歡迎填寫表單描述遇到的問題,我們會儘快為你解答;或是參考數據酷電商佈署與分析方案,由專業團隊協助企業導入完整 GA4 電子商務代碼。

Google Analytics 4 電子商務訊號相關官方文件一覽:

數據顧問服務

數據酷顧問團隊
提供企業專屬的數據解決方案

文章許願池

想看什麼文章主題?
我們會儘快為您安排

數據顧問服務

數據酷顧問團隊
提供企業專屬的數據解決方案

文章許願池

想看什麼文章主題?
我們會儘快為您安排

數據顧問服務

數據酷顧問團隊
提供企業專屬的數據解決方案

文章許願池

想看什麼文章主題?
我們會儘快為您安排

Scroll To Top