Analytics.
component
Publishes a event to the Analytics.Provider component.
- Anchor to propspropsCollectionViewPropsrequired
CollectionViewProps
- customData
OtherData - data
CollectionPayload
{
data: CollectionPayload;
customData?: OtherData;
}OtherData
OtherDataCollectionPayload
- collection
CollectionPayloadDetails
{
collection: CollectionPayloadDetails;
}CollectionPayloadDetails
- handle
The collection handle.
string - id
The collection id.
string
{
/** The collection id. */
id: string;
/** The collection handle. */
handle: string;
}Was this section helpful?
Example
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
Description
This is the default 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> ); }