Google 上的建議事件清單
[GA4] 建議事件
在 Google 官方文件中，有提到一些產業的建議事件，電子商務(線上銷售)的事件列表並沒有提供很詳細的解釋，以及 Datalayer 該如何準備。
希望在本文中可以更清楚地提供說明
文章中不會按照官方文件的順序，而是盡量以真實場景的順序來呈現
瀏覽 -> 加入購物車 -> 結帳過程 -> 購買完成
這邊為電子商務事件中最基本也最重要的事件流程 !
共用參數以及參數解釋 :
| Name |
Type |
Required |
Example value |
解釋 |
| currency |
string |
Yes* |
USD |
幣別 : 新台幣為 TWD，國際幣別可參考 ISO_4217 |
| value |
number |
Yes* |
7.77 |
商品價格，請用純數字，不可加 $ 或是 NTD |
| items |
Array<Item> |
Yes |
The items for the event. |
商品詳細資訊，請參考 Items |
view_item - 商品瀏覽
觸發時機點
請於瀏覽商品頁面時觸發，商品頁面如
![product_detail_page]()
Source:Google 商店
DataLayer
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: "view_item",
ecommerce: {
currency: "{幣別}",
value: { 價格 },
items: [
{
item_id: "{商品ID}",
item_name: "{商品名稱}",
affiliation: "{商品聯盟(如沒有，可以直接填自家店商網站名稱)}",
currency: "{幣別}",
item_brand: "{商品品牌}",
item_category: "{商品分類第一層}",
item_category2: "{商品分類第二層}",
item_category3: "{商品分類第三層}",
item_category4: "{商品分類第四層}",
item_category5: "{商品分類第五層}",
item_variant: "{商品詳細資料，如尺寸或顏色}",
price: { 價格 },
quantity: { 數量 },
},
],
},
});
|
add_to_cart - 加入購物車
觸發時機點
請在商品加入購物車完成時觸發
通常頁面上會有一兩個以上的加入購物車按鈕
分別於商品詳細頁 或是 商品列表頁中
且請工程師注意是否有 ajax 等 request 判斷是否加入購物車完成
不要在按鈕點擊的一開始就觸發
![add_to_cart_demo]()
來源 : Shopify 範例商家 phoneloops
DataLayer
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: "add_to_cart",
ecommerce: {
currency: "{幣別}",
value: { 價格 },
items: [
{
item_id: "{商品ID}",
item_name: "{商品名稱}",
affiliation: "{商品聯盟(如沒有，可以直接填自家店商網站名稱)}",
currency: "{幣別}",
discount: { 折扣金額 },
item_brand: "{商品品牌}",
item_category: "{商品分類第一層}",
item_category2: "{商品分類第二層}",
item_category3: "{商品分類第三層}",
item_category4: "{商品分類第四層}",
item_category5: "{商品分類第五層}",
item_variant: "{商品詳細資料，如尺寸或顏色}",
price: { 價格 },
quantity: { 數量 },
},
],
},
});
|
剩下事件建置中
begin_checkout - 開始結帳
觸發時機點
通常為進入到結帳頁面時觸發
以 Shopify 的頁面來說
有 basket 頁面和 checkout 頁面
通常會以 checkout 頁面為主，不過這地方有點見仁見智
理論上把 basket 頁面當作 begin_checkout 也沒問題
或是做一個 custom_event 叫 basket_page 等等讓你方便辨識是在 basket 頁面
注意 DataLayer 中的 Items 為購物車中的所有商品，贈品等 0 元商品可視需求加入或移除
![begin_checkout_demo]()
來源 : Shopify 範例商家 nonadrinks
DataLayer
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: "begin_checkout",
ecommerce: {
currency: "{幣別}",
value: { 價格 },
items: [
{
item_id: "{商品ID}",
item_name: "{商品名稱}",
affiliation: "{商品聯盟(如沒有，可以直接填自家店商網站名稱)}",
currency: "{幣別}",
discount: { 折扣金額 },
item_brand: "{商品品牌}",
item_category: "{商品分類第一層}",
item_category2: "{商品分類第二層}",
item_category3: "{商品分類第三層}",
item_category4: "{商品分類第四層}",
item_category5: "{商品分類第五層}",
item_variant: "{商品詳細資料，如尺寸或顏色}",
price: { 價格 },
quantity: { 數量 },
},
],
},
});
|
purchase - 購買完成
觸發時機點
絕大多數情況下，會在訂單完成時的訂單感謝頁面觸發
但無論有沒有訂單完成業，其實影響不大
希望就是在訂單確認成立的那一時刻，API 回拋訂單資訊時觸發
因為 Purchase 事件需要
訂單編號
訂單金額
訂單商品項目
注意 DataLayer 中的 Items 為購物車中的所有商品，贈品等 0 元商品可視需求加入或移除
![demo_thanksyou_page]()
DataLayer
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: "purchase",
ecommerce: {
transaction_id: "{訂單編號}",
affiliation: "{聯盟}",
value: { 訂單總金額 },
tax: { 稅額 },
shipping: { 運費 },
currency: "{幣別}",
coupon: "{折扣碼}",
items: [
{
item_id: "{商品ID}",
item_name: "{商品名稱}",
affiliation: "{商品聯盟(如沒有，可以直接填自家店商網站名稱)}",
currency: "{幣別}",
discount: { 折扣金額 },
item_brand: "{商品品牌}",
item_category: "{商品分類第一層}",
item_category2: "{商品分類第二層}",
item_category3: "{商品分類第三層}",
item_category4: "{商品分類第四層}",
item_category5: "{商品分類第五層}",
item_variant: "{商品詳細資料，如尺寸或顏色}",
price: { 價格 },
quantity: { 數量 },
}
],
},
});
|
剩下事件建置中
