Skip to main content


The ShopifyAnalytics component sends commerce-related analytics to Shopify. By adding the ShopifyAnalytics component to your Hydrogen storefront, you can view key sales, orders, and online store visitor data from the Analytics dashboard in your Shopify admin.


Add the ShopifyAnalytics component in App.server.jsx:

function App() {
return (
<Suspense fallback={<LoadingFallback />}>
<ShopifyAnalytics />

If you have a custom domain or you're using sub-domains, then you can set the cookie domain of the ShopifyAnalytics component so that cookies persists for your root domain:

<ShopifyAnalytics cookieDomain="" />

If you're not using custom domains or sub-domains, then the ShopifyAnalytics component uses the storeDomain value in the Hydrogen configuration file as the default cookie domain or leaves it blank when the specified cookie domain doesn't match window.location.hostname.

If you have customer login, then make sure that customerAccessToken is passed to the <CartProvider>:

const {customerAccessToken} = useSession();

shopify: {
isLoggedIn: !!customerAccessToken,

return (
<Suspense fallback={<HeaderFallback isHome={isHome} />}>

Connecting Hydrogen analytics with Shopify checkout

Analytics cookies must be set at the first-party domain. This means that when a buyer navigates from your Hydrogen storefront to Shopify checkout, the domain name must stay the same.

You can achieve this by assigning a sub-domain to your online store. For example, you can do the following tasks:

  • Set your Hydrogen store domain to
  • Attach a new sub-domain to your online store at
  • Set the cookieDomain to the same root domain at <ShopifyAnalytics cookieDomain="" />.

Note: Hydrogen analytics and Shopify checkout can only be connected in production. They can't be connected in development and preview modes.

Shopify Analytics data

Provide the following data to useServerAnalytics to view information from the Analytics dashboard in your Shopify admin:

canonicalPath?The URL path without localization. If you have the URL scheme /page, /en-CA/page, /en-GB/page that represents the same localized pages, then you can tell Shopify how to aggregate these events by setting the canonical path to /page.
pageType?The page template type for your routes. For a list of valid values, refer to ShopifyAnalytics constants.
resourceId?The ID of the page template type for the routes that use Shopify resources.
This only applies to the following routes: article, blog, collection, page, product.
collectionHandle?The collection page handle.
products?An array of products.
searchTerm?The search term.
customerId?The customer ID.


product_gidThe globally unique Shopify product ID.gid://shopify/Product/6730943955000
variant_gidThe globally unique Shopify product variant ID.gid://shopify/ProductVariant/41007290712120
nameThe product title.The H2 Snowboard
variantThe variant title.154cm / Reactive Blue
brandThe product vendor.Snowdevil
priceThe variant price.629.95
category?The product type.Snowboards
sku?The variant SKU.123

Home page

export default function Homepage() {
shopify: {
canonicalPath: '/',
pageType: ShopifyAnalyticsConstants.pageType.home,

Collection page

export default function Collection() {
const {handle} = useRouteParams();
shopify: {
canonicalPath: `/collections/${handle}`,
pageType: ShopifyAnalyticsConstants.pageType.collection,
collectionHandle: handle,

Product page

export default function Product() {
const {handle} = useRouteParams();
shopify: {
canonicalPath: `/products/${handle}`,
pageType: ShopifyAnalyticsConstants.pageType.product,
resourceId: id,
products: [
product_gid: id,
variant_gid: variantId,
variant: variantTitle,
name: title,
brand: vendor,
category: productType,
price: priceV2.amount,

Search page

export default function Search() {
const {searchParams} = useUrl();
const searchTerm = searchParams.get('q');
shopify: {
canonicalPath: '/search',

Account index page

export default function Account({response}: HydrogenRouteProps) {
if (!customer) return response.redirect('/account/login');

// The logged-in analytics state
shopify: {

Cart Fragment

If you're overriding the CartProvider's cartFragment prop, then ensure that your new cart fragment contains the following data shape:

merchandise {
... on ProductVariant {
priceV2 {
product {

ShopifyAnalytics constants

The following table provides a list of valid values for the pageType property:

articleA page that displays an article in an online store blog.
blogA page that displays an online store blog.
captchaA page that uses Google's reCAPTCHA v3 to help prevent spam through customer, contact, and blog comment forms.
cartA page that displays the merchandise that a buyer intends to purchase, and the estimated cost associated with the cart.
collectionA page that displays a grouping of products.
customersAccountA page that provides details about a customer's account.
customersActivateAccountA page that enables a customer to activate their account.
customersAddressesA page that displays a customer's addresses.
customersLoginA page that enables a customer to log in to a storefront.
customersOrderA page that displays a customer's orders.
customersRegisterA page that enables a customer to create and register their account.
customersResetPasswordA page that enables a customer to reset the password that's associated with their account.
giftCardA page that displays an issued gift card.
homeThe homepage of the online store.
listCollectionsA page that displays a list of collections that each contain a grouping of products.
forbiddenA page that users can't access due to insufficient permissions.
notFoundA page that no longer exists or is inaccessible.
pageA page that holds static HTML content. Each page object represents a custom page on the online store.
passwordA page that's shown when password protection is applied to the store.
productA page that represents an individual item for sale in a store.
policyA page that provides the storefront's policy.
searchA page that displays the results of a storefront search.

Component type

The ShopifyAnalytics component is a server component, which means that it renders on the server. For more information about component types, refer to React Server Components.