zaraz.ecommerce · Cloudflare Zaraz docs

你可以在页面 <body> 标签内的任意位置使用 zaraz.ecommerce()。

zaraz.ecommerce() 可用于跟踪电商用户旅程中的常见事件，例如用户将商品加入购物车、开始结账流程或在网站上完成订单。它是一个 async 函数，因此如果你希望在继续运行其他代码之前确保其已完成，可以选择 await 它。

要开始使用 zaraz.ecommerce()，你首先需要在 Zaraz 账户中启用该功能，并为计划接收电商数据的工具启用电商操作。然后，将 zaraz.ecommerce() 添加到网站的 <body> 元素中。

目前，Zaraz 电商兼容 Google Analytics 3 (Universal Analytics)、Google Analytics 4、Bing、Facebook Pixel、Amplitude、Pinterest Conversions API、TikTok 和 Branch。

启用电商跟踪

你无需将电商事件映射到触发器。Zaraz 会自动以正确的格式将数据转发到支持电商的工具。

在 Cloudflare 仪表板中，前往 **Settings（设置）**页面。
Go to Settings ↗
启用 E-commerce tracking（电商跟踪）。
选择 Save（保存）。
前往 Zaraz > Tools Configuration（工具配置） > Third-party tools（第三方工具）。
找到要与电商跟踪一起使用的工具，然后选择 Edit（编辑）。
选择 Settings（设置）。
在 **Advanced（高级）**下，启用 E-commerce tracking（电商跟踪）。
选择 Save（保存）。

电商跟踪现已启用。如果向网站添加其他希望与 zaraz.ecommerce() 一起使用的工具，需要对该工具重复步骤 6–9。

将电商跟踪添加到网站

在 Zaraz 仪表板中启用电商跟踪后，需要将 zaraz.ecommerce() 添加到网站的 <body> 元素中：

zaraz.ecommerce("Event Name", { parameters });

要创建完整的跟踪事件，需要添加一个事件以及一个或多个参数。下方列出了 Zaraz 支持的事件和参数，以及不同类型事件的代码示例。

支持的事件列表

Product List Viewed
Products Searched
Product Clicked
Product Added
Product Added to Wishlist
Product Removed
Product Viewed
Cart Viewed
Checkout Started
Checkout Step Viewed
Checkout Step Completed
Payment Info Entered
Order Completed
Order Updated
Order Refunded
Order Cancelled
Clicked Promotion
Viewed Promotion
Shipping Info Entered

支持的参数列表：

参数	类型	描述
`product_id`	String	商品 ID。
`sku`	String	商品 SKU 编号。
`category`	String	商品类别。
`name`	String	商品名称。
`brand`	String	商品品牌名称。
`variant`	String	商品变体（取决于商品，可能是颜色、尺寸等）。
`price`	Number	商品价格。
`quantity`	Number	商品件数。
`coupon`	String	与商品关联的优惠券代码名称或序列号。
`position`	Number	商品在商品列表中的位置（例如 `2`）。
`products`	Array	商品列表中显示的商品列表。
`products.[].product_id`	String	商品列表中显示的商品 ID。
`products.[].sku`	String	商品列表中显示的商品 SKU。
`products.[].category`	String	商品列表中显示的商品类别。
`products.[].name`	String	商品列表中显示的商品名称。
`products.[].brand`	String	商品列表中显示的商品品牌。
`products.[].variant`	String	商品列表中显示的商品变体。
`products.[].price`	Number	商品列表中显示的商品价格。
`products.[].quantity`	Number	商品列表中显示的商品数量。
`products.[].coupon`	String	与商品列表中显示的商品关联的优惠券代码名称或序列号。
`products.[].position`	Number	商品在商品列表中的位置（例如 `2`）。
`checkout_id`	String	结账 ID。
`order_id`	String	订单/交易/购买的内部 ID。
`affiliation`	String	订单来源联盟的名称。
`total`	Number	包含折扣和优惠券后的收入。
`revenue`	Number	不含运费和税费的收入。
`shipping`	Number	交易的运费成本。
`tax`	Number	交易的总税费。
`discount`	Number	交易的总折扣。
`coupon`	String	在交易级别兑换的优惠券名称或序列号。
`currency`	String	交易的货币代码。
`value`	Number	乘以数量后的商品总价值。
`creative`	String	被跟踪促销创意素材的标签。
`query`	String	商品搜索词。
`step`	Number	结账流程中结账步骤的编号。
`payment_type`	String	使用的支付类型。

事件代码示例

商品已查看

zaraz.ecommerce("Product Viewed", {
	product_id: "999555321",
	sku: "2671033",
	category: "T-shirts",
	name: "V-neck T-shirt",
	brand: "Cool Brand",
	variant: "White",
	price: 14.99,
	currency: "usd",
	value: 18.99,
});

商品列表已查看

zaraz.ecommerce("Product List Viewed", {
	products: [
		{
			product_id: "999555321",
			sku: "2671033",
			category: "T-shirts",
			name: "V-neck T-shirt",
			brand: "Cool Brand",
			variant: "White",
			price: 14.99,
			currency: "usd",
			value: 18.99,
			position: 1,
		},
		{
			product_id: "999555322",
			sku: "2671034",
			category: "T-shirts",
			name: "T-shirt",
			brand: "Cool Brand",
			variant: "Pink",
			price: 10.99,
			currency: "usd",
			value: 16.99,
			position: 2,
		},
	],
});

商品已添加

zaraz.ecommerce("Product Added", {
	product_id: "999555321",
	sku: "2671033",
	category: "T-shirts",
	name: "V-neck T-shirt",
	brand: "Cool Brand",
	variant: "White",
	price: 14.99,
	currency: "usd",
	quantity: 1,
	coupon: "SUMMER-SALE",
	position: 2,
});

结账步骤已查看

zaraz.ecommerce("Checkout Step Viewed", {
	step: 1,
});

订单已完成

zaraz.ecommerce("Order Completed", {
	checkout_id: "616727740",
	order_id: "817286897056801",
	affiliation: "affiliate.com",
	total: 30.0,
	revenue: 20.0,
	shipping: 3,
	tax: 2,
	discount: 5,
	coupon: "winter-sale",
	currency: "USD",
	products: [
		{
			product_id: "999666321",
			sku: "8251511",
			name: "Boy’s shorts",
			price: 10,
			quantity: 2,
			category: "shorts",
		},
		{
			product_id: "742566131",
			sku: "7251567",
			name: "Blank T-shirt",
			price: 5,
			quantity: 2,
			category: "T-shirts",
		},
	],
});