---
title: Analytics.ProductView
description: Publishes a `product_viewed` event to the `Analytics.Provider` component.
api_version: 2026-01
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
  ```

### OtherData



### ProductsPayload

* products

  The products associated with this event.

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

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