---
title: Integrate third-party consent management with Hydrogen
description: Learn how to connect third-party consent management services with Shopify Analytics in Hydrogen.
source_url:
  html: https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/consent-3p
  md: https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/consent-3p.md
---

ExpandOn this page

* [Step 1: Remove the Shopify Cookie Banner](https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/consent-3p#step-1-remove-the-shopify-cookie-banner)
* [Step 2: Load the Customer Privacy API in Hydrogen](https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/consent-3p#step-2-load-the-customer-privacy-api-in-hydrogen)
* [Step 3: Sync your third-party settings with Shopify](https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/consent-3p#step-3-sync-your-third-party-settings-with-shopify)
* [Overriding tracking with can​Track (Optional)](https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/consent-3p#overriding-tracking-with-cantrack-optional)
* [Troubleshooting](https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/consent-3p#troubleshooting)
* [Next steps](https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/consent-3p#next-steps)

# Integrate third-party consent management with Hydrogen

If you use a third-party service to track customer consent, then you'll need to connect it to Shopify’s [Customer Privacy API](https://shopify.dev/docs/api/customer-privacy). You can also [use Shopify's built-in cookie banner](https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/consent) to get consent from your customers.

***

## Step 1: Remove the Shopify Cookie Banner

Remove the Shopify cookie banner while keeping the consent regions active. This allows you to use your third-party banner.

1. From your Shopify admin, go to **Settings > Customer Privacy > Cookie banner**.

2. Click **More actions** and select **Remove cookie banner**.

   ![Selecting](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/custom-storefronts/hydrogen/analytics/hydrogen-analytics-consent-cookie-deactivate-BcflSmRQ.png)

3. Click **Remove**.

   ![Confirmation modal to remove cookie banners](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/custom-storefronts/hydrogen/analytics/hydrogen-analytics-consent-cookie-deactivate-modal-5p-ZzGq4.png)

***

## Step 2: Load the Customer Privacy API in Hydrogen

Switch to your Hydrogen codebase and load the Customer Privacy API to track consent:

Note

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

### Method 1 (recommended): Use `<Analytics.Provider>`

We recommend using Hydrogen's built-in [`<Analytics.Provider>`](https://shopify.dev/docs/api/hydrogen/current/components/analytics/analytics-provider) component. It automatically handles publishing and subscribing to analytics events and handles loading the Customer Privacy API for you.

## Set up analytics provider with your 3p consent management tool

/app/routes/root.jsx

```jsx
<Analytics.Provider
  ...
>
  ...
  <ThirdPartyConsent />
</Analytics.Provider>
```

You can access the [Customer Privacy API](https://shopify.dev/docs/api/customer-privacy) with the [`useAnalytics`](https://shopify.dev/docs/api/hydrogen/latest/hooks/useanalytics) hook.

## Use the Customer Privacy API with a hook

/app/components/Your3PConsentManagementTool.jsx

```jsx
export function ThirdPartyConsent() {
  const { register, customerPrivacy } = useAnalytics();
  const { ready } = register('ThirdPartyConsent');


  // Set up your 3P consent management tool


  useEffect(() => {
    // If you're having race condition on when this function is available,
    // you can consider wrapping this function call inside a document event listener,
    // listening for `shopifyCustomerPrivacyApiLoaded` event
    customerPrivacy.setTrackingConsent(
      {
        marketing: getThirdPartyConsentStatus('marketing'),
        analytics: getThirdPartyConsentStatus('analytics'),
        preferences: getThirdPartyConsentStatus('preferences'),
        sale_of_data: getThirdPartyConsentStatus('sale_of_data'),
      },
      (result: { error: string } | undefined) => {
        if (result?.error) {
          console.error(
            'Error syncing ThirdParty with Shopify customer privacy',
            result,
          );
          return;
        }


        ready();
      });
  }, []);
}
```

### Method 2: Load the API manually with the `useCustomerPrivacy` hook

If you need to handle loading the Customer Privacy API yourself, Hydrogen's [`useCustomerPrivacy()`](https://shopify.dev/docs/api/hydrogen/current/hooks/usecustomerprivacy) hook gives you a method for awaiting the API. This avoids race conditions caused by loading multiple scripts asynchronously:

## Load the Customer Privacy API via hook

/app/components/Your3PConsentManagementTool.jsx

```jsx
const [customerPrivacyReady, setCustomerPrivacyReady] = useState(false);
useCustomerPrivacy({
  checkoutDomain: <YOUR_CHECKOUT_DOMAIN>,
  storefrontAccessToken: <YOUR_PUBLIC_STOREFRONT_API_TOKEN>
  onReady: () => {
    setCustomerPrivacyReady(true);
  }
});
```

#### (Optional) Listen to the Customer Privacy on ready event

You can listen to the Customer Privacy API on ready event by listening to the [`shopifyCustomerPrivacyApiLoaded`](https://shopify.dev/docs/api/hydrogen/latest/hooks/usecustomerprivacy) document event.

## Listen to customer privacy on ready event

/app/components/Your3PConsentManagementTool.jsx

```jsx
useEffect(() => {
  document.addEventListener('shopifyCustomerPrivacyApiLoaded', () => {
    console.log('Shopify Customer Privacy API loaded');
  });
})
```

***

## Step 3: Sync your third-party settings with Shopify

After the Customer Privacy API is loaded, you can integrate your consent provider's SDK and pass consent preferences to Shopify. Check your provider's documentation for specific details on retrieving the data you need.

### Example Implementation

The following example shows how you can integrate a third-party consent management tool with Shopify Analytics in Hydrogen:

## Sync consent settings with Shopify

## /app/components/ThirdPartyConsent.jsx

```jsx
import {
  useAnalytics,
  useLoadScript,
} from '@shopify/hydrogen';
import { useEffect, useCallback } from 'react';


const thirdPartyConsentSdkUrl = `https://cdn.thirdpartyconsent.com/sdk.js`;


export function ThirdPartyConsent() {
  const { register, customerPrivacy } = useAnalytics();
  const { ready } = register('ThirdPartyConsent');
  const thirdPartyConsentSdkStatus = useLoadScript(thirdPartyConsentSdkUrl);


  const thirdPartyConsentCallback = useCallback(() => {
    if (!consent || !consent?.setTrackingConsent) {
      return;
    }


    const trackingConsent = {
      marketing: getThirdPartyConsentStatus('marketing'),
      analytics: getThirdPartyConsentStatus('analytics'),
      preferences: getThirdPartyConsentStatus('preferences'),
      sale_of_data: getThirdPartyConsentStatus('sale_of_data'),
    }


    customerPrivacy.setTrackingConsent(
      trackingConsent,
      (result: { error: string } | undefined) => {
        if (result?.error) {
          console.error(
            'Error syncing ThirdParty with Shopify customer privacy',
            result,
          );
          return;
        }


        ready();
      },
    );
  }, [customerPrivacy, ready]);


  useEffect(() => {
    if (thirdPartyConsentSdkStatus !== 'done') {
      return;
    }


    window.ThirdPartyConsent.onChange = thirdPartyConsentCallback;
    thirdPartyConsentCallback();
  }, [thirdPartyConsentCallback, thirdPartyConsentSdkStatus]);


  return null;
}


export function getThirdPartyConsentStatus(type): boolean {
  try {
    return window.ThirdPartyConsent.types.includes(type);
  } catch (e) {
    return false;
  }
}
```

```tsx
import {
  useAnalytics,
  useLoadScript,
} from '@shopify/hydrogen';
import { useEffect, useCallback } from 'react';


type ThirdPartyConsentType = 'marketing' | 'analytics' | 'preferences' | 'sale_of_data';


declare global {
  interface Window {
    ThirdPartyConsent: {
      onChange: (consent: any) => void;
      types: Array<ThirdPartyConsentType>;
    }
  }
}


const thirdPartyConsentSdkUrl = `https://cdn.thirdpartyconsent.com/sdk.js`;


export function ThirdPartyConsent() {
  const { register, customerPrivacy } = useAnalytics();
  const { ready } = register('ThirdPartyConsent');
  const thirdPartyConsentSdkStatus = useLoadScript(thirdPartyConsentSdkUrl);


  const thirdPartyConsentCallback = useCallback(() => {
    if (!consent || !consent?.setTrackingConsent) {
      return;
    }


    const trackingConsent = {
      marketing: getThirdPartyConsentStatus('marketing'),
      analytics: getThirdPartyConsentStatus('analytics'),
      preferences: getThirdPartyConsentStatus('preferences'),
      sale_of_data: getThirdPartyConsentStatus('sale_of_data'),
    }


    customerPrivacy.setTrackingConsent(
      trackingConsent,
      (result: { error: string } | undefined) => {
        if (result?.error) {
          console.error(
            'Error syncing ThirdParty with Shopify customer privacy',
            result,
          );
          return;
        }


        ready();
      },
    );
  }, [customerPrivacy, ready]);


  useEffect(() => {
    if (thirdPartyConsentSdkStatus !== 'done') {
      return;
    }


    window.ThirdPartyConsent.onChange = thirdPartyConsentCallback;
    thirdPartyConsentCallback();
  }, [thirdPartyConsentCallback, thirdPartyConsentSdkStatus]);


  return null;
}


export function getThirdPartyConsentStatus(
  type: ThirdPartyConsentType,
): boolean {
  try {
    return window.ThirdPartyConsent.types.includes(type);
  } catch (e) {
    return false;
  }
}
```

##### JavaScript

```
import {
  useAnalytics,
  useLoadScript,
} from '@shopify/hydrogen';
import { useEffect, useCallback } from 'react';

const thirdPartyConsentSdkUrl = `https://cdn.thirdpartyconsent.com/sdk.js`;

export function ThirdPartyConsent() {
  const { register, customerPrivacy } = useAnalytics();
  const { ready } = register('ThirdPartyConsent');
  const thirdPartyConsentSdkStatus = useLoadScript(thirdPartyConsentSdkUrl);

  const thirdPartyConsentCallback = useCallback(() => {
    if (!consent || !consent?.setTrackingConsent) {
      return;
    }

    const trackingConsent = {
      marketing: getThirdPartyConsentStatus('marketing'),
      analytics: getThirdPartyConsentStatus('analytics'),
      preferences: getThirdPartyConsentStatus('preferences'),
      sale_of_data: getThirdPartyConsentStatus('sale_of_data'),
    }

    customerPrivacy.setTrackingConsent(
      trackingConsent,
      (result: { error: string } | undefined) => {
        if (result?.error) {
          console.error(
            'Error syncing ThirdParty with Shopify customer privacy',
            result,
          );
          return;
        }

        ready();
      },
    );
  }, [customerPrivacy, ready]);

  useEffect(() => {
    if (thirdPartyConsentSdkStatus !== 'done') {
      return;
    }

    window.ThirdPartyConsent.onChange = thirdPartyConsentCallback;
    thirdPartyConsentCallback();
  }, [thirdPartyConsentCallback, thirdPartyConsentSdkStatus]);

  return null;
}

export function getThirdPartyConsentStatus(type): boolean {
  try {
    return window.ThirdPartyConsent.types.includes(type);
  } catch (e) {
    return false;
  }
}
```

##### TypeScript

```
import {
  useAnalytics,
  useLoadScript,
} from '@shopify/hydrogen';
import { useEffect, useCallback } from 'react';

type ThirdPartyConsentType = 'marketing' | 'analytics' | 'preferences' | 'sale_of_data';

declare global {
  interface Window {
    ThirdPartyConsent: {
      onChange: (consent: any) => void;
      types: Array<ThirdPartyConsentType>;
    }
  }
}

const thirdPartyConsentSdkUrl = `https://cdn.thirdpartyconsent.com/sdk.js`;

export function ThirdPartyConsent() {
  const { register, customerPrivacy } = useAnalytics();
  const { ready } = register('ThirdPartyConsent');
  const thirdPartyConsentSdkStatus = useLoadScript(thirdPartyConsentSdkUrl);

  const thirdPartyConsentCallback = useCallback(() => {
    if (!consent || !consent?.setTrackingConsent) {
      return;
    }

    const trackingConsent = {
      marketing: getThirdPartyConsentStatus('marketing'),
      analytics: getThirdPartyConsentStatus('analytics'),
      preferences: getThirdPartyConsentStatus('preferences'),
      sale_of_data: getThirdPartyConsentStatus('sale_of_data'),
    }

    customerPrivacy.setTrackingConsent(
      trackingConsent,
      (result: { error: string } | undefined) => {
        if (result?.error) {
          console.error(
            'Error syncing ThirdParty with Shopify customer privacy',
            result,
          );
          return;
        }

        ready();
      },
    );
  }, [customerPrivacy, ready]);

  useEffect(() => {
    if (thirdPartyConsentSdkStatus !== 'done') {
      return;
    }

    window.ThirdPartyConsent.onChange = thirdPartyConsentCallback;
    thirdPartyConsentCallback();
  }, [thirdPartyConsentCallback, thirdPartyConsentSdkStatus]);

  return null;
}

export function getThirdPartyConsentStatus(
  type: ThirdPartyConsentType,
): boolean {
  try {
    return window.ThirdPartyConsent.types.includes(type);
  } catch (e) {
    return false;
  }
}
```

At this point, your Hydrogen storefront should be connected to both your third-party provider and Shopify's Customer Privacy API. This setup helps synchronize customer preferences seamlessly.

Check with your provider for documentation on testing your integration. Not all consent management tools can be tested locally.

***

## Overriding tracking with `canTrack` (Optional)

You can customize the `<Analytics.Provider>` component with the `canTrack` prop, which controls whether analytics events can be published for the current session.

By default, `canTrack` returns the value of `window.Shopify.customerPrivacy.analyticsProcessingAllowed()`. You can also pass a custom function if needed. Make sure that this function only renders on the client and not on the server:

## Override canTrack

/app/routes/root.jsx

```jsx
<Analytics.Provider
  canTrack={() => {
    try {
      return window.some3PConsentTool.getConsent(); // Boolean
    } catch (e) {
      return false;
    }
  }}
>
  { /* ... */ }
</Analytics.Provider>
```

Alternatively, pass your consent services setter function to `canTrack`

## Override canTrack alternate

/app/routes/root.jsx

```jsx
import {getThirdPartyConsentStatus} from "~/components/ThirdPartyConsent"


<Analytics.Provider
  canTrack={() => {
    return getThirdPartyConsentStatus('analytics')
  }}
>
  { /* ... */ }
</Analytics.Provider>
```

***

## Troubleshooting

* Make sure that [source maps](https://shopify.dev/docs/storefronts/headless/hydrogen/debugging/error-console#accessing-the-error-console) are enabled. This makes it easier to debug any issues with analytics tracking.
* If analytics tracking fails when users navigate to the checkout page, make sure that the `_tracking_consent` cookie is set to your checkout domain. For example, if your checkout domain is `checkout.your-site.com` then your `_tracking_consent` cookie should be `.your-site.com`.

***

## Next steps

[![](https://shopify.dev/images/icons/48/analytics.png)![](https://shopify.dev/images/icons/48/analytics-dark.png)](https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/tracking)

[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)

[![](https://shopify.dev/images/icons/48/clicode.png)![](https://shopify.dev/images/icons/48/clicode-dark.png)](https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/validation)

[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: Remove the Shopify Cookie Banner](https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/consent-3p#step-1-remove-the-shopify-cookie-banner)
* [Step 2: Load the Customer Privacy API in Hydrogen](https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/consent-3p#step-2-load-the-customer-privacy-api-in-hydrogen)
* [Step 3: Sync your third-party settings with Shopify](https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/consent-3p#step-3-sync-your-third-party-settings-with-shopify)
* [Overriding tracking with can​Track (Optional)](https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/consent-3p#overriding-tracking-with-cantrack-optional)
* [Troubleshooting](https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/consent-3p#troubleshooting)
* [Next steps](https://shopify.dev/docs/storefronts/headless/hydrogen/analytics/consent-3p#next-steps)