Skip to main content

Analytics consent and customer privacy

To collect analytics about your storefront visitors, you might need to establish consent. Use Shopify's built-in cookie banner to get consent from your customers.

Anchor to Configure your domains (required)Configure your domains (required)

Some consent settings require setting the specific domain names for your store.

Anchor to Configure your Hydrogen checkout domainConfigure your Hydrogen checkout domain

This keeps your customers' preferences consistent across storefronts and checkout.

  1. Start a checkout from your store, then copy the domain name from the checkout.
    1. For example, hydrogen.shop has a checkout domain of checkout.hydrogen.shop.
  2. From your Hydrogen storefront admin, go to Storefront settings > Environments and variables.
  3. Add a new environment variable with a key of PUBLIC_CHECKOUT_DOMAIN and the value of your checkout domain.
    1. Don't include https://.
    2. Apply the variable to your Production environment.
Hydrogen demo store checkout domain environment variable

Anchor to Add your domains to your content security policyAdd your domains to your content security policy

Make sure both your store and checkout domains are included in your content security policy.

This configuration is scaffolded by default with Hydrogen's Skeleton template. Check that your project includes the required domains:

Add store and checkout domain to CSP

/app/entry.server.jsx

export default async function handleRequest(
request: Request,
responseStatusCode: number,
responseHeaders: Headers,
remixContext: EntryContext,
context: AppLoadContext,
) {
const {nonce, header, NonceProvider} = createContentSecurityPolicy({
shop: {
checkoutDomain: context.env.PUBLIC_CHECKOUT_DOMAIN,
storeDomain: context.env.PUBLIC_STORE_DOMAIN,
}
});
export default async function handleRequest(
request: Request,
responseStatusCode: number,
responseHeaders: Headers,
remixContext: EntryContext,
context: AppLoadContext,
) {
const {nonce, header, NonceProvider} = createContentSecurityPolicy({
shop: {
checkoutDomain: context.env.PUBLIC_CHECKOUT_DOMAIN,
storeDomain: context.env.PUBLIC_STORE_DOMAIN,
}
});
declare global {
// ...
interface Env {
// ...
PUBLIC_CHECKOUT_DOMAIN: string;
}
}

Anchor to Activate the Shopify cookie bannerActivate the Shopify cookie banner

Note

You're responsible for ensuring that all analytics you're sending from your Hydrogen site are compliant with consent laws.

  1. From your Shopify admin, go to Settings > Customer Privacy > Cookie banner.
  2. Select the regions where your banner should display.
  3. (Optional) In the Appearance section, click Customize. Make any required changes to the wording, colors, or preferences, then click Save.
  4. (Optional) In the Position section, choose how you want the cookie banner to be positioned.
  5. Click Save.
  6. To display the Shopify cookie banner on your site, in your Hydrogen project pass in withPrivacyBanner: true in the consent prop.

Enable Shopify privacy banner

/app/routes/root.jsx
<Analytics.Provider
consent={
{
checkoutDomain: `ENV_PUBLIC_CHECKOUT_DOMAIN`,
storefrontAccessToken: `ENV_PUBLIC_STOREFRONT_API_TOKEN`,
withPrivacyBanner: true,
}
}
>
{ /* ... */ }
</Analytics.Provider>

This is what the default cookie banner looks like on the Hydrogen demo store:

Hydrogen demo store showing Shopify's default cookie permission banner

Anchor to Set a different language for the Shopify cookie banner (Optional)Set a different language for the Shopify cookie banner (Optional)

If you need to display the cookie banner in a different language, then specify the country and language in the consent config:

Enable Shopify privacy banner

/app/routes/root.jsx
<Analytics.Provider
consent={
{
checkoutDomain: `ENV_PUBLIC_CHECKOUT_DOMAIN`,
storefrontAccessToken: `ENV_PUBLIC_STOREFRONT_API_TOKEN`,
withPrivacyBanner: true,
// localize the privacy banner
country: storefront.i18n.country,
language: storefront.i18n.language,
}
}
>
{ /* ... */ }
</Analytics.Provider>

Anchor to TroubleshootingTroubleshooting

If the cookie banner doesn't display, then check the following:

  • The cookie banner won't work on default Oxygen URLs (*.myshopify.dev). Run the project locally or assign a domain to your Oxygen project.
  • Ensure your region is selected in Settings > Customer Privacy > Cookie banner > Regions.
  • Ensure that your checkout domain is set correctly.
  • Ensure that your content security policy is configured correctly.
  • Ensure that you've added the withPrivacyBanner: true option to your Analytics.Provider.

Anchor to Next stepsNext steps

Add Analytics tracking to Hydrogen

Manually implement analytics event tracking in Hydrogen, or upgrade an older project

Validate and troubleshoot Hydrogen analytics

Test that your analytics are working and check for common errors

Was this page helpful?