Analytics.
component
Publishes a event to the Analytics.Provider component.
- Anchor to propspropsProductViewPropsrequired
ProductViewProps
- customData
OtherData - data
ProductsPayload
{
data: ProductsPayload;
customData?: OtherData;
}OtherData
OtherDataProductsPayload
- products
The products associated with this event.
Array<ProductPayload & OtherData>
{
/** The products associated with this event. */
products: Array<ProductPayload & OtherData>;
}ProductPayload
- id
The product id.
string - price
The displaying variant price.
string - productType
The product type.
string - quantity
The quantity of product.
number - sku
The product sku.
string - title
The product title.
string - variantId
The displaying variant id.
string - variantTitle
The displaying variant title.
string - vendor
The product vendor.
string
{
/** The product id. */
id: Product['id'];
/** The product title. */
title: Product['title'];
/** The displaying variant price. */
price: ProductVariant['price']['amount'];
/** The product vendor. */
vendor: Product['vendor'];
/** The displaying variant id. */
variantId: ProductVariant['id'];
/** The displaying variant title. */
variantTitle: ProductVariant['title'];
/** The quantity of product. */
quantity: number;
/** The product sku. */
sku?: ProductVariant['sku'];
/** The product type. */
productType?: Product['productType'];
}Was this section helpful?
Example
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> ); }