事件(Event)設計
GA4 的一切都是「事件」。頁面瀏覽是事件、點擊按鈕是事件、加入購物車是事件、完成購買也是事件。
但問題來了:事件名稱要怎麼取?參數要帶什麼? 如果每個人命名方式不同,報表就會變成一團亂麻。
GA4 的事件分類
GA4 把事件分成三類:
| 類型 | 說明 | 範例 |
|---|---|---|
| 自動收集事件 | GA4 自動追蹤,不用寫程式 | page_view, first_visit, session_start |
| 推薦事件 | Google 定義好的名稱和參數,你要自己實作 | view_item, add_to_cart, purchase |
| 自訂事件 | 你自己定義的事件 | share_product, apply_coupon |
重點原則:能用推薦事件就用推薦事件。因為 GA4 的內建報表和電商功能都是針對推薦事件設計的。
事件命名規則
| 規則 | 正確 | 錯誤 |
|---|---|---|
| 全小寫 | add_to_cart | Add_To_Cart, AddToCart |
| 用底線分隔 | view_item | view-item, viewItem |
| 語意清楚 | begin_checkout | checkout1, step2 |
| 不超過 40 字元 | purchase | 太長的名稱 GA4 會截斷 |
電商必備的推薦事件
以下是一個使用者從「看商品」到「完成購買」的完整事件流程:
| 事件名稱 | 觸發時機 | 關鍵參數 |
|---|---|---|
view_item_list | 瀏覽商品列表頁 | item_list_name, items |
view_item | 點進商品詳情頁 | items(含 item_id, item_name, price) |
add_to_cart | 點擊「加入購物車」 | items, value, currency |
remove_from_cart | 從購物車移除商品 | items, value, currency |
begin_checkout | 進入結帳流程 | items, value, currency |
add_payment_info | 填寫付款資訊 | payment_type, value, currency |
add_shipping_info | 選擇運送方式 | shipping_tier, value, currency |
purchase | 完成購買 | transaction_id, value, currency, items |
用 dataLayer.push 實作事件
來看看實際怎麼寫。先從最常見的 view_item 開始:
再來是 add_to_cart:
items 陣列的參數說明
每個 items 裡的商品物件可以包含:
| 參數 | 必填 | 說明 | 範例 |
|---|---|---|---|
item_id | 是 | 商品編號 | "SKU-001" |
item_name | 是 | 商品名稱 | "經典白T恤" |
price | 是 | 單價 | 590 |
quantity | 是 | 數量 | 2 |
item_category | 建議 | 分類 | "上衣" |
item_category2 | 選填 | 子分類 | "短袖" |
item_brand | 選填 | 品牌 | "91APP" |
item_variant | 選填 | 款式 | "白色-M號" |
discount | 選填 | 折扣金額 | 100 |
coupon | 選填 | 優惠券代碼 | "SUMMER20" |
設計自訂事件
當推薦事件不夠用時,你可以設計自訂事件。遵守同樣的命名規則:
常見錯誤
| 錯誤 | 後果 | 正確做法 |
|---|---|---|
| 事件名稱大小寫不一致 | GA4 會視為不同事件 | 統一用全小寫 + 底線 |
忘記帶 currency | 電商報表的營收會是 0 | 永遠記得帶幣別 |
items 放成物件而非陣列 | GA4 無法解析 | 即使只有一個商品也要用 [{...}] |
| 自訂事件用了推薦事件的名稱 | 參數格式衝突 | 自訂事件用不同的名稱 |
本課重點
- GA4 的一切都是事件:自動收集、推薦事件、自訂事件
- 電商追蹤優先使用 Google 推薦事件(view_item, add_to_cart, purchase 等)
- 事件命名全小寫、底線分隔、語意清楚
items陣列是電商事件的核心資料結構- 記得帶
currency,否則營收報表不會正確
下一課我們來完整實作一筆 purchase 事件——讓 GA4 知道「誰買了什麼」。
AI 協作:學了這個,跟 AI 怎麼配合?
事件設計的「策略面」需要你來做——哪些行為值得追蹤、事件之間怎麼串連。AI 可以快速幫你生成所有 dataLayer.push 的程式碼。
你的人類優勢:
- 你了解使用者的轉換路徑,知道哪些環節需要被觀察
- 你能判斷「追蹤太多」和「追蹤太少」的平衡點
可以這樣跟 AI 說:
我是電商網站,使用 GA4,請列出從商品列表到完成購買的所有推薦事件,每個事件都給我 dataLayer.push 的範例程式碼,商品資訊用中文範例。
練習題
互動示範
挑戰任務
請初始化 dataLayer 並 push 一筆 view_item 事件,ecommerce 包含 currency 為 "TWD"、value 為 1200、items 陣列有一個商品 item_name 為 "運動鞋"。最後用 console.log 印出 items[0] 的 item_name。
請初始化 dataLayer 並 push 一筆 add_to_cart 事件,ecommerce 中的 items 陣列包含 item_name 為 "經典白T恤"、price 為 590、quantity 為 3。用 console.log 印出 price * quantity 的結果。