If you use a third-party service to track customer consent, then you'll need to connect it to Shopify’s [Customer Privacy API](/docs/api/customer-privacy).
## 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**.
1. Click **More actions** and select **Remove cookie banner**.
1. Click **Remove**.
## Step 3: 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 ``
We recommend using Hydrogen's built-in [``](/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.
You can access the [Customer Privacy API](/docs/api/customer-privacy) with the [`useAnalytics`](https://shopify.dev/docs/api/hydrogen/latest/hooks/useanalytics) hook.
### Method 2: Load the API manually with the `useCustomerPrivacy` hook
If you need to handle loading the Customer Privacy API yourself, Hydrogen's [`useCustomerPrivacy()`](/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:
#### (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.
## Step 4: 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:
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 `` 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:
Alternatively, pass your consent services setter function to `canTrack`
