Skip to main content

sendShopifyAnalytics
utility

Sends analytics to Shopify.

If event.payload.hasUserConsent is false, no analytics event will happen.

required

The analytics event.

string

The Online Store domain to sent Shopify analytics under the same top level domain.

Promise<void>
Was this section helpful?

Analytics event names accepted by Shopify analytics.

"ADD_TO_CART"
required

Add to cart

"PAGE_VIEW"
required

Page view

Was this section helpful?

Analytics page type values accepted by Shopify analytics.

Anchor to article
article
"article"
required
"blog"
required
"captcha"
required
"cart"
required
"collection"
required
"customers/account"
required
Anchor to customersActivateAccount
customersActivateAccount
"customers/activate_account"
required
"customers/addresses"
required
"customers/login"
required
"customers/order"
required
"customers/register"
required
Anchor to customersResetPassword
customersResetPassword
"customers/reset_password"
required
"403"
required
"gift_card"
required
"index"
required
"list-collections"
required
"404"
required
"page"
required
"password"
required
"policy"
required
"product"
required
"search"
required
Was this section helpful?

Analytics sales channel values accepted by Shopify analytics.

"headless"
required

Shopify Headless sales channel

"hydrogen"
required

Shopify Hydrogen sales channel

Was this section helpful?

Example code

import {
sendShopifyAnalytics,
getClientBrowserParameters,
AnalyticsEventName,
useShopifyCookies,
} from '@shopify/hydrogen';
import {useRouter} from 'next/router';
import {useEffect} from 'react';

function sendPageView(analyticsPageData) {
const payload = {
...getClientBrowserParameters(),
...analyticsPageData,
};
sendShopifyAnalytics({
eventName: AnalyticsEventName.PAGE_VIEW,
payload,
});
}

// Hook into your router's page change events to fire this analytics event:
// for example, in NextJS:

const analyticsShopData = {
shopId: 'gid://shopify/Shop/{your-shop-id}',
currency: 'USD',
acceptedLanguage: 'en',
};

export default function App({Component, pageProps}) {
const router = useRouter();

// eslint-disable-next-line no-undef
const hasUserConsent = yourFunctionToDetermineIfUserHasConsent();

// eslint-disable-next-line react-hooks/exhaustive-deps
const analytics = {
hasUserConsent,
...analyticsShopData,
...pageProps.analytics,
};
const pagePropsWithAppAnalytics = {
...pageProps,
analytics,
};

useEffect(() => {
const handleRouteChange = () => {
sendPageView(analytics);
};

router.events.on('routeChangeComplete', handleRouteChange);

return () => {
router.events.off('routeChangeComplete', handleRouteChange);
};
}, [analytics, router.events]);

useShopifyCookies();

return <Component {...pagePropsWithAppAnalytics} />;
}