---
title: Analytics.CollectionView
description: Publishes a `collection_viewed` event to the `Analytics.Provider` component.
api_version: 2024-07
api_name: hydrogen
source_url:
  html: >-
    https://shopify.dev/docs/api/hydrogen/2024-07/components/analytics/analytics-collectionview
  md: >-
    https://shopify.dev/docs/api/hydrogen/2024-07/components/analytics/analytics-collectionview.md
---

# Analytics.​Collection​View

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

  ##### Description

  This is the default example

  ##### JavaScript

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

  export async function loader() {
    return json({
      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 '@remix-run/react';
  import {json} from '@shopify/remix-oxygen';
  import {Analytics} from '@shopify/hydrogen';

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