Event tracking

Once the provider is in place inside Shopify’s <Analytics.Provider>, the SDK automatically forwards your storefront’s analytics events to Croct. No manual instrumentation is required for the standard storefront events.

Automatic events

The bundled analytics bridge subscribes to Shopify’s storefront analytics and forwards each event to Croct, mapping it to the corresponding Croct event:

• Product views map to the product viewed event.
• Cart views map to the cart viewed event.
• Cart updates map to the cart modified event.
• Collection and search views map to the interest shown event.

These fire automatically as Hydrogen publishes the corresponding analytics events, so adding Shopify’s standard analytics components to your storefront is all it takes.

Consent

By default, automatic tracking follows Shopify’s Customer Privacy consent. The provider’s tracking option controls this behavior, and you can also set it through an environment variable.

To opt out of the consent alignment, set the tracking option to always, typically through the environment variable:

PUBLIC_CROCT_TRACK=always

Custom events

For events beyond the standard storefront set, use the hook that exposes the SDK instance to track custom events:

import {useCroct} from '@croct/plug-hydrogen';
export function NewsletterButton() {  const croct = useCroct();
  const handleSubscribe = () => croct.track('goalCompleted', {goalId: 'newsletter-signup'});
  return <button onClick={handleSubscribe}>Subscribe</button>;}

For the list of standard events you can track, see the recommended events reference.