E-commerce

zaraz.ecommerce() は、ページの <body> タグ内のどこでも使えます。

zaraz.ecommerce() を使うと、ユーザーが商品をカートに追加したとき、チェックアウトファネルを開始したとき、ウェブサイトで注文を完了したときなど、e コマースのユーザー導線でよくあるイベントを追跡できます。async 関数なので、ほかのコードを実行する前に完了を確かめたい場合は await できます。

zaraz.ecommerce() を使い始めるには、まず Zaraz アカウントで有効にし、e コマースデータを送る予定のツールで E-commerce アクションを有効にします。そのあと、ウェブサイトの <body> 要素に zaraz.ecommerce() を追加します。

現時点で Zaraz の e コマースは、Google Analytics 3（Universal Analytics）、Google Analytics 4、Bing、Facebook Pixel、Amplitude、Pinterest Conversions API、TikTok、Branch に対応しています。

e コマース追跡を有効にする

e コマースイベントをトリガーに対応づける必要はありません。Zaraz は、e コマース対応ツールへ適切な形式でデータを自動転送します。

Cloudflare ダッシュボードで Settings ページを開きます。
Settings を開く ↗
E-commerce tracking を有効にします。
Save を選びます。
Zaraz > Tools Configuration > Third-party tools を開きます。
e コマース追跡で使いたいツールを探し、Edit を選びます。
Settings を選びます。
Advanced で E-commerce tracking を有効にします。
Save を選びます。

これで e コマース追跡が有効になります。ウェブサイトに追加したほかのツールでも zaraz.ecommerce() を使いたい場合は、そのツールについて手順 6〜8 を繰り返します。

ウェブサイトに e コマース追跡を追加する

Zaraz ダッシュボードで e コマース追跡を有効にしたら、ウェブサイトの <body> 要素に zaraz.ecommerce() を追加します。

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

完全な追跡イベントを作るには、イベントと 1 つ以上のパラメーターを追加します。以降では、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	使用した支払い方法。

イベントのコード例

Product viewed

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,
});

Product List Viewed

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,
		},
	],
});

Product added

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,
});

Checkout Step Viewed

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

Order completed

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",
		},
	],
});