Skip to main content

useAnalytics
hook

A hook that provides access to the analytics provider context. Must be a descendent of Analytics.Provider.

Anchor to returnsReturns

Anchor to canTrack
canTrack
() => boolean

A function to tell you the current state of if the user can be tracked by analytics. Defaults to Customer Privacy API's window.Shopify.customerPrivacy.analyticsProcessingAllowed().

Anchor to cart
cart
UserCart |

The current cart state. You can overwrite the type by passing a generic

Anchor to customData
customData
Record<string, unknown>

The custom data passed in from the AnalyticsProvider.

Anchor to prevCart
prevCart
UserCart |

The previous cart state. You can overwrite the type by passing a generic

Anchor to publish
publish

A function to publish an analytics event.

Anchor to register
register
(key: string) => { ready: () => void; }

A function to register with the analytics provider. It holds the first browser load events until all registered key has executed the supplied ready function. See example register usage.

Anchor to shop
shop
Promise< | null> | | null

The shop configuration required to publish events to Shopify.

Anchor to subscribe
subscribe

A function to subscribe to analytics events.

Was this section helpful?

Example

import {useAnalytics} from '@shopify/hydrogen';
import {useEffect} from 'react';

export function CustomAnalytics() {
const {subscribe, register} = useAnalytics();
const {ready} = register('CustomAnalytics'); // unique string identifier

useEffect(() => {
// Triggers on every page navigation
subscribe('page_viewed', (data) => {
console.log('CustomAnalytics - Page viewed:', data);
});

// Triggers on a page that uses `<Analytics.ProductView>`
subscribe('product_viewed', (data) => {
console.log('CustomAnalytics - Product viewed:', data);
});

// Triggers on a page that uses `<Analytics.CollectionView>`
subscribe('collection_viewed', (data) => {
console.log('CustomAnalytics - Collection viewed:', data);
});

// Triggers on a page that uses `<Analytics.CartView>`
subscribe('cart_viewed', (data) => {
console.log('CustomAnalytics - Cart viewed:', data);
});

// Triggers on a page that uses `<Analytics.SearchView>`
subscribe('search_viewed', (data) => {
console.log('CustomAnalytics - Search viewed:', data);
});

// Triggers on a page that uses `<Analytics.CustomView type="custom_promotion_viewed">`
subscribe('custom_promotion_viewed', (data) => {
console.log('CustomAnalytics - Promotion viewed:', data);
});

// Triggers when the cart is updated
subscribe('cart_updated', (data) => {
console.log('CustomAnalytics - Cart updated:', data);
});

// Triggers when an existing cart line increases in quantity or a new cart line is added
subscribe('product_added_to_cart', (data) => {
console.log('CustomAnalytics - Product added to cart:', data);
});

// Triggers when an existing cart line decreases in quantity or a cart line is removed
subscribe('product_removed_from_cart', (data) => {
console.log('CustomAnalytics - Product removed from cart:', data);
});

// Register the CustomAnalytics component as ready
ready();
}, []);

return null;
}

Anchor to examplesExamples

Example usage with useAnalytics:

Anchor to example-useanalyticsregisteruseAnalytics.register

Anchor to example-

Registers a unique key with the analytics provider component, enabling custom analytics integrations to wait for a callback before sending event data.

Was this section helpful?

JavaScript

import {
type PageViewPayload,
useAnalytics,
useLoadScript,
} from '@shopify/hydrogen';
import {useEffect} from 'react';

export function MyAnalytics() {
const {subscribe, register} = useAnalytics();

// Load the 3p analytics script
const scriptStatus = useLoadScript(
'https://example.com/some-3p-analytics-script.js',
);

// unique string identifier
const {ready} = register('MyAnalytics');

useEffect(() => {
// Make sure the 3p script is loaded
if (scriptStatus !== 'done') return;

// Initialize the 3p analytics script

// Subscribe to analytics events
subscribe('page_viewed', (data: PageViewPayload) => {
// report to 3p analytics
});

// Register the MyAnalytics component as ready
ready();
}, []);

return null;
}