跳到主要內容
Cypher's Practical Coding
正在準備工作環境...

事件(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_cartAdd_To_Cart, AddToCart
用底線分隔view_itemview-item, viewItem
語意清楚begin_checkoutcheckout1, 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 的範例程式碼,商品資訊用中文範例。

練習題

互動示範

DEMO 1可以修改程式碼試玩
DEMO 2可以修改程式碼試玩
DEMO 3可以修改程式碼試玩

挑戰任務

Task 1

請初始化 dataLayer 並 push 一筆 view_item 事件,ecommerce 包含 currency 為 "TWD"、value 為 1200、items 陣列有一個商品 item_name 為 "運動鞋"。最後用 console.log 印出 items[0] 的 item_name。

Task 2

請初始化 dataLayer 並 push 一筆 add_to_cart 事件,ecommerce 中的 items 陣列包含 item_name 為 "經典白T恤"、price 為 590、quantity 為 3。用 console.log 印出 price * quantity 的結果。

BackNext Lesson →