本教程介绍了如何在网站上设置 purchase 事件，以便衡量用户何时进行了购买。本教程涵盖 Google 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: 25.42,
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: 9.99,
quantity: 1
}]
});
</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: 25.42,
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: 9.99,
quantity: 1
}]
});
});
</script>
</body>
</html>
第 3 步：验证是否可以收集数据
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: 25.42,
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: 9.99,
quantity: 1
}]
});
});
</script>
</body>
</html>
启用调试模式后，当用户使用您的网站时，您将开始看到事件数据填充到 DebugView 报告中。例如，用户点击您网站上的“购买”按钮时，系统会将以下数据填充到该报告中。您可以选择某个事件，以查看与该事件关联的参数、用户属性和商品。
第 4 步：查看电子商务数据
大约 24 小时后，您可通过报告、探索和 Google Analytics（分析）Data API，查看与 purchase 事件一同发送的数据。您还可以在设置 BigQuery Export 时，访问 BigQuery 中的数据。
“purchase”事件会自动填充各种预构建的维度和指标，这些维度和指标会用于报告、探索等。下面列举了使用第一步中 purchase 事件的数据所填充的部分维度：
| 参数 | 维度 | 值 |
|---|---|---|
affiliation |
商品关联商户 | Google Merchandise Store |
currency |
币种 | USD |
discount |
商品折扣金额 | 2.22 |
index |
商品列表位置 | 0 |
item_brand |
商品品牌 | |
item_category |
商品类别 | Apparel |
item_id |
商品 ID | SKU_12345 |
item_list_id |
商品列表 ID | related_products |
item_list_name |
商品列表名称 | Related Products |
item_name |
商品名称 | Stan and Friends Tee |
item_variant |
商品款式 | green |
location_id |
商品位置 ID | ChIJIQBpAG2ahYAR_6128GcTUEo（旧金山对应的 Google 地点 ID） |
shipping |
运费 | 5.99 |
tax |
税额 | 4.90 |
transaction_id |
交易 ID | T_12345 |
除了维度之外，Google Analytics（分析）还会填充多种与电子商务和收入相关的指标。例如，如果用户点击“购买”按钮一次，Google Analytics（分析）中便会填充以下指标：
- “商品收入”指标的值为 $9.99
- “总收入”指标的值为 $25.42
- “电子商务购买次数”指标的值为 1
您可以使用这些维度和指标来构建探索和自定义报告，但也可以使用以下预构建的“电子商务购买”报告来查看电子商务数据：
