Choose a version:

Analytics.CollectionView

Publishes a collection_viewed event to the Analytics.Provider component.

Anchor to analyticsCollectionView
analyticsCollectionView(
props
)

Anchor to analyticsCollectionView-parametersParameters

Anchor to props props required

CollectionViewProps

customData
```
OtherData
```
data
```
CollectionPayload
```

OtherData

CollectionPayload

collection
```
CollectionPayloadDetails
```

CollectionPayloadDetails

handle
The collection handle.
```
string
```
id
The collection id.
```
string
```

Examples

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 (

<h1>{collection.title}</h1>

<Analytics.CollectionView

data={{

collection: {

id: collection.id,

handle: collection.handle,

}}

</div>

);

}

Examples

Example

JavaScript

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

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>
  );
}

Was this page helpful?