---
title: Analytics.CollectionView
description: Publishes a `collection_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-collectionview
md: >-
https://shopify.dev/docs/api/hydrogen/latest/components/analytics/analytics-collectionview.md
---
# Analytics.CollectionView
Publishes a `collection_viewed` event to the `Analytics.Provider` component.
## analyticsCollectionView([props](#props-propertydetail-props))
### Parameters
* props
CollectionViewProps
required
### CollectionViewProps
* customData
```ts
OtherData
```
* data
```ts
CollectionPayload
```
```ts
{
data: CollectionPayload;
customData?: OtherData;
}
```
### OtherData
```ts
OtherData
```
### CollectionPayload
* collection
```ts
CollectionPayloadDetails
```
```ts
{
collection: CollectionPayloadDetails;
}
```
### CollectionPayloadDetails
* handle
The collection handle.
```ts
string
```
* id
The collection id.
```ts
string
```
```ts
{
/** The collection id. */
id: string;
/** The collection handle. */
handle: string;
}
```
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 {
collection: {
id: '123',
title: 'ABC',
handle: 'abc',
},
};
}
export default function Collection() {
const {collection} = useLoaderData();
return (
);
}
```
##### TypeScript
```ts
import {useLoaderData} from 'react-router';
import {Analytics} from '@shopify/hydrogen';
export async function loader() {
return {
collection: {
id: '123',
title: 'ABC',
handle: 'abc',
},
};
}
export default function Collection() {
const {collection} = useLoaderData();
return (
);
}
```