---
title: Analytics.CollectionView
description: Publishes a collection_viewed event to the Analytics.
api_version: 2026-04
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.

## analytics​Collection​View(**[props](#props-propertydetail-props)**​)

### Parameters

* **props**

  **CollectionViewProps**

  **required**

### CollectionViewProps

* customData

  ```ts
  OtherData
  ```

* data

  ```ts
  CollectionPayload
  ```

### OtherData



### CollectionPayload

* collection

  ```ts
  CollectionPayloadDetails
  ```

### CollectionPayloadDetails

* handle

  The collection handle.

  ```ts
  string
  ```

* id

  The collection id.

  ```ts
  string
  ```

Examples

### Examples

* #### 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 (
      <div className="collection">
        <h1>{collection.title}</h1>
        <Analytics.CollectionView
          data={{
            collection: {
              id: collection.id,
              handle: collection.handle,
            },
          }}
        />
      </div>
    );
  }
  ```

  ##### 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<typeof loader>();
    return (
      <div className="collection">
        <h1>{collection.title}</h1>
        <Analytics.CollectionView
          data={{
            collection: {
              id: collection.id,
              handle: collection.handle,
            },
          }}
        />
      </div>
    );
  }
  ```

***