電商電子商務追蹤 (Ecommerce Tracking)

對於電子商務網站來說，能夠追蹤使用者從「瀏覽商品」到「完成結帳」的完整漏斗（Funnel）是至關重要的。GA4 定義了一套標準的電子商務事件與資料結構，只要依照這套標準發送數據，就能在 GA4 的「營利 (Monetization)」報表中看到精美的分析結果。

核心資料結構：Items Array

在所有電商事件中，最關鍵的就是 items 這個參數。它是一個陣列，用來描述「這次動作包含了哪些商品」。

一個標準的 item 物件長這樣：

var productItem = {
  item_id: 'SKU_12345', // 商品 ID (必填，與後台庫存 ID 一致)
  item_name: 'Stan Smith Shoes', // 商品名稱 (必填)
  affiliation: 'Google Merchandise Store', // 店家或分店名稱
  coupon: 'SUMMER_FUN', // 優惠券代碼
  discount: 200, // 折扣金額
  index: 0, // 在列表中的位置 (1, 2, 3...)
  item_brand: 'Google', // 品牌
  item_category: 'Apparel', // 分類
  item_category2: 'Mens', // 子分類
  item_list_id: 'related_products', // 所在的列表 ID
  item_list_name: 'Related Products', // 所在的列表名稱
  item_variant: 'green', // 規格/顏色
  location_id: 'ChIJIQBpAG2ahYAR_6128GcTUEo', // 實體店面 ID
  price: 990, // 單價 (數字)
  quantity: 1, // 數量
};

你不必填寫所有欄位，但 item_id、item_name、price、quantity 是最基本的。

關鍵事件實作流程

我們會依照使用者的購物流程，依序介紹 11 個最核心的事件。

1. 搜尋商品 (search)

當使用者在網站上進行搜尋，並顯示搜尋結果頁面時觸發。這能幫助你了解使用者的搜尋意圖。

gtag('event', 'search', {
  search_term: '慢跑鞋', // 搜尋關鍵字
});

2. 查看商品列表 (view_item_list)

當使用者瀏覽商品列表頁（如「男裝首頁」或「熱門商品」）時觸發。

gtag('event', 'view_item_list', {
  item_list_id: 'related_products',
  item_list_name: 'Related Products',
  items: [
    {
      item_id: 'SKU_12345',
      item_name: 'Stan Smith Shoes',
      price: 990,
      index: 1,
    },
    {
      item_id: 'SKU_67890',
      item_name: 'Running Shorts',
      price: 790,
      index: 2,
    },
  ],
});

3. 點擊商品 (select_item)

當使用者從列表中點擊某一項商品時觸發。

gtag('event', 'select_item', {
  item_list_id: 'related_products',
  item_list_name: 'Related Products',
  items: [
    {
      item_id: 'SKU_12345',
      item_name: 'Stan Smith Shoes',
      price: 990,
      index: 1,
    },
  ],
});

4. 查看商品 (view_item)

當使用者點進商品詳情頁 (Product Detail Page) 時觸發。

gtag('event', 'view_item', {
  currency: 'TWD',
  value: 990,
  items: [
    {
      item_id: 'SKU_12345',
      item_name: 'Stan Smith Shoes',
      item_category: 'Apparel',
      price: 990,
      quantity: 1,
    },
  ],
});

5. 加入購物車 (add_to_cart)

當使用者點擊「加入購物車」按鈕時觸發。這通常綁定在按鈕的 click 事件。

gtag('event', 'add_to_cart', {
  currency: 'TWD',
  value: 1980, // 如果加入兩雙，總價值是 1980
  items: [
    {
      item_id: 'SKU_12345',
      item_name: 'Stan Smith Shoes',
      price: 990,
      quantity: 2, // 加入了 2 雙
    },
  ],
});

6. 查看購物車 (view_cart)

當使用者進入購物車頁面時觸發。

gtag('event', 'view_cart', {
  currency: 'TWD',
  value: 1980,
  items: [
    {
      item_id: 'SKU_12345',
      item_name: 'Stan Smith Shoes',
      price: 990,
      quantity: 2,
    },
  ],
});

7. 開始結帳 (begin_checkout)

當使用者進入結帳流程的第一步（例如點擊「去買單」）時觸發。

gtag('event', 'begin_checkout', {
  currency: 'TWD',
  value: 1980,
  coupon: 'SUMMER_FUN', // 訂單層級的優惠券
  items: [
    // ... 購物車內的所有商品物件
  ],
});

8. 新增運送資訊 (add_shipping_info)

當使用者在結帳流程中選擇了運送方式時觸發。

gtag('event', 'add_shipping_info', {
  currency: 'TWD',
  value: 1980,
  shipping_tier: 'Express Delivery', // 運送方式名稱
  items: [
    // ... 購物車內的所有商品物件
  ],
});

9. 新增付款資訊 (add_payment_info)

當使用者在結帳流程中選擇了付款方式時觸發。

gtag('event', 'add_payment_info', {
  currency: 'TWD',
  value: 1980,
  payment_type: 'Credit Card', // 付款方式
  items: [
    // ... 購物車內的所有商品物件
  ],
});

10. 完成購買 (purchase) —— 最重要！

這是最重要的事件。通常在「感謝購買頁面 (Thank You Page)」載入時觸發。

請注意 transaction_id 是必填且必須唯一的，這樣 GA4 才能避免計算到重複的訂單。

gtag('event', 'purchase', {
  transaction_id: 'T_12345', // 訂單編號 (必填)
  value: 2040, // 訂單總金額 (含稅、運費)
  tax: 0, // 稅額
  shipping: 60, // 運費
  currency: 'TWD',
  coupon: 'SUMMER_FUN',
  items: [
    {
      item_id: 'SKU_12345',
      item_name: 'Stan Smith Shoes',
      price: 990,
      quantity: 2,
    },
  ],
});

11. 退款 (refund)

當需要進行全額或部分退款時觸發。transaction_id 是必須的，用來對應原始訂單。

gtag('event', 'refund', {
  transaction_id: 'T_12345', // 對應原始訂單編號
  value: 990, // 退款金額
  currency: 'TWD',
  items: [
    {
      item_id: 'SKU_12345',
      quantity: 1, // 退貨數量
    },
  ],
});

Value 的計算方式：purchase 事件外層的 value 應該是這筆交易的總營收 (Total Revenue)。通常公式是：(商品單價 * 數量) 的總和 + 稅 + 運費 - 折扣。請確保這個數字與你的後台營收一致。

進階：整合 Google Ads 與加強型轉換

為了讓廣告成效最佳化，我們通常會將「購買」事件同時傳送給 Google Ads，並啟用「加強型轉換 (Enhanced Conversions)」以提升追蹤準確度。

同時發送給 GA4 與 Google Ads

你可以透過 send_to 參數，一次將事件發送到多個目的地（包含 GA4 的評估 ID 與 Google Ads 的轉換 Label）。

設定使用者資料 (User Data)

對於加強型轉換，你需要提供經 SHA256 雜湊處理的使用者 Email 或電話號碼。這能協助 Google 在 Cookie 被封鎖的情況下，仍能將轉換歸因到正確的 Google 帳戶。

// 假設你有一個 helper function 能做 SHA256 hash
// const emailHash = sha256("user@example.com");

gtag('event', 'purchase', {
  transaction_id: 'T_12345',
  value: 2040,
  currency: 'TWD',
  tax: 0,
  shipping: 60,
  items: [
    // ... 商品列表
    {
      item_id: 'SKU_12345',
      item_name: 'Stan Smith Shoes',
      price: 990,
      quantity: 2,
    },
  ],
  // 指定發送目標
  send_to: [
    'G-XXXXXXXXXX', // GA4 ID
    'AW-YYYYYYYY/AbCdEfGhIjKlMn', // Google Ads 轉換 ID / Label
  ],
  // 加強型轉換資料
  user_data: {
    sha256_email_address: 'EC4F2DBB60223A94EDF5...', // 必須是 hex encoded string
    sha256_phone_number: '...',
  },
});

個資安全提醒：絕對不要傳送未經雜湊 (Hashing) 的明文 Email 或電話號碼給 Google。請務必在前端或後端先進行 SHA256 處理。

常見誤區：不需要額外發送 conversion 事件

很多開發者會習慣在 Google Ads 的轉換追蹤中使用 gtag('event', 'conversion', ...)。但在電商的情境下，這是不需要且不建議的。

如果你要同時兼容 GA 和 Google Ads 追蹤，你只需要發送標準的 purchase 事件，並透過 send_to 指定 Google Ads 的轉換 ID 與標籤（如上例），Google Ads 就能自動辨識這是一筆轉換。

為什麼應該使用 purchase？

資料完整性：purchase 事件包含了 value, currency, items 等資訊，這對於 Google Ads 的「目標廣告投資報酬率 (ROAS)」出價策略至關重要。
避免重複：不需要寫兩段程式碼（一段給 GA4，一段給 Ads），減少維護成本與出錯機率。
動態再行銷：標準的 purchase 事件能直接支援動態再行銷 (Dynamic Remarketing)，自動移除已購買的商品。

為什麼報表沒有資料？

實作後，GA4 的電商報表通常需要 24-48 小時 才會處理並顯示數據。如果急著驗證，請使用 DebugView（請參考偵錯與測試章節）。

如果是購買事件沒收到，請檢查：

是否遺漏了 transaction_id？
items 是否為正確的陣列格式？
value 是否為數值型別 (Number)，而非字串？

掌握這些核心事件，你就已經能捕捉 90% 的電商關鍵數據了！