本教程介绍了如何在网站上设置 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: 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 报告会显示来自您网站的实时数据,以便您
确保正确设置事件要在网页上启用调试模式,请将
将以下 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 报告中。例如,用户点击您网站上的“购买”按钮时,系统会将以下数据填充到该报告中。您可以选择某个事件,以查看与该事件关联的参数、用户属性和商品。
第 4 步:查看电子商务数据
大约 24 小时后,您可通过报告、探索和 Google Analytics Data API,查看与 purchase
事件一同发送的数据。您还可以在设置 BigQuery Export 时,访问 BigQuery 中的数据。
“购买”会自动填充各种预构建的维度
和指标,在报告和探索中使用。通过
下面列举了部分维度填充了来自
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 中便会填充以下指标:
- “商品收入”指标的值为 $30.03
- 总收入指标的值为 30.03 美元
- “电子商务购买次数”指标的值为 1
您可以使用这些维度和指标来构建探索和自定义 报告,但您也可以使用以下预构建的电子商务购买 报告来查看电子商务数据: