【實作教學】新版 GA4 電子商務事件，新舊差異與 Purchase 轉換！

2021年1月14日

新版 GA4 的電子商務事件跟通用型 GA 有著不少的差異性，本篇文章會帶你一次搞清楚新版與舊版在「事件名稱」與「參數名稱」差異；還有新版 GA4 的參數支援了哪些事件；最後會利用 Google Tag Manager 實作教學，帶你實際完成一次 GA4 電子商務購買事件的佈署流程。

注意：通用型 GA 即將在 2023 年 6 月 30 日的時候關閉資料收集服務，並且預計在年底關閉整個後台，屆時將無法再使用，還沒轉移的小夥伴，趕緊轉移到 GA4 吧！（完整資訊還是以官方公布為主，想獲得最新消息，請洽圖靈數位）

文章目錄

一、新舊版 GA 電子商務事件差異

　１. 事件名稱上的差異

　２. 參數名稱上的差異

　３. 新版 GA4 電子商務參數支援事件說明

二、新版 GA4 電子商務事件實作教學

　１. 啟動網站的 Debuge Mode

　２. 確認網站的 Data Layer 資訊

　３. 串接 GA4 跟 GTM

　４. 在 GTM 設定電子商務事件轉換的觸發條件

　５. 在 GTM 設定電子商務事件轉換的代碼＆變數

　６. 利用 GA4 的 Debug View 預覽埋設是否正確

一、新舊版 GA 電子商務差異

這篇文章將帶給讀者三個簡單的概念：

１. 事件名稱上的差異

【電子商務報表的資源如何出現的】

想要使用新版 GA4 的電子商務報表，需要從網站將資料回傳到後台，並且是回傳系統可以辨識的資料格式，系統才能呈現在電子商務報表上面，這邊就列出了新版與舊版 GA 在電子商務事件行為名稱上的差異供讀者參考。

請注意：

並不是所有的結帳行為資訊都需要紀錄，例如「add_shipping_info」以及「add_payment_info」這兩個行為對於金融性商品就不是必要資訊，記得針對實際的消費者購物流程去調整。

２. 參數名稱上的差異

【 GA 是怎麼知道我到底賣了什麼商品】

想要詳細追蹤商品在網站或是應用程式銷售的狀況，你需要在購買行為發生的時候同時把商品的銷售資訊一起回傳到 GA4 的後台上。

例如：你的網站販售了一個杯子。你必須要提供「產品的 ID」、「產品售價」、「產品說明」、「產品銷售數字」... 等資訊給 GA，電子商務報表才能夠呈現出銷售狀況，你也能夠進一步去評估銷售的表現。

這邊也列出了新版與舊版 GA 在電子商務事件參數名稱上的差異供讀者參考。

你會發現新版 GA4 做了不少名稱上的調整，將商品或服務的代號統一調整成「item」，並且在後面加上「 _ 」去代表不同的資訊，同時也針對廣告的新增了一些之前沒有的參數，例如「promotion_id」（促銷訊息 ID）。

３. 新版 GA4 電子商務支援事件說明

【一個事件參數可以支援多種事件】

我們都知道事件是由名稱與參數組成，因此一個參數可能會同時支援多個事件，例如「tax（稅）」就會跟「購買事件」、「退貨事件」這兩種事件有關，因此官方也提供了電子商務的事件參數支援了哪些事件。

請注意：

假如你想要追蹤的參數跟事件都不在官方文件上面也不用擔心，你可以自行設定事件以及維度、指標，只是因為名稱跟參數都是自己設定，所以未來可能會不適用某些報表功能。

二、新版 GA4 電子商務事件實作教學

最後我們將透過 GTM 實際帶大家實作一次電子商務事件的追蹤，以購買事件為例。

請注意：

請確認網站已經導入了電子商務的 Data Layer 的資訊，假如網站原本就有通用型 GA 加強型電子商務的 Data Layer 資訊，可以沿用，不知道的建議先跟工程師或是網站建置商確認，需要埋設的資訊可以參考 Google Tag Manager 提供的開發者文件。

【 Step 1 】啟動網站的 Debug Mode

進入 { Tag Assistant }，點擊新增網域，輸入網站網址。

啟動完成，點擊持續。

回到 { 你的網站 } 啟用右下角的 Debugger connected 視窗。

【 Step 2 】確認網站的 Data Layer 資訊

在 { 你的網站 } 實際完成一次購物流程。

在 { Tag Assistant } 找到 Purchase 的事件，點到 Data Layer 的頁籤。

在 Data Layer 找到符合 GA4 電子商務事件的參數。

【 Step 3 】串接 GA4 跟 GTM

在 { Google Analytics } 點擊左下角齒輪 -> 選擇資料串流 -> 選擇你的網站，找到評估 ID。

複製評估 ID。

進入 { Google Tag Manager } 的代碼頁面，點擊新增。

新增一個「串接 GA4 跟 GTM」的代碼：

・編輯名稱：可以辨識的。
・代碼類型：GA4 設定。

・評估ＩＤ：GA4 複製的評估 ID。
・觸發條件：All Pages。

在代碼頁面看到設定完成的代碼。

【 Step 4 】在 GTM 設定電子商務轉換的觸發條件

在 { Tag Assistant } 確認要從 Data Layer 送的事件名稱。

設定傳送電子商務轉換事件的觸發條件：

・編輯名稱：自訂事件 - 購買。

・類型選擇：自訂事件。

・事件名稱：purchase。

設定完畢按下儲存。

觸發條件設定完成。

【 Step 5 】在 GTM 設定電子商務轉換的代碼＆變數

進入代碼頁面，點擊新增代碼。

設定傳送電子商務轉換事件的代碼：

・編輯名稱：可以辨識的。

・代碼類型：GA4 事件。

・設定代碼：使用【 Step 3 】設定的代碼。

・事件名稱：需要確認送出的資料格式符合規範。

在 { Tag Assistant } 確認 { Google Tag Manager } 送出的資料格式 Event = Purchase，符合 { Google Analytics } 的規範。

設定傳送電子商務轉換事件的代碼：

・事件參數：在 { Google Analytics } 收集的事件，包含什麼參數。

在 { Tag Assistant } 裡面找出 purchase 事件的 Data Layer 可以看到一共有 7 個事件參數可以傳送到 { Google Analytics }，我們這邊會實際設定三個當作範例給各位參考。

回到 { Google Tag Manager } 輸入第一個參數名稱 transaction_id，並且點擊「值」的按鈕。

點擊新增變數。

設定傳送電子商務轉換事件參數的變數：

・編輯名稱：命名方式建議為 div - ....。

・資料類型：資料層變數。

・資料層變數名稱：需要確認資料的路徑。

・資料層版本：版本 2。

你可以在在 { Tag Assistant } 找到 purchase 事件的 Data Layer 確認路徑。

請注意！

在設定事件參數的時候，只有 item 的資料層版本要選擇版本１，不然系統會出現錯誤。

七個事件參數都設定完畢之後，設定傳送電子商務轉換事件的代碼：

・觸發條件：使用【 Step 4 】設定的觸發條件。

在代碼頁面看到設定完成的兩個代碼。

【 Step 6 】利用 GA4 的 Debug View 預覽埋設是否正確

在 { Google Tag Manager } 點擊預覽。

再度完成一次購買流程，可以在 { Tag Assistant } 看到購買行為時 { Google Tag Manager } 觸發了一個資料傳到 { Google Analytics }。

回到 { Google Analytics } 選擇 Debug View 報表，可以看到 purchase 事件，點擊一下。

可以在裡面看到剛剛設定要追蹤的電子商務事件參數。

點擊項目頁籤，商品的資訊。

在所有事件報表裡面可以看到 purchase 被直接設為轉換。

文章總結

如果你有埋設完所有的電子商務行為事件，就能夠在電子商務報表完整看到購物的步驟與流程，包含項目瀏覽量、加入購物車次數、觀看後加入購物車率、商品購買數量、商品收益 ... 等各項指標；如果你在埋設的過程當中碰到問題，或是不知道該如何埋設程式代碼，歡迎填寫【詢問表單】或是直接在右下角【私訊我們】，我們隨時都有分析師在線上協助支援，請不要客氣！大膽地提出你的問題！由於 GA4 截至當下仍會不定時更新，想獲得最新消息，請洽【 圖靈數位 】