Using third-party consent tracking services with Hydrogen

Activate the cookie banner to enable consent regions. (We'll turn the Shopify banner off in the next step.)

1. From your Shopify admin, go to Settings > Customer Privacy > Cookie banner.
   • If you already have consent regions active, skip to Step 2.
2. Click Activate cookie banner.
3. Select the regions you want to include.
4. Click Activate.

To use a third-party service, deactivate the Shopify cookie banner, but keep your consent regions active:

1. From your Shopify admin, go to Settings > Customer Privacy > Cookie banner.
2. Click on More actions and select Turn off cookie banner.

   

3. Select Turn off cookie banner but keep selected regions enabled.

   

4. Click Turn off.

Switch to your Hydrogen codebase. Check the Customer Privacy API for tracking consent:

We recommend using Hydrogen's built-in <Analytics.Provider> component. It automatically handles publishing and subscribing to analytics events, and handles loading the Customer Privacy API for you.

If you need to handle loading the Customer Privacy API yourself, Hydrogen's useCustomerPrivacy() hook gives you a method for awaiting the API. This avoids race conditions caused by loading multiple scripts asynchronously:

Once the Customer Privacy API is loaded, you need to fetch the relevant settings from your third-party provider and sync them with Shopify. Check your provider's documentation for specific details on retrieving the data you need.

This example code gives an idea of a basic implementation:

At this point, your Hydrogen storefront is connected both to your third-party provider and Shopify's Customer Privacy API, and can synchronize customer preferences between them.

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

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(), but you can also pass a custom function if needed. Ensure that this function only renders on the client and not on the server: