Analytics.
Publishes a collection_viewed event to the Analytics.Provider component.
- Anchor to propspropspropsCollectionViewPropsCollectionViewPropsrequiredrequired
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 (
<div className="collection">
<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?