本教學課程說明如何在網站上設定 purchase
事件,以便評估使用者購物的時機。本教學課程包含 Analytics (分析) 填入事件資料的維度、指標和報表。如要進一步瞭解電子商務事件,請參閱「評估電子商務」一文。
事前準備
本教學課程假設您已完成下列事項:
此外,您也需要具備下列權限:
- 網站原始碼存取權
- Google Analytics (分析) 帳戶的「編輯者」(或更高層級) 角色
步驟 1:在網站上新增事件
建議您將 purchase
事件放在使用者進行購買的網頁上。舉例來說,您可以將事件加入使用者完成購買時顯示的確認頁面中。本教學課程說明如何將事件加入使用者點擊「購買」按鈕的頁面。
將事件放在 <body>
標記結尾處的 <script>
標記中。只要將事件直接加入 <script>
標記,系統就會在載入網頁時觸發事件。下一節將說明在有人點擊「購買」時如何觸發事件。
<!--
Note: In the following code sample, make sure to
replace "TAG_ID" with your tag ID.
Learn more: https://support.google.com/tagmanager/answer/12326985
-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'TAG_ID');
</script>
</head>
<body>
<div>This is where the purchase form would go</div>
<button>Submit</button>
<script>
gtag("event", "purchase", {
transaction_id: "T_12345_1",
value: 30.03,
tax: 4.90,
shipping: 5.99,
currency: "USD",
coupon: "SUMMER_SALE",
items: [
// If someone purchases more than one item,
// you can add those items to the items array
{
item_id: "SKU_12345",
item_name: "Stan and Friends Tee",
affiliation: "Google Merchandise Store",
coupon: "SUMMER_FUN",
discount: 2.22,
index: 0,
item_brand: "Google",
item_category: "Apparel",
item_category2: "Adult",
item_category3: "Shirts",
item_category4: "Crew",
item_category5: "Short sleeve",
item_list_id: "related_products",
item_list_name: "Related Products",
item_variant: "green",
location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
price: 10.01,
quantity: 3
}]
});
</script>
</body>
</html>
步驟 2:將活動連結至按鈕
您可以設定 purchase
事件,在有人透過多種方式點選「購買」按鈕時觸發。其中一種方法是將 ID 加進「購買」按鈕,然後在事件監聽器中放入事件代碼。在以下範例中,只有在使用者按下 ID 為 purchase
的按鈕時,系統才會傳送事件。
<!--
Note: In the following code sample, make sure to
replace "TAG_ID" with your tag ID.
Learn more: https://support.google.com/tagmanager/answer/12326985
-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'TAG_ID');
</script>
</head>
<body>
<div>This is where the purchase form would go</div>
<button id="purchase">Purchase</button>
<script>
document.getElementById("purchase").addEventListener("click", function () {
gtag("event", "purchase", {
// This purchase event uses a different transaction ID
// from the previous purchase event so Analytics
// doesn't deduplicate the events.
// Learn more: https://support.google.com/analytics/answer/12313109
transaction_id: "T_12345_2",
value: 30.03,
tax: 4.90,
shipping: 5.99,
currency: "USD",
coupon: "SUMMER_SALE",
items: [
{
item_id: "SKU_12345",
item_name: "Stan and Friends Tee",
affiliation: "Google Merchandise Store",
coupon: "SUMMER_FUN",
discount: 2.22,
index: 0,
item_brand: "Google",
item_category: "Apparel",
item_category2: "Adult",
item_category3: "Shirts",
item_category4: "Crew",
item_category5: "Short sleeve",
item_list_id: "related_products",
item_list_name: "Related Products",
item_variant: "green",
location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
price: 10.01,
quantity: 3
}]
});
});
</script>
</body>
</html>
步驟 3:確認您正在收集資料
「DebugView」DebugView報表會顯示網站的即時資料,方便您確認事件設定正確無誤。如要在網頁上啟用偵錯模式,請將下列 debug_mode
參數新增至 config
指令:
<!--
Note: In the following code sample, make sure to
replace "TAG_ID" with your tag ID.
Learn more: https://support.google.com/tagmanager/answer/12326985
-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'TAG_ID',{ 'debug_mode': true });
</script>
</head>
<body>
<div>This is where the purchase form would go</div>
<button id="purchase">Purchase</button>
<script>
document.getElementById("purchase").addEventListener("click", function () {
gtag("event", "purchase", {
// This purchase event uses a different transaction ID
// from the previous purchase event so Analytics
// doesn't deduplicate the events.
// Learn more: https://support.google.com/analytics/answer/12313109
transaction_id: "T_12345_3",
value: 30.03,
tax: 4.90,
shipping: 5.99,
currency: "USD",
coupon: "SUMMER_SALE",
items: [
{
item_id: "SKU_12345",
item_name: "Stan and Friends Tee",
affiliation: "Google Merchandise Store",
coupon: "SUMMER_FUN",
discount: 2.22,
index: 0,
item_brand: "Google",
item_category: "Apparel",
item_category2: "Adult",
item_category3: "Shirts",
item_category4: "Crew",
item_category5: "Short sleeve",
item_list_id: "related_products",
item_list_name: "Related Products",
item_variant: "green",
location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
price: 10.01,
quantity: 3
}]
});
});
</script>
</body>
</html>
啟用偵錯模式後,隨著有人使用您的網站,系統就會開始在「DebugView」DebugView報表中填入事件。舉例來說,只要按一下網站上的「購買」按鈕,報表就會填入下列資料。您可以選取事件來查看與事件相關聯的參數、使用者屬性和項目。
步驟 4:查看電子商務資料
大約 24 小時後,您以 purchase
事件傳送的資料會顯示在報表、探索和 Google Analytics Data API 中。設定 BigQuery Export 時,您也可以在 BigQuery 中存取資料。
「purchase」事件會自動填入各種預先建立的維度和指標,用於報表、探索等。以下是在第一個步驟中,系統會填入 purchase
事件資料的部分維度:
參數 | 維度 | 值 |
---|---|---|
affiliation |
商品關聯 | Google 商品網路商店 |
currency |
幣別 | USD |
discount |
商品折扣金額 | 2.22 |
index |
商品清單位置 | 0 |
item_brand |
商品品牌 | |
item_category |
商品類別 | 服飾 |
item_id |
項目 ID | SKU_12345 |
item_list_id |
商品清單 ID | related_products |
item_list_name |
商品清單名稱 | 相關產品 |
item_name |
項目名稱 | Stan and Friends T 恤 |
item_variant |
商品子類 | 綠色 |
location_id |
項目位置 ID | ChIJIQBpAG2ahYAR_6128GcTUEo (舊金山的 Google 地點 ID) |
shipping |
運費 | 歐元 |
tax |
稅額 | 歐元 |
transaction_id |
交易 ID | T_12345 |
除了維度,Google Analytics (分析) 還會填入多項電子商務和收益相關指標。舉例來說,假設使用者一次點選「購買」按鈕,Google Analytics (分析) 會填入下列指標:
- 「商品收益」指標的值為 $30.03 美元
- 總收益指標的值為 $30.03 美元
- 「電子商務購買」指標的值為 1
您可以使用這些維度和指標建立探索和自訂報表,但也可以使用下列預先建立的「電子商務購買」報表查看電子商務資料: