---
title: Analytics.ProductView
description: Publishes a `product_viewed` event to the `Analytics.Provider` component.
api_version: 2025-07
api_name: hydrogen
source_url:
  html: >-
    https://shopify.dev/docs/api/hydrogen/latest/components/analytics/analytics-productview
  md: >-
    https://shopify.dev/docs/api/hydrogen/latest/components/analytics/analytics-productview.md
---

# Analytics.​Product​View

Publishes a `product_viewed` event to the `Analytics.Provider` component.

## analytics​Product​View([props](#props-propertydetail-props)​)

### Parameters

* props

  ProductViewProps

  required

### ProductViewProps

* customData

  ```ts
  OtherData
  ```

* data

  ```ts
  ProductsPayload
  ```

```ts
{
  data: ProductsPayload;
  customData?: OtherData;
}
```

### OtherData



```ts
OtherData
```

### ProductsPayload

* products

  The products associated with this event.

  ```ts
  Array<ProductPayload & OtherData>
  ```

```ts
{
  /** The products associated with this event. */
  products: Array<ProductPayload & OtherData>;
}
```

### ProductPayload

* id

  The product id.

  ```ts
  Product
  ```

* price

  The displaying variant price.

  ```ts
  ProductVariant
  ```

* productType

  The product type.

  ```ts
  Product
  ```

* quantity

  The quantity of product.

  ```ts
  number
  ```

* sku

  The product sku.

  ```ts
  ProductVariant
  ```

* title

  The product title.

  ```ts
  Product
  ```

* variantId

  The displaying variant id.

  ```ts
  ProductVariant
  ```

* variantTitle

  The displaying variant title.

  ```ts
  ProductVariant
  ```

* vendor

  The product vendor.

  ```ts
  Product
  ```

```ts
{
  /** 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'];
}
```

Examples

### Examples

* #### example

  ##### Description

  This is the default example

  ##### JavaScript

  ```js
  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

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