在 Google Analytics 4 中，有一份預先建立的「電子商務購買」報表，這份報表會顯示自家電子商務網站銷售的產品或服務相關資訊，讓你觀察使用者在網站上的購物流程，例如是否加入購物車、是否已結帳，以及是否完成購買等資訊。
不過，僅安裝了 GA4 還不夠，如果打開這份報表，你會發現裡面是空的，為了讓報表顯示資料，必須在網站上安裝「電子商務事件」，並傳送相對應的參數到 GA4 才行。
（如果你想看一個有資料的報表是什麼樣子的，可以參考這篇文章： 善用 GA4 示範帳戶幫助你學習 Google Analytics，示範帳戶中有很多資料可以供你翻玩。）
因此，這篇文章將會著墨在如何使用 GTM 安裝 GA4 電子商務事件，如果你使用的是台灣常見的開店平台或是 WordPress 電商外掛 Woocommerce 等平台的話，它們基本上都已經有在網站上安裝電子商務事件了，就不用照著本篇文章操作。
如果你的情況不是如上述所說的話，就跟著我們繼續看下去。
本篇重點
GA4 電子商務事件有哪些？
Google Analytics 官方有提供關於電子商務的建議事件設定文件，其事件以及參數的命名，請務必嚴格遵循官方的事件及參數命名。只有依照這些建議，GA4 才能正確地接收從網站上傳來的資料，並在相關的電子商務報表及維度中正確顯示。
GA4 官方目前提供了 14 個跟電子商務有關的建議事件，例如：「瀏覽產品（view_item）」、「加入購物車（add_to_cart）」以及「購物（purchase）」等，由於數量眾多，更多資料可以參考官方的文件。
以一個使用者的購物流程來看，整個過程大概會遇到這些情境。
當然，現實總是充滿挑戰，每次的結帳購物不太可能如此順遂一蹴而就，因此，我們需要透過設定追蹤事件來深入了解使用者在購物過程中的動態，例如：
- 大部分使用者都將產品加入購物車，但遲遲未完成結帳，原因何在？
- 很多人瀏覽了產品頁面，卻沒有將商品加入購物車，為什麼？
- 很多人開始進行結帳程序，但最終未完成結帳，究竟為何？
透過設定 GA4 電子商務事件，我們能夠有效回答上述這些疑問，洞悉使用者在購物過程中可能遇到的障礙。
規劃你的追蹤事件
雖然 GA4 有提供許多電子商務事件給我們使用，但我們不一定要一股腦的全部放到網站上，在開始進行設定之前，我們可以先問自己/團隊幾個問題：
- 你的問題是什麼？透過這些追蹤事件，你希望獲得什麼資訊？
例如：團隊/老闆想知道哪個渠道可以帶來最多的購買轉換？ - 如果今天要放上全部的電子商務追蹤事件，我們是否擁有足夠的人力資源？工程師是否能夠配合？
- 如果時間和人力有限，是否可以先設定最關鍵的事件，之後再逐步添加其他事件？
例如：以電商網站為例，是否優先設定「購買（purchase）」事件就好？因為其它事件暫時可以不裝，但追蹤「購買」事件卻是必要的。
在開始設定之前，釐清這些問題可以避免沒有效率的行動和浪費行銷及工程師團隊的時間，接下來，文章將以最重要的追蹤事件為範例，這也是所有電商站最在乎的事情：「購買」。
有了購買行為，才有營收，進而支撐公司的運營。等到有額外的人力可以進行其他電子商務事件的追蹤與分析時，我們再逐步從「購買」事件倒回來添加像是「結帳開始（begin_check_out）」、「加入購物車（add_to_cart）」或是「查看促銷（view_promotion）」等相關事件。
了解上述這些之後，接下來，我們準備進入追蹤事件的設定步驟。
將事件資料推送到 Data Layer
請工程師將 GA4 官方提供的代碼安裝到網站上，於使用者完成購買時，執行這段代碼，將「購買（purchase）」事件資料推送到網站「Data Layer 資料層」。
以下為官方提供的代碼範例：
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
event: "purchase",
ecommerce: {
transaction_id: "T_12345",
// Sum of (price * quantity) for all items.
value: 72.05,
tax: 3.60,
shipping: 5.99,
currency: "USD",
coupon: "SUMMER_SALE",
items: [
{
item_id: "SKU_12345",
item_name: "Stan and Friends Tee",
affiliation: "Google Merchandise Store",
coupon: "SUMMER_FUN",
discount: 2.22,
index: 0,
item_brand: "Google",
item_category: "Apparel",
item_category2: "Adult",
item_category3: "Shirts",
item_category4: "Crew",
item_category5: "Short sleeve",
item_list_id: "related_products",
item_list_name: "Related Products",
item_variant: "green",
location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
price: 10.01,
quantity: 3
}]
}
});另外，將網站資料推送到 Data Layer 資料層的方法有很多，詳細方法可參考我們之前介紹資料層的文章，這邊就不再贅述。
官方提供的代碼範例中，有很多參數可供使用，但不是每個參數都是必要的，除了參數 currency、value、item_id 以及 item_name 是「購買」事件必要的參數以外，其它參數可以根據自家網站需求進行適度的刪減和調整。
在接下來的示範中，我們將只使用其中幾個參數，以簡化代碼的呈現，同時加入參數 transaction_id，有助於 GA4 判斷是否為重複的購買事件
（使用 transaction_id 的好處在於，當追蹤事件設定完成之後，假設使用者重新整理購買完成頁面，將再次將購買事件送至 GA4，此時，GA4 會檢查 transaction_id 是否已存在，如果是重複的 transaction_id，該筆資料將不會被再次記錄到 GA4 中。）
以下是調整後的代碼範例：
dataLayer.push({ ecommerce: null });
dataLayer.push({
event: "purchase",
ecommerce: {
transaction_id: "T_12345",
value: 72.05,
tax: 3.60,
shipping: 5.99,
currency: "USD",
coupon: "SUMMER_SALE",
items: [
{
item_id: "SKU_12345",
item_name: "Stan and Friends Tee",
price: 10.01,
quantity: 3
}]
}
});請工程師將以上代碼放置在網站上，並在使用者完成購買行為時觸發該代碼。
（關於如何準備給工程師的代碼文件這件事情，可以參考文章：如何準備給工程師的 GA4 電子商務 Data Layer 資料層文件？）
預覽模式測試
當工程師將代碼放上網站後，我們可以透過 GTM 的「預覽模式」來確認資料層中是否會出現我們需要的事件名稱及相關參數。
在進入「預覽模式」後，我們開始模擬使用者在網站上的行為，完成一次購買程序。當完成購買動作時，我們可以觀察資料層中是否有出現相對應的事件名稱（如「purchase」）以及相關參數（如交易金額、商品清單等），若資料層中顯示了我們設定的事件名稱及參數，就表示購買事件已成功推送至資料層。
透過這種方式，確認資料層都有我們需要的資料之後，就可以進行下一步的設定：觸發條件。
設定「購買」事件觸發條件
GTM 左側面板選擇「觸發條件」 > 右上角「新增」> 點擊「觸發條件設定」區塊 >選擇「自訂事件」
在「自訂事件」的設定畫面中，我們需要填入資料層中的事件名稱「purchase」到「事件名稱」的欄位中，請確保大小寫完全相同，接著，命名並儲存該觸發條件即可。
這樣做可以讓 GTM 正確識別並觸發相應的「自訂事件」觸發條件。
將上面的步驟翻譯成中文就是：
當資料層中出現了 purchase 事件（event : “purchase”） 的時候，該「自訂事件」觸發條件符合，這樣就能啟動相對應的代碼。
這樣一來，我們就完成了觸發條件的設定，是不是如此簡單一波。
設定「購買」事件相關變數
為了要將該筆訂單中相關資料的參數傳送到 GA4 當中，我們需要使用 GTM 中的「資料層變數」來取得參數的值。
（關於「資料層變數」的介紹，可以參考文章：GTM 變數介紹：資料層變數）
在 GTM 左側面板選擇「變數」 > 右側下方使用者定義的變數區塊「新增」 > 選擇變數類型「資料層變數」
依據我們給工程師的 dataLayer.push 代碼，我們需要將「訂單 ID (transaction_id)」、「訂單金額（value）」、「稅率（tax）」、「運費（shipping）」、「幣別（currency）」、「折價券代碼（coupon）」以及「產品（items）」的資料傳送給 GA4，因此，我們必須使用「資料層變數」去抓取這些位於資料層中的參數。
接下來，我們會以「訂單 ID (transaction_id)」以及「產品（items）」為例進行設定，其它以此類推就可以，要注意的是，一個「資料層變數」只能抓取一個參數，你有 10 個參數要抓，就需要設定 10 個「資料層變數」。
抓取訂單 ID
「資料層變數」設定介面 > 填入 ecommerce.transaction_id 於「資料層變數名稱」欄位 > 「資料層版本」選擇版本 2（預設）> 命名之後儲存
關於為什麼這樣填寫變數名稱？以及什麼是資料層版本？可以參考文章：GTM 變數介紹：資料層變數，當中有一個段落特別講到這部分。
抓取產品相關資料
如果是要抓取該筆訂單當中有哪些產品，我們可以照以下方式設定「資料層變數」。
「資料層變數」設定介面 > 填入 ecommerce.items 於「資料層變數名稱」欄位 > 「資料層版本」選擇版本 2（預設）> 命名之後儲存
（另外，通常一筆訂單當中，可能會包含很多種產品，如果你只想抓到每筆訂單當中第一個產品或是產品名稱的話，直接輸入 ecommerce.items.item_name 是行不通的，可以參考這種做法。）
設定「購買」事件代碼
在設定完觸發條件和變數後，我們可以進行 GA4「購買」事件的代碼設定。當使用者在網站上完成購買後，我們將「購買」事件及相關購買資料傳送給 GA4。
GTM 左側面板選擇「代碼」> 右上角選擇「新增」> Google Analytics (分析) > Google Analytics (分析)：GA4 事件
在代碼設定介面，依序填入以下欄位，最後設定畫面會如下：
（事件名稱以及參數名稱必須依照 GA4 建議事件文件的命名，不能隨意更改，否則 GA4 電子商務報表會抓不到相對應的參數。）
上述設定完畢之後，將代碼與前面設定的觸發條件綁定後就可以了，這樣當使用者完成購買行為時，相關資料將會被傳送到 GA4，您就可以在 Google Analytics 中查看相關的購買事件數據了。
測試！一定要測試
GTM 預覽模式(Tag Assistant)
如同我們在過去文章中所強調的，任何代碼設定完畢之後，一定要先透過「預覽模式」測試，再把代碼提交，不要一股腦地直接按下 GTM 介面右上角的「提交」，你可能很快會接到來自老闆或是工程師團隊的電話。
測試是確保代碼正確運作的關鍵步驟，因此在完成任何代碼設定後，都應該先進行測試。
如果一切順利，在完成購買之後，你的 GTM 預覽模式畫面應該會跟下圖一樣，左側面板出現「purchase」事件，點選之後會看到 GA4 事件代碼啟動，點開代碼卡片會看到剛剛設定的參數資訊，確認參數資訊是否正確。
GA4 Debug View
除了確保事件有正確地透過 GTM 發送以外，我們還需要在 GA4 中透過 Debug View 確認是否正確接收到資料。
GA4 介面左下角「齒輪」進入後台 > 「資料顯示」 > 「DebugView」
如果順利的話，你會在 Debug View 中看到如下圖的畫面，可以看到「購買」事件確實有傳入，且「訂單 ID」跟我們透過 GTM 傳送出來的相符，代表為同一個事件。
上述都沒問題的話，就表示你的設定正確且事件已正確觸發，此時就可以提交變更，將代碼提交至正式網站上。
總結一下
整個電子商務事件設定的流程大概如下：
- 與團隊/主管確認要追蹤的電子商務事件，評估設定數量與人力是否可以負擔。
- 準備代碼文件給工程師，可以參考本篇文章，會告訴你要準備什麼。
- 工程師安裝完畢後，確認資料層的資料正確無誤。
- 設定觸發條件、變數以及代碼。
- 測試，確認事件是否正常觸發。
- 如無問題，提交代碼並觀察事件是否在正式站正常運作。
這篇文章我們介紹了如何設定「購買」事件，而其它的電子商務事件你可以照本宣科，透過同樣的設定程序來完成電子商務事件的安裝。
如果你真的沒有任何辦法將電子商務資料推送到網站資料層，無法透過外掛或是沒有工程師協助，網站本身也不是透過開店平台架設的，那還有一個辦法可以處理，就是利用 GTM 內建的「 DOM 元素」變數搭配「網頁瀏覽」觸發條件來處理，可以參考文章：
GTM 變數介紹：DOM 元素(DOM Element) ，如果沒有工程師協助，就讓DOM元素給你幫助
不過呢，可以的話，還是盡可能透過「Data Layer 資料層」來進行設定，雖然 GA4 電子商務報表的資料本來就不會百分之百與實際上的後台訂單資料相符，但透過資料層來設定電子商務追蹤事件的準確率，還是會比使用「DOM 元素」來的高。
延伸閱讀
如果你很喜歡這篇文章並且覺得內容有幫助，又剛有些多餘時間，歡迎看看其它文章，繼續探索（這坑？這地獄？這片樂土？）
同時，如果對於內容有疑問或是建議，也歡迎你留言告訴我們：）