Hydrogen analytics

Hydrogen uses the same canonical event names and dashboard formulas as Liquid. Events carry channel = hydrogen_storefront; they do not create a separate metric namespace.

Mount the Aabhas provider once below Shopify’s analytics provider so it survives product-route changes:

import {Analytics} from '@shopify/hydrogen';
import {AabhasAnalyticsProvider} from '@aabhastech/shopify-vto/hydrogen/analytics';

<Analytics.Provider cart={cart} shop={shop} consent={consent}>
  <AabhasAnalyticsProvider
    config={{
      analyticsEndpoint: `${env.PUBLIC_AABHAS_BACKEND_BASE_URL}/storefront/v1/analytics/events`,
      refreshStorefrontSession: async () => {
        const response = await fetch('/vto-session', {method: 'POST'});
        if (!response.ok) throw new Error('Session refresh failed');
        return response.json();
      },
    }}
  >
    <Outlet />
  </AabhasAnalyticsProvider>
</Analytics.Provider>

The bridge mirrors Shopify semantic events for page, collection, search, product, cart view, add to cart, and remove from cart. Call typed tracking explicitly at host-owned boundaries such as custom checkout navigation.

const analytics = useAabhasAnalytics();

function beginCheckout() {
  analytics.track('checkout_started');
  void analytics.flush();
  window.location.assign(checkoutUrl);
}

Shopify Customer Privacy is the analytics-consent authority. Suppress events until analytics processing is allowed. Photo-processing consent does not grant analytics consent.

Analytics failures must not block VTO. The SDK batches and deduplicates logical events using source event identities.

Hydrogen analytics

Consent