---
title: Get consent for analytics and customer privacy
description: >-
  Learn how to configure customer consent before implementing analytics
  tracking.
source_url:
  html: 'https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/consent'
  md: 'https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/consent.md'
---

ExpandOn this page

* [Step 1: Configure your Hydrogen checkout domain](https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/consent.md#step-1-configure-your-hydrogen-checkout-domain)
* [Step 2: Add your domains to your content security policy](https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/consent.md#step-2-add-your-domains-to-your-content-security-policy)
* [Step 3: Activate the Shopify cookie banner](https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/consent.md#step-3-activate-the-shopify-cookie-banner)
* [Step 4 (Optional): Set a different language for the Shopify cookie banner](https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/consent.md#step-4-optional-set-a-different-language-for-the-shopify-cookie-banner)
* [Troubleshooting](https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/consent.md#troubleshooting)
* [Next steps](https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/consent.md#next-steps)

# Get consent for analytics and customer privacy

You need to get consent from your storefront visitors before collecting analytics if you serve customers in regions with privacy laws (like GDPR in the EU or CCPA in California), use tracking cookies, or collect personal data.

This guide shows you how to use Shopify's built-in cookie banner to get consent from your customers. You can also [use third-party services](https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/consent-3p) to manage consent.

***

## Step 1: Configure your Hydrogen checkout domain

Some consent settings require the specific domain names for your store. 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](https://shopify.dev/assets/assets/images/custom-storefronts/hydrogen/analytics/hydrogen-analytics-checkout-domain-CaihJmmT.png)

***

## Step 2: Add your domains to your content security policy

Make sure both your store and checkout domains are included in your [content security policy](https://shopify.dev/docs/storefronts/headless/hydrogen/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

```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,
    }
  });
```

```tsx
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,
    }
  });
```

```ts
declare global {
  // ...
  interface Env {
    // ...
    PUBLIC_CHECKOUT_DOMAIN: string;
  }
}
```

##### JavaScript

```
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,
    }
  });
```

##### TypeScript

```
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,
    }
  });
```

##### Type declaration file

```
declare global {
  // ...
  interface Env {
    // ...
    PUBLIC_CHECKOUT_DOMAIN: string;
  }
}
```

***

## Step 3: Activate 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

```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](https://shopify.dev/assets/assets/images/custom-storefronts/hydrogen/analytics/hydrogen-analytics-cookie-banner-example-B73bjP6b.png)

***

## Step 4 (Optional): Set a different language for the Shopify cookie banner

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

```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>
```

***

## Troubleshooting

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](#add-your-domains-to-your-content-security-policy) is configured correctly.
* Ensure that you've added the `withPrivacyBanner: true` option to your `Analytics.Provider`.

***

## Next steps

[Add Analytics tracking to Hydrogen\
\
](https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/tracking)

[Manually implement analytics event tracking in Hydrogen, or upgrade an older project](https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/tracking)

[Validate and troubleshoot Hydrogen analytics\
\
](https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/validation)

[Test that your analytics are working and check for common errors](https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/validation)

***

* [Step 1: Configure your Hydrogen checkout domain](https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/consent.md#step-1-configure-your-hydrogen-checkout-domain)
* [Step 2: Add your domains to your content security policy](https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/consent.md#step-2-add-your-domains-to-your-content-security-policy)
* [Step 3: Activate the Shopify cookie banner](https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/consent.md#step-3-activate-the-shopify-cookie-banner)
* [Step 4 (Optional): Set a different language for the Shopify cookie banner](https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/consent.md#step-4-optional-set-a-different-language-for-the-shopify-cookie-banner)
* [Troubleshooting](https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/consent.md#troubleshooting)
* [Next steps](https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/consent.md#next-steps)