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.
Step 1: Remove the Shopify Cookie Banner
Anchor link to section titled "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.
- From your Shopify admin, go to Settings > Customer Privacy > Cookie banner.
- Click More actions and select Remove cookie banner.
- Click Remove.
Step 3: Load the Customer Privacy API in Hydrogen
Anchor link to section titled "Step 3: Load the Customer Privacy API in Hydrogen"Switch to your Hydrogen codebase and load the Customer Privacy API to track consent:
Method 1 (recommended): Use <Analytics.Provider>
Anchor link to section titled "Method 1 (recommended): Use 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.
You can access the Customer Privacy API with the useAnalytics hook.
Method 2: Load the API manually with the useCustomerPrivacy hook
Anchor link to section titled "Method 2: Load the API manually with the useCustomerPrivacy hook"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:
(Optional) Listen to the Customer Privacy on ready event
Anchor link to section titled "(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 document event.
Step 4: Sync your third-party settings with Shopify
Anchor link to section titled "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
Anchor link to section titled "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)
Anchor link to section titled "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:
Alternatively, pass your consent services setter function to canTrack