# Product viewed
Learn how to track when a user views a product.
This event tracks when a user views a product in an online store.
> **Automatically tracked**
>
> The SDK automatically tracks this event when [`structured data`](https://developers.google.com/search/docs/appearance/structured-data/product-snippet) is present.
## Implementation
Here is an example of how to track this event:
**JavaScript**
```javascript
import croct from '@croct/plug';
croct.track('productViewed', {
product: {
productId: '12345',
name: 'Black iPhone 12',
displayPrice: 899.99
}
});
```
**HTML**
```html
My awesome application
```
**React — JavaScript**
```jsx
import {useCroct} from '@croct/plug-react';
export function Example() {
const croct = useCroct();
const track = () => croct.track('productViewed', {
product: {
productId: '12345',
name: 'Black iPhone 12',
displayPrice: 899.99
}
});
return ();
}
```
**React — TypeScript**
```typescript
import {useCroct} from '@croct/plug-react';
import type {ReactElement} from 'react';
export function Example(): ReactElement {
const croct = useCroct();
const track = () => croct.track('productViewed', {
product: {
productId: '12345',
name: 'Black iPhone 12',
displayPrice: 899.99
}
});
return ();
}
```
**Next — JavaScript**
```jsx
import {useCroct} from '@croct/plug-next';
export function Example() {
const croct = useCroct();
const track = () => croct.track('productViewed', {
product: {
productId: '12345',
name: 'Black iPhone 12',
displayPrice: 899.99
}
});
return ();
}
```
**Next — TypeScript**
```tsx
import {useCroct} from '@croct/plug-next';
import type {ReactElement} from 'react';
export function Example(): ReactElement {
const croct = useCroct();
const track = () => croct.track('productViewed', {
product: {
productId: '12345',
name: 'Black iPhone 12',
displayPrice: 899.99
}
});
return ();
}
```
**Vue — JavaScript**
```vue
```
**Vue — TypeScript**
```vue
```
**Nuxt — JavaScript**
```vue
```
**Nuxt — TypeScript**
```vue
```
## Input properties
These are the supported properties:
- `product`: `object`
The product being viewed.
- `productId`: `string`
The ID that uniquely identifies the product on your store. For example, "3108" or "CD4371".
The value must be between 1 and 50 characters long.
- `sku`: `string` (optional)
The SKU of the product. For example, "IPH-GRE-64", "153-169-172-182887".
The value must be between 1 and 50 characters long.
- `name`: `string`
The name of the product. For example, "iPhone" or "Nike Air Max".
The value must be between 1 and 200 characters long.
- `category`: `string` (optional)
The category of the product. For example, "Smartphones" or "Running shoes".
The value must be between 1 and 100 characters long.
- `brand`: `string` (optional)
The brand of the product. For example, "Apple" or "Nike".
The value must be between 1 and 100 characters long.
- `variant`: `string` (optional)
The variant of the product, such as size, color and style. For example, "Black", "M", "XL".
The value must be between 1 and 50 characters long.
- `currency`: `string` (optional)
The currency in which the monetary values are expressed in the shopping cart, such as "USD" or "EUR".
We recommend using the 3-letter currency codes defined by the [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) standard. For currencies having no official recognition in the standard, consider using ISO-like codes adopted locally or commercially, such as "XBT" for BitCoin.
- `displayPrice`: `number`
The price of the product displayed in the store. For example, 899.99.
The value must be non-negative.
- `originalPrice`: `number` (optional)
The regular price of the product before any discounts. For example, 999.99.
The value must be non-negative.
- `url`: `string` (optional)
The URL of the product page.
- `imageUrl`: `string` (optional)
The URL of the product image.
## Processed properties
This event has no processed properties.
## Payload examples
Below are some payload examples for this event:
**Basic payload**
```json
{
"product": {
"productId": "12345",
"name": "Black iPhone 12",
"displayPrice": 899.99
}
}
```
**Full payload**
```json
{
"product": {
"productId": "12345",
"sku": "PHONE-BLACK-64GB",
"name": "Black iPhone 12",
"category": "Smartphones",
"brand": "Apple",
"variant": "64GB",
"currency": "USD",
"displayPrice": 899.99,
"originalPrice": 999.99,
"url": "https://example.com/products/12345",
"imageUrl": "https://example.com/images/12345.jpg"
}
}
```
**Processed payload**
```json
{
"type": "productViewed",
"product": {
"productId": "12345",
"sku": "PHONE-BLACK-64GB",
"name": "Black iPhone 12",
"category": "Smartphones",
"brand": "Apple",
"variant": "64GB",
"currency": "USD",
"displayPrice": 899.99,
"originalPrice": 999.99,
"url": "https://example.com/products/12345",
"imageUrl": "https://example.com/images/12345.jpg"
}
}
```
## Explore
- [Analytics](/reference/analytics): Learn how to analyze your dashboards.
- [Event-based audiences](/reference/cql/expressions/events/event-types/product-viewed): Learn how to create audiences based on this event.