返回網站
返回網站

【實作教學】新版 GA4 電子商務事件,新舊差異與 purchase 轉換!

· GA4P

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

【實作教學】新版 GA4 電子商務事件,新舊差異與 purchase 轉換!

文章目錄

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

 1. 事件名稱上的差異

 2. 參數名稱上的差異

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

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

 1. 啟動網站的 Debuge Mode

 2. 確認網站的 Data Layer 資訊

 3. 串接 GA4 跟 GTM

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

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

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

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

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

1. 事件名稱上的差異

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

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

Google Analytics 電子商務事件行為名稱新舊對照表

請注意:

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

2. 參數名稱上的差異

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

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

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

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

Google Analytics 電子商務事件參數名稱新舊對照表

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

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

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

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

Google Analytics 4 Property 電子商務事件行為參數支援表

請注意:

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

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

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

請注意:

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

Google Tag Manager 提供的開發者文件

【 Step 1 】啟動網站的 Debug Mode

啟動網站的 Debuge Mode

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

啟動網站的 Debuge Mode

啟動完成,點擊持續。

啟動網站的 Debuge Mode

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

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

確認網站的 datalayer 資訊

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

確認網站的 Data Layer 資訊

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

確認網站的 Data Layer 資訊

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

【 Step 3 】串接 GA4 跟 GTM

串接 Google Analytics 4 Porperty 跟 Google Tag Manager

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

串接 Google Analytics 4 Porperty 跟 Google Tag Manager

複製評估 ID。

串接 Google Analytics 4 Porperty 跟 Google Tag Manager

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

串接 Google Analytics 4 Porperty 跟 Google Tag Manager

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

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

・評估ID:GA4 複製的評估 ID。
・觸發條件:All Pages。

串接 Google Analytics 4 Porperty 跟 Google Tag Manager

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

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

在 GTM 設定電子商務轉換事件:觸發條件

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

在 GTM 設定電子商務轉換事件:觸發條件

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

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

・類型選擇:自訂事件。

・事件名稱:purchase。

設定完畢按下儲存。

在 GTM 設定電子商務轉換事件:觸發條件

觸發條件設定完成。

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

在 Google Tag Manager 設定電子商務轉換事件:代碼&變數

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

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

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

・代碼類型:GA4 事件。

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

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

在 Google Tag Manager 設定電子商務轉換事件:代碼&變數

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

在 Google Tag Manager 設定電子商務轉換事件:代碼&變數

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

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

在 Google Tag Manager 設定電子商務轉換事件:代碼&變數

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

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

在 Google Tag Manager 設定電子商務轉換事件:代碼&變數

點擊新增變數。

在 Google Tag Manager 設定電子商務轉換事件:代碼&變數

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

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

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

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

・資料層版本:版本 2。

在 Google Tag Manager 設定電子商務轉換事件:代碼&變數

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

在 Google Tag Manager 設定電子商務轉換事件:代碼&變數

請注意!

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

在 Google Tag Manager 設定電子商務轉換事件:代碼&變數

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

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

在 Google Tag Manager 設定電子商務轉換事件:代碼&變數

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

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

利用 Debug View 預覽是否埋設正確

在 { Google Tag Manager } 點擊預覽。

利用 Debug View 預覽是否埋設正確

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

利用 Debug View 預覽是否埋設正確

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

利用 Debug View 預覽是否埋設正確

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

利用 Debug View 預覽是否埋設正確

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

利用 Debug View 預覽是否埋設正確

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

【 假如系列談 】

假如我全部的電子商務行為事件都埋設完會怎麼樣 ... ?

利用 Debug View 預覽是否埋設正確

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

article-convertion

更多 GA 教學相關閱讀:

【 Google Analytics 】

【 網站分析 】GA 數據有落差?釐清網站數據不準確的 7 個原因

【 工具介紹 】新的測試功能 - 計算過的指標 BETA

【 工具介紹 】簡介新插件 AUTOTRACK

【 工具介紹 】跨網域追蹤

【 Google Analytics 4 Property 】

【 GA教學 】2020 新版 GA4 完全攻略,從新舊比較到自訂報表都 OK

【 安裝教學 】安裝新版 GA4,歡迎來到跨裝置的思考領域

【 全新功能 】新版 GA4 竟能預測使用者行為?五大優勢提高轉換率

【 一表看懂 】新版 GA4 與舊版 GA 差在哪裡?新舊版本功能比較懶人包

【 新版介面 】新版 GA4 的後台介面更新和操作介紹

【 自訂報表 】新版 GA4 設定自訂報表解說,省去每次整理數據的時間

【 跨網域追蹤 】新版 GA4 設定跨網域,一次收集多個網域的數據

【 目標對象 】新版 GA4 如何串接 Google Ads,進行再行銷廣告

【 自訂事件 】新版 GA4 如何自訂事件,讓你追蹤使用者的特定行為

【 事件修改 】新版 GA4 事件設定錯誤?帶你直接在後台修正回來

【 事件測試 】新版 GA4 如何利用 Debug View 測試尚未發布的事件

【 建議事件 】新版 GA4 官方建議事件清單說明與教學,一次就上手

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

【 Google Tag Manger 】

【 新手教學 】十分鐘搞懂 Google Tag Manager

【 實際應用 】

【 實際應用 】評估社交媒體渠道

【 實際應用 】善用區隔,找到更「值」的受眾

article-convertion

參考資料:

Simo Ahava's blog|GOOGLE ANALYTICS 4: ECOMMERCE GUIDE FOR GOOGLE TAG MANAGER。

MeasureSchool|Google Analytics 4 Conversion Tracking ( + Purchase Ecommerce Tracking)。

訂閱
上一篇
【建議事件】新版 GA4 官方建議事件清單說明與教學,一次就上手!
下一篇
 返回網站
取消
所有文章
×

快要完成了!

我們剛剛發給你了一封電郵。 請點擊電郵中的鏈接確認你的訂閱。

好的