設定電子商務事件

如果要透過 GA4 收集電子商務資料 ( 例如選取商品、加入購物車、付款...等 )，必須要自行添加「電子商務事件」，透過電子商務事件，就能更清楚的掌握使用者與商品的互動情形以及最熱門的商品，進而評估廣告或行銷活動的轉換成效，這篇教學會介紹如何在網站中添加電子商務事件，以及電子商務事件的相關設定。

快速導覽：

• 電子商務事件參數範圍
• 電子商務事件參數與項目列表
• 傳送電子商務事件 ( gtag.js )
• 傳送電子商務事件 ( GTM )

電子商務事件參數範圍

電子商務事件屬於「建議事件」，在設定時的事件名稱需要使用「線上銷售」的建議事件名稱 ( 參考 電子商務事件參數與項目列表 )，建立電子商務事件後，參數分成下列兩種範圍：

• 事件範圍 ( Event Scope )

  電子商務事件的相關資訊，參數使用建議事件中線上銷售類型的相關參數，例如 purchase 事件會使用 currency、transaction_id、value、affiliation、coupon、shipping、tax、items 參數。

• 項目範圍 ( Item Scope )

  產品和服務的相關資訊，根據不同的產品或服務類型，從項目清單中挑選合適的參數，例如 item_name、item_category...等，使用時必須包含 item_id 或 item_name 其中一個，項目範圍會以陣列的方式放在 items 參數裡，最多可包含 27 個元素。

以下圖使用 gtag.js 傳送電子商務事件的程式碼為例，當使用者點擊結帳按鈕，會發送 purchase 事件，事件中會包事件範圍和項目範圍的相關資訊。

電子商務事件參數與項目列表

下方列出電子商務線上購買類別的事件，除了可以查看事件參數，點擊參數裡的「items」就可以查看該事件支援的項目。

傳送電子商務事件 ( gtag.js )

使用 gtag.js API 裡的 gtag() 函式可以很快速的傳送電子商務事件，下方程式碼以 purchase 事件為例，事件範圍只需要編輯第一層參數，項目範圍則編輯 items 的參數內容，事件參數通常是最後結帳的總金額、稅率、幣值之類的資訊，items 項目參數則是以陣列的形式，紀錄購買的細項：

需要注意 transaction_id 表示交易 ID，每次交易應該都要有所不同，避免事件重複計算影響分析結果。

gtag("event", "purchase", {
    transaction_id: "oxxo",
    value: 100,
    tax: 5.0,
    shipping: 2,
    currency: "TWD",
    coupon: "oxxo_sale",
    items: [
    // 需要傳送的商品或服務項目
     {
      item_id: "oxxo12345",
      item_name: "OXXO 公仔",
      affiliation: "OXXO Store",
      coupon: "oxxo_sale",
      discount: 2,
      index: 0,
      item_brand: "OXXO",
      item_category: "toy",
      item_category2: "cute",
      item_category3: "kids",
      item_category4: "robot",
      item_category5: "big",
      item_list_id: "oxxo_products",
      item_list_name: "OXXO Products",
      item_variant: "XOOX",
      location_id: "Taiwan1234567",
      price: 9.99,
      quantity: 1
    }]
});

傳送電子商務事件 ( GTM )

如果要使用 GTM 傳送電子商務事件，相較 gtag.js 而言會稍微麻煩，首先必須先在網頁的 HTML 裡 datalayer 資料層加入電子商務的資訊 ( 通常需要請網頁工程師幫忙，在結帳時替購買的商品自動加入這些資訊 )，程式碼寫法如下 ( 以 purchase 事件為例 )，事件範圍只需要編輯第一層參數，項目範圍則編輯 items 的參數內容。

• GTM 教學請先參考左側選單裡 GTM 相關文章，或由「開始使用 GTM」這篇文章開始。
• 注意 transaction_id 表示交易 ID，每次交易應該都要有所不同，避免事件重複計算影響分析結果。

dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "purchase",
  ecommerce: {
    transaction_id: "oxxo",
    value: 100,
    tax: 5.0,
    shipping: 2,
    currency: "TWD",
    coupon: "oxxo_sale",
    items: [
    // 需要傳送的商品或服務項目
     {
      item_id: "oxxo12345",
      item_name: "OXXO 公仔",
      affiliation: "OXXO Store",
      coupon: "oxxo_sale",
      discount: 2,
      index: 0,
      item_brand: "OXXO",
      item_category: "toy",
      item_category2: "cute",
      item_category3: "kids",
      item_category4: "robot",
      item_category5: "big",
      item_list_id: "oxxo_products",
      item_list_name: "OXXO Products",
      item_variant: "XOOX",
      location_id: "Taiwan1234567",
      price: 9.99,
      quantity: 1
    }]
  }
});

回到 GTM，點擊左側選單「變數」新增「資料層變數」，輸入 GTM 變數名稱以及資料層變數名稱 ( 版本按照官方說法使用版本 2 不用更動 )，下圖的範例對照上方 value 的位置 ( ecommerce.value )，建立一個資料層變數負責接收 value 的值。

根據 datalayer 資料層參數內容，建立對應的資料層變數，下圖的範例建立了六個資料層變數。

點擊左側選單「觸發條件」新增「自訂事件」，設定偵測接收到 purchase 事件時會觸發。

點擊左側選單「代碼」新增「GA4 事件」代碼，設定參數名稱以及對應的變數值 ( 變數表示會接收動態的資料 )，勾選傳送電子商務資料 ( 官方沒有說明這個選項的用處，但因為是傳送電子商務事件，就先勾選 )。

最下方新增觸發條件，設定為剛剛的自訂事件觸發條件。

設定完成後提交發布，完成後可以點擊「預覽」查看觸發狀況。

輸入要預覽的網址後，進行會觸發 purchase 事件的動作，完成後關閉預覽，就會看見出現 purchase 事件已經被觸發 ( Fired )。

點擊該事件名稱，就能查看相關細節資訊。

切換成 value，就能查看傳送參數的詳細內容。

回到 GA4 的即時報表，也能觀察到出現 purchase 的事件。

小結

因為傳送電子商務事件必須搭配許多的參數，參數包含電子商務的事類型以及各個商品資訊，所以仍得由網頁工程師在購物頁面加入對應的資訊，因此使用 gtag.js 的方式相對 GTM 來說會比較簡單，不過也因為電子商務事件可以記錄許多商品資訊，更能由數據觀察線上購物購物的狀況。

參考

• https://support.google.com/analytics/answer/12200568
• https://developers.google.com/analytics/devguides/collection/ga4/ecommerce

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～