Choose a version:

Analytics.ProductView

Publishes a product_viewed event to the Analytics.Provider component.

Anchor to analyticsProductView
analyticsProductView(
props
)

Anchor to analyticsProductView-parametersParameters

Anchor to props props required

ProductViewProps

customData
```
OtherData
```
data
```
ProductsPayload
```

OtherData

ProductsPayload

products
The products associated with this event.
```
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
```

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 (

<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

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