A hook that provides access to the analytics provider context. Must be a descendent of [`Analytics.Provider`](/docs/api/hydrogen/2024-04/components/Analytics-provider).
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;
}
import {
type PageViewPayload,
type ProductViewPayload,
type CollectionViewPayload,
type CartViewPayload,
type CartUpdatePayload,
type CartLineUpdatePayload,
type SearchViewPayload,
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: PageViewPayload) => {
console.log('CustomAnalytics - Page viewed:', data);
});
// Triggers on a page that uses `<Analytics.ProductView>`
subscribe('product_viewed', (data: ProductViewPayload) => {
console.log('CustomAnalytics - Product viewed:', data);
});
// Triggers on a page that uses `<Analytics.CollectionView>`
subscribe('collection_viewed', (data: CollectionViewPayload) => {
console.log('CustomAnalytics - Collection viewed:', data);
});
// Triggers on a page that uses `<Analytics.CartView>`
subscribe('cart_viewed', (data: CartViewPayload) => {
console.log('CustomAnalytics - Cart viewed:', data);
});
// Triggers on a page that uses `<Analytics.SearchView>`
subscribe('search_viewed', (data: SearchViewPayload) => {
console.log('CustomAnalytics - Search viewed:', data);
});
// Triggers on a page that uses `<Analytics.CustomView type="custom_promotion_viewed">`
subscribe('custom_promotion_viewed', (data: unknown) => {
console.log('CustomAnalytics - Promotion viewed:', data);
});
// Triggers when the cart is updated
subscribe('cart_updated', (data: CartUpdatePayload) => {
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: CartLineUpdatePayload) => {
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: CartLineUpdatePayload) => {
console.log('CustomAnalytics - Product removed from cart:', data);
});
// Register the CustomAnalytics component as ready
ready();
}, []);
return null;
}
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()`.
The current cart state.
The custom data passed in from the `AnalyticsProvider`.
The previous cart state.
A function to publish an analytics event.
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](/docs/api/hydrogen/2024-04/hooks/useanalytics#example-useanalytics.register).
The shop configuration required to publish events to Shopify.
A function to subscribe to analytics events.
Cart & { errors?: StorefrontApiErrors; }
Cart
JsonGraphQLError[] | undefined
PublishPageView | PublishProductView | PublishCollectionView | PublishCartView | PublishSearchView | PublishCartUpdated | PublishProductAddedToCart | PublishProductRemovedFromCart | PublishCustomEvent
event: "page_viewed"
payload: PageViewPayload
type PublishPageView = (event: 'page_viewed', payload: PageViewPayload) => void;
UrlPayload & BasePayload
The url location of when this event is collected.
The shop data passed in from the `AnalyticsProvider`.
The custom data passed in from the `AnalyticsProvider`.
The shop ID.
The language code that is being displayed to user.
The currency code that is being displayed to user.
The Hydrogen subchannel ID generated by Oxygen in the environment variable.
event: "product_viewed"
payload: ProductViewPayload
type PublishProductView = ( event: 'product_viewed', payload: ProductViewPayload, ) => void;
ProductsPayload & UrlPayload & BasePayload
The products associated with this event.
The product id.
The product title.
The displaying variant price.
The product vendor.
The displaying variant id.
The displaying variant title.
The quantity of product.
The product sku.
The product type.
OtherData
event: "collection_viewed"
payload: CollectionViewPayload
type PublishCollectionView = ( event: 'collection_viewed', payload: CollectionViewPayload, ) => void;
CollectionPayload & UrlPayload & BasePayload
The collection id.
The collection handle.
event: "cart_viewed"
payload: CartViewPayload
type PublishCartView = (event: 'cart_viewed', payload: CartViewPayload) => void;
CartPayload & UrlPayload & BasePayload
The current cart state.
The previous cart state.
event: "search_viewed"
payload: SearchViewPayload
type PublishSearchView = ( event: 'search_viewed', payload: SearchViewPayload, ) => void;
SearchPayload & UrlPayload & BasePayload
The search term used for the search results page
The search results
event: "cart_updated"
payload: CartUpdatePayload
type PublishCartUpdated = ( event: 'cart_updated', payload: CartUpdatePayload, ) => void;
CartPayload & BasePayload & OtherData
event: "product_added_to_cart"
payload: CartLineUpdatePayload
type PublishProductAddedToCart = ( event: 'product_added_to_cart', payload: CartLineUpdatePayload, ) => void;
CartLinePayload & CartPayload & BasePayload & OtherData
The previous state of the cart line that got updated.
The current state of the cart line that got updated.
event: "product_removed_from_cart"
payload: CartLineUpdatePayload
type PublishProductRemovedFromCart = ( event: 'product_removed_from_cart', payload: CartLineUpdatePayload, ) => void;
event: `custom_${string}`
payload: OtherData
type PublishCustomEvent = ( event: `custom_${string}`, payload: OtherData, ) => void;
SubscribePageView | SubscribeProductView | SubscribeCollectionView | SubscribeCartView | SubscribeSearchView | SubscribeCartUpdated | SubscribeProductAddedToCart | SubscribeProductRemovedFromCart | SubscribeCustomEvent
event: "page_viewed"
callback: (payload: PageViewPayload) => void
type SubscribePageView = ( event: 'page_viewed', callback: (payload: PageViewPayload) => void, ) => void;
event: "product_viewed"
callback: (payload: ProductViewPayload) => void
type SubscribeProductView = ( event: 'product_viewed', callback: (payload: ProductViewPayload) => void, ) => void;
event: "collection_viewed"
callback: (payload: CollectionViewPayload) => void
type SubscribeCollectionView = ( event: 'collection_viewed', callback: (payload: CollectionViewPayload) => void, ) => void;
event: "cart_viewed"
callback: (payload: CartViewPayload) => void
type SubscribeCartView = ( event: 'cart_viewed', callback: (payload: CartViewPayload) => void, ) => void;
event: "search_viewed"
callback: (payload: SearchViewPayload) => void
type SubscribeSearchView = ( event: 'search_viewed', callback: (payload: SearchViewPayload) => void, ) => void;
event: "cart_updated"
callback: (payload: CartUpdatePayload) => void
type SubscribeCartUpdated = ( event: 'cart_updated', callback: (payload: CartUpdatePayload) => void, ) => void;
event: "product_added_to_cart"
callback: (payload: CartLineUpdatePayload) => void
type SubscribeProductAddedToCart = ( event: 'product_added_to_cart', callback: (payload: CartLineUpdatePayload) => void, ) => void;
event: "product_removed_from_cart"
callback: (payload: CartLineUpdatePayload) => void
type SubscribeProductRemovedFromCart = ( event: 'product_removed_from_cart', callback: (payload: CartLineUpdatePayload) => void, ) => void;
event: `custom_${string}`
callback: (payload: OtherData) => void
type SubscribeCustomEvent = ( event: `custom_${string}`, callback: (payload: OtherData) => void, ) => void;
A hook that provides access to the analytics provider context. Must be a descendent of [`Analytics.Provider`](/docs/api/hydrogen/2024-04/components/Analytics-provider).
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;
}