Analytics.
Publishes a event to the Analytics.Provider component.
- Anchor to propspropspropsProductViewPropsProductViewPropsrequiredrequired
ProductViewProps
- customData
OtherData - data
ProductsPayload
OtherData
ProductsPayload
- products
The products associated with this event.
Array<ProductPayload & OtherData>
ProductPayload
- id
The product id.
Product - price
The displaying variant price.
ProductVariant - productType
The product type.
Product - quantity
The quantity of product.
number - sku
The product sku.
ProductVariant - title
The product title.
Product - variantId
The displaying variant id.
ProductVariant - variantTitle
The displaying variant title.
ProductVariant - vendor
The product vendor.
Product
Examples
import {useLoaderData} from 'react-router';
import {Analytics} from '@shopify/hydrogen';
export async function loader() {
return {
product: {
id: '123',
title: 'ABC',
vendor: 'abc',
selectedVariant: {
id: '456',
title: 'DEF',
price: {
amount: '100',
},
},
},
};
}
export default function Product() {
const {product} = useLoaderData();
const {selectedVariant} = product;
return (
<div className="product">
<h1>{product.title}</h1>
<Analytics.ProductView
data={{
products: [
{
id: product.id,
title: product.title,
price: selectedVariant?.price.amount || '0',
vendor: product.vendor,
variantId: selectedVariant?.id || '',
variantTitle: selectedVariant?.title || '',
quantity: 1,
},
],
}}
/>
</div>
);
}
Examples
example
Description
This is the default example
JavaScript
import {useLoaderData} from 'react-router'; import {Analytics} from '@shopify/hydrogen'; export async function loader() { return { product: { id: '123', title: 'ABC', vendor: 'abc', selectedVariant: { id: '456', title: 'DEF', price: { amount: '100', }, }, }, }; } export default function Product() { const {product} = useLoaderData(); const {selectedVariant} = product; return ( <div className="product"> <h1>{product.title}</h1> <Analytics.ProductView data={{ products: [ { id: product.id, title: product.title, price: selectedVariant?.price.amount || '0', vendor: product.vendor, variantId: selectedVariant?.id || '', variantTitle: selectedVariant?.title || '', quantity: 1, }, ], }} /> </div> ); }TypeScript
import {useLoaderData} from 'react-router'; import {Analytics} from '@shopify/hydrogen'; export async function loader() { return { product: { id: '123', title: 'ABC', vendor: 'abc', selectedVariant: { id: '456', title: 'DEF', price: { amount: '100', }, }, }, }; } export default function Product() { const {product} = useLoaderData<typeof loader>(); const {selectedVariant} = product; return ( <div className="product"> <h1>{product.title}</h1> <Analytics.ProductView data={{ products: [ { id: product.id, title: product.title, price: selectedVariant?.price.amount || '0', vendor: product.vendor, variantId: selectedVariant?.id || '', variantTitle: selectedVariant?.title || '', quantity: 1, }, ], }} /> </div> ); }
Was this page helpful?