# Analytics.ProductView

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

```js
import {useLoaderData} from '@remix-run/react';
import {json} from '@shopify/remix-oxygen';
import {Analytics} from '@shopify/hydrogen';

export async function loader() {
  return json({
    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>
  );
}

```

```ts
import {useLoaderData} from '@remix-run/react';
import {json} from '@shopify/remix-oxygen';
import {Analytics} from '@shopify/hydrogen';

export async function loader() {
  return json({
    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>
  );
}

```

## Props

### AnalyticsProductViewGeneratedType

#### Returns: 

#### Params:

- props: ProductViewProps
export function AnalyticsProductView(props: ProductViewProps) {
  return <AnalyticsView {...props} type="product_viewed" />;
}


### ProductViewProps

### data

value: `ProductsPayload`

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

### customData

value: `OtherData`

  - OtherData: OtherData

### ProductsPayload

### products

value: `Array<ProductPayload & OtherData>`

  - ProductPayload: {
  /** 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'];
}
  - OtherData: OtherData
The products associated with this event.

### ProductPayload

### id

value: `string`

The product id.

### title

value: `string`

The product title.

### price

value: `string`

The displaying variant price.

### vendor

value: `string`

The product vendor.

### variantId

value: `string`

The displaying variant id.

### variantTitle

value: `string`

The displaying variant title.

### quantity

value: `number`

The quantity of product.

### sku

value: `string`

The product sku.

### productType

value: `string`

The product type.