Hydrogen - Shopify Analytics consent not working after upgrade

Hydrogen and Storefront APIs
1

Site: www.vasuma.com

I have checked Analytics event tracking with Hydrogen to implement analytics and the consent bar settings in Shopify admin. It used to work, but in December it just stopped working. Not getting any errors. Hydrogen version: 2025.1.0

Returning in loader:

 return defer(
   .....
    {
      shop: getShopAnalytics({
        storefront,
        publicStorefrontId: env.PUBLIC_STOREFRONT_ID,
      }),
      consent: {
        checkoutDomain: env.PUBLIC_CHECKOUT_DOMAIN,
        storefrontAccessToken: env.PUBLIC_STOREFRONT_API_TOKEN,
        withPrivacyBanner: true,
        country: storefront.i18n.country,
        language: storefront.i18n.language,
        cookieDomain: 'vasuma.com',
      },
    },
    {
      headers: {
        'Set-Cookie': await context.session.commit(),
      },
    },
  );
}

then in Layout


function App() {
  const nonce = useNonce();
  const data = useLoaderData<typeof loader>();
  const locale = data.selectedLocale ?? DEFAULT_LOCALE;
  
  // Extract JSON-LD data from SEO
  const jsonLd = data.seo?.jsonLd;

  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <meta name="msvalidate.01" content="A352E6A0AF9A652267361BBB572B8468" />
        <Meta />
        <Links />
        {jsonLd && (
          <script
            type="application/ld+json"
            dangerouslySetInnerHTML={{
              __html: JSON.stringify(jsonLd),
            }}
          />
        )}
  
      </head>
      <body>
     
        {data.consent && data.shop ? (
          <Analytics.Provider
            cart={data.cart}
            shop={data.shop}
            consent={data.consent}
          >
            <Layout
              key={`${locale.language}-${locale.country}`}
              layout={data.layout}
              footer={data.footer}
            >
              <Outlet />
              <GoogleTagManager />
            </Layout>
          </Analytics.Provider>
        ) : (
          children
        )}

        <ScrollRestoration nonce={nonce} />
        <Scripts nonce={nonce} />

        <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.0/mapbox-gl-geocoder.min.js"></script>
        <script src="https://npmcdn.com/@turf/turf/turf.min.js"></script>
      </body>
    </html>
...

Would appreciate some help I am going nuts!

2

Managed to figure it out – I was still using the myshopify.com domain for checkout, which caused mismatch between the cookieDomain. Creating a custom subdomain, checkout.vasuma.com for checkout fixed it!

2 Likes