GA4 與 Google Tag Manager 設定全攻略:正確追蹤網店每一單轉化

Universal Analytics(UA)喺 2024 年 7 月 1 日已經正式停止收集數據,Google 嘅唯一分析方案就係 GA4。但根據 J Marketing 2026 年 4 月對 80 間香港中小企網店嘅 audit,30% 嘅網店仍然只係 paste 咗 GA4 base code,根本冇接 Enhanced Ecommerce、冇設定 Key Event、冇 GTM dataLayer——等於攞住一個百萬級嘅工具,只用咗 5%。

呢篇文用實戰角度一次過搞掂:GA4 同 UA 嘅根本差異、Google Tag Manager(GTM)雙容器架構、Enhanced Ecommerce 8 大事件 dataLayer 寫法、Key Event(原 Conversion)設定,連 DebugView 驗證流程齊全。睇完之後,你個網店每一單下單、每一個 add_to_cart、每一次 begin_checkout 都會準確入到 GA4。

一、GA4 同 Universal Analytics 嘅根本差異

項目

Universal Analytics(舊)

GA4(新)

數據模型

Session-based

Event-based

事件結構

Category / Action / Label

Event Name + Parameters

跨設備追蹤

Client ID

User ID + Google Signals + Device ID

BigQuery

付費 GA360 先有

免費版本就有

Bounce Rate

核心指標

換成 Engagement Rate

轉化

Goal

Key Event(2024 年改名)

數據保留

26 個月最長

14 個月(免費)/ 38 個月(360)

Cookieless future

唔支援

Modeled Conversion + Consent Mode v2

最大改變係——GA4 將所有用戶行為都當成「事件」(Event)。連最基本嘅 page_view 都係事件。呢個架構靈活但學習曲線陡峭,初學者最易迷失喺成堆 event parameter 入面。

二、為何一定要用 GTM?直接寫 gtag 唔得咩?

可以直接寫 gtag.js,但代價係:每次改一條 event 都要搵 developer 改 code、上傳、deploy。GTM(Google Tag Manager)係一個無 code 嘅 tag 管理層,你喺 GTM 後台改變 trigger / variable / tag,published 之後即時生效,完全唔使動 production code。

2.1 GTM 嘅五大優勢

  • 中央管理:所有 tracking pixel(GA4、Meta、Google Ads、TikTok)集中一個 container
  • 版本控制:每次 publish 自動 snapshot,有問題一鍵 rollback
  • Trigger 條件靈活:URL contains、scroll depth 75%、click on selector
  • Variable 即時抓資料:dataLayer、Cookie、Custom JS、URL 參數
  • Server-side GTM:2026 主流,server 跑 tag 增加 Match Quality 同私隱合規

三、雙容器架構:Web Container + Server Container

2026 年正規做法係雙容器並行:

3.1 Web Container(必裝)

負責 client-side tracking,放喺 同 。所有 GA4、Meta Pixel、Google Ads tag 都喺度配置。

3.2 Server Container(進階,但建議跟手裝)

行喺自家 Google Cloud Run、Stape Hosting 或 self-host。所有 client event 經過 server 再分流去 GA4 / Meta CAPI / TikTok / Pinterest。優點:

  • Match Quality 高(可加 hashed user data)
  • 繞過 Ad Blocker 同 ITP
  • 降低 client-side JavaScript,改善 INP
  • 私隱合規:可以喺 server 過濾 PII 先送出

詳情可以睇 Meta Pixel 與 Conversions API 雙重追蹤教學(同樣概念,用喺 Meta 一邊)。

四、初次設定:GTM + GA4 一條龍流程

4.1 開戶 + 容器

  • 1. 入 tagmanager.google.com 用公司 Google Workspace 開戶
  • 2. 建立新 Container,Target Platform 揀 Web,記低 GTM-XXXXXXX
  • 3. 入 analytics.google.com 開 GA4 Property,記低 Measurement ID(G-XXXXXXX)
  • 4. 將 GTM container code paste 入 (2 段),WordPress 用 GTM4WP plugin 自動注入

4.2 GA4 Configuration Tag

  • GTM → Tags → New → Google Tag(2024 年起取代舊 GA4 Configuration Tag)
  • Tag ID 填 G-XXXXXXX
  • Trigger:All Pages
  • Submit + Publish

4.3 啟用 Enhanced Measurement(自動事件)

GA4 後台 → Data Streams → Web → Enhanced Measurement,預設會自動追蹤:Page View、Scroll、Outbound Click、Site Search、Video Engagement、File Download。但呢啲都係瀏覽行為,真正電商事件仲要靠 dataLayer。

五、Enhanced Ecommerce 8 大事件 + dataLayer 寫法

呢個係成個 GA4 設定嘅核心。GA4 Enhanced Ecommerce 標準有 8 個必裝事件:

事件名

觸發位置

電商意義

view_item_list

分類頁、搜尋結果

產品 impression

select_item

用戶 click 進入產品頁

興趣信號

view_item

產品詳情頁載入

深度興趣

add_to_cart

加入購物車

強烈購買意向

view_cart

查看購物車

結帳前奏

begin_checkout

進入結帳頁

關鍵轉化前漏斗

add_payment_info

填咗付款方式

結帳第二步

purchase

付款成功確認頁

最終轉化

5.1 add_to_cart dataLayer 範例(2026 標準)

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({ ecommerce: null }); // 清舊 data
window.dataLayer.push({
event: “add_to_cart”,
ecommerce: {
currency: “HKD”,
value: 498.00,
items: [{
item_id: “SKU-J123”,
item_name: “J Marketing 護膚精華”,
item_brand: “JMarketing”,
item_category: “Skincare”,
item_variant: “30ml”,
price: 498.00,
quantity: 1
}]
}
});

5.2 purchase dataLayer 範例

window.dataLayer.push({ ecommerce: null });
window.dataLayer.push({
event: “purchase”,
ecommerce: {
transaction_id: “ORDER20260518001”,
value: 1494.00,
tax: 0,
shipping: 50,
currency: “HKD”,
coupon: “SUMMER10”,
items: [{
item_id: “SKU-J123”,
item_name: “J Marketing 護膚精華”,
price: 498.00,
quantity: 3
}]
}
});

注意:每次 push ecommerce 之前要先 push { ecommerce: null },否則 GA4 會將前一次嘅 items 帶過嚟,造成 double count。

六、GTM 度配置 GA4 Event Tag(對應 dataLayer)

用 GTM 嘅 GA4 Event tag 攞到 dataLayer 嘅事件:

  • Trigger Type:Custom Event,Event Name:add_to_cart
  • Tag Type:GA4 Event
  • Configuration Tag:剛才設定嘅 Google Tag
  • Event Name:add_to_cart
  • Event Parameters:items = {{Data Layer Variable – ecommerce.items}}
  • More Settings → Ecommerce → Send Ecommerce Data:Yes,Source:Data Layer

每個 ecommerce 事件都要重複呢個流程一次。或者用 Recipe Import(2026 年 GTM 已支援 ecommerce template),一次過 import 8 個 tag + trigger。

七、Key Event(轉化)設定:由「事件」變「KPI」

2024 年起,GA4 將「Conversion」正式更名為「Key Event」。功能不變,但 UI 改晒。設定步驟:

  • GA4 Admin → Events → 搵到 purchase / generate_lead / sign_up 等事件
  • 右邊 toggle「Mark as Key Event」
  • 去 Admin → Key Events → Set up rule(可加額外條件,例如只計 value > HK$200 嘅 purchase)
  • Google Ads import:Admin → Google Ads Links → Sync Key Events,廣告系統就會用呢個做出價優化

7.1 香港網店典型 5 個 Key Event

  • purchase(必設)
  • begin_checkout(漏斗中段)
  • generate_lead(form submit)
  • subscribe_newsletter(會員 nurturing)
  • contact_whatsapp(click WhatsApp Business 按鈕)

八、驗證流程:DebugView + GTM Preview

8.1 GTM Preview Mode

GTM 右上角撳 Preview,會開新 window 載入你嘅網站,左邊顯示每個 trigger 觸發、每個 tag 開咗冇、dataLayer 內容係咩。落單做 dummy purchase,逐 step 對照預期。

8.2 GA4 DebugView

Admin → DebugView。配合 Chrome extension「Google Analytics Debugger」啟用後,你嘅 session 會 stream 入 DebugView,睇到每個 event + parameter 即時 firing。Production 上線前必過呢關。

8.3 Tag Assistant

tagassistant.google.com → Add Domain,模擬完整用戶 journey。佢會列出全部 tag firing,睇下有冇 duplicate、冇 firing,或者 trigger 條件錯誤。

九、香港網店最常踩嘅 8 個 GA4 / GTM 錯誤

  • 1. dataLayer push 之前冇 push ecommerce: null,造成 items 累積
  • 2. value 用字串「HK$498」而唔係數字 498
  • 3. currency 寫「HK$」而唔係 ISO 4217「HKD」
  • 4. Mark as Key Event 之前未喺 GA4 見到該 event,冇得 toggle
  • 5. Google Ads 同步咗舊 UA Goal,冇 sync GA4 Key Event,廣告系統優化目標錯誤
  • 6. Cookie Consent banner 拒絕之後,冇用 Consent Mode v2 修補,GA4 完全收唔到數據
  • 7. WooCommerce / Shopify 用 plugin 同時又手動 push dataLayer,double count
  • 8. 未啟用 Cross-domain tracking,WhatsApp 落地頁同主站當成兩個 session

十、各平台 Enhanced Ecommerce 對應做法

10.1 WooCommerce

最簡單:裝 GTM4WP + 啟用 WooCommerce Integration,自動 push 8 個 ecommerce event 入 dataLayer。GTM 入面用 Recipe Import GA4 Ecommerce 模版,15 分鐘搞掂。

10.2 Shopify

Shopify 嘅 checkout.liquid 由 2024 年 8 月起 deprecation,新 store 一律用 Pixel-based event API:Customer Events → Add → Custom Pixel,寫 JavaScript subscribe checkout_started、checkout_completed 等 event,push 入 dataLayer。或者裝 Analyzify、GA4 Enhanced Ecommerce by Elevar 等 App。

10.3 SHOPLINE

SHOPLINE 後台 → 整合 → GA4 / GTM,直接填 ID,佢會自動 push view_item / add_to_cart / purchase。但 begin_checkout 同 add_payment_info 要自訂 GTM trigger 補。

10.4 自家 PHP CMS

最自由但最費工:後端模板對應每個關鍵頁面,echo 出對應 dataLayer push script。記得 purchase 嘅 transaction_id 用 unique order ID,千祈唔好用 timestamp(同一秒可能有多單)。

十一、GA4 同其他環節嘅串連

GA4 同 Meta CAPI 雙重追蹤令數據準確度最大化,延伸閱讀:Meta Pixel 與 Conversions API 雙重追蹤教學

正確嘅 Key Event 直接餵料俾 Google Ads,可以參考 Google 廣告預算設定與出價優化指南

GA4 嘅 funnel 報告會直接話你知 begin_checkout 同 purchase 之間嘅流失,要修就睇 電商網站轉化率優化(CRO)10 大實戰技巧

頻繁 firing tag 影響 INP,可以參考 Core Web Vitals 與網站速度優化

唔同平台嘅 ecommerce 整合差異大,睇 WooCommerce vs Shopify vs SHOPLINE 平台比較

十二、結語:GA4 唔只係報表,係決策引擎

Universal Analytics 嘅報表係「俾人睇」,GA4 係「俾系統用」——每一個準確嘅 purchase event,直接餵料俾 Google Ads Smart Bidding、Meta Advantage+、TikTok Smart Performance 同你嘅 AI Model 做優化。30% 香港網店仲未行到 dataLayer 呢一步,即係話你嘅競爭對手如果走前一步,佢嘅廣告 CPA 隨時平你 30%。

J Marketing 提供完整 GA4 + GTM 設定 + Google 廣告服務,由 dataLayer 設計、Key Event 對應、Server-side GTM 部署一條龍。

亦可以結合 網上商店建置服務 從建站起就有完整追蹤架構。

聯絡我們 預約免費 GA4 健康檢查。