Issue Syncing OneTrust Consent with Shopify Customer Privacy API in Hydrogen

[ChrisWilTTI]

Hi everyone,

I'm working on integrating OneTrust’s cookie consent banner into our Hydrogen-based store and syncing the user’s choices with Shopify’s Customer Privacy API. My goal is to have the third‑party consent preferences (from OneTrust) automatically update Shopify’s tracking consent state using the customerPrivacy.setTrackingConsent method.

What I’ve Observed:

• OneTrust Behavior:
  The OneTrust banner loads correctly, and when the user accepts. I am able to create a consent object as such,

  { "marketing": true, "analytics": true, "preferences": true, "sale_of_data": true }

• Shopify’s Response:
  I call customerPrivacy.setTrackingConsent() method, after loading it via useAnalytics() However, immediately after the banner is dismissed, when i console.log  customerPrivacy.currentVisitorConsent(), it shows empty strings for each property. Even after a full page reload (or subsequent route navigation) it is also empty so is the _tracking_consent cookie.

• Cookies:
  The OptanonConsent cookie is updated correctly by OneTrust, and I also see Shopify’s _tracking_consent cookie being set, but its contents (e.g., "con":{"CMP":{"a":"","m":"","p":"","s":""}}) indicate that the consent values aren’t being registered as expected on the initial call.

• Network
  • https://monorail-edge.shopifysvc.com/v1/produce status is 200

Relevant Code Snippet:

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

export function OneTrustConsent() {
  const {register, customerPrivacy} = useAnalytics();
  const {ready} = register('OneTrustConsent');
  const oneTrustConsentStatus = useLoadScript(
    `https://cdn.cookielaw.org/scripttemplates/otSDKStub.js`,
    {
      in: 'head',
      attributes: {
        id: 'OneTrust',
        type: 'text/javascript',
        'data-domain-script': '',
        charset: 'UTF-8',
      },
    },
  );


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

    const activeGroups = window.OnetrustActiveGroups;
    if (!activeGroups) return;

    const analyticsCategory = 'C0002';
    const preferencesCategory = 'C0003';
    const sale_of_Data = 'C0004';

    const trackingConsent = {
      marketing: activeGroups.includes(sale_of_Data),
      analytics: activeGroups.includes(analyticsCategory),
      preferences: activeGroups.includes(preferencesCategory),
      sale_of_data: activeGroups.includes(sale_of_Data),
    };

    console.log('OneTrust Banner Consent', trackingConsent);

    customerPrivacy.setTrackingConsent(
     trackingConsent,
      (result) => {
        if (result?.error) {
          console.error('Error syncing with Shopify customer privacy:', result);
        } else {
          console.log('Shopify Customer Privacy updated:', result);
        }
        ready();

        setTimeout(() => {
          console.log(
            'Current Visitor Consent:',
            customerPrivacy.currentVisitorConsent(),
          );
          const trackingCookie = document.cookie.match(
            /_tracking_consent=([^;]+)/,
          );
          console.log(
            'Tracking Consent Cookie:',
            trackingCookie ? trackingCookie[1] : 'Not found',
          );
        }, 2000);
      },
    );

    console.log(
      'customerPrivacy consent',
      customerPrivacy.currentVisitorConsent(),
    );
  }, [customerPrivacy, ready]);

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

    if (
      window.OneTrust &&
      typeof window.OneTrust.OnConsentChanged === 'function'
    ) {
      window.OneTrust.OnConsentChanged(oneTrustSync);
    }

    oneTrustSync();
  }, [oneTrustConsentStatus, oneTrustSync]);

  return null;
}

My Questions:

1. Is it expected behavior that the updated consent from Shopify’s API (via customerPrivacy.currentVisitorConsent()) only appears on subsequent page loads?
2. Are there any known timing issues or best practices for ensuring that the call to setTrackingConsent isn’t being made too early?
3. Does anyone have suggestions or debugging tips for ensuring that the mapping and API call are working as intended (for example, verifying via Shopify admin tools or logging specific cookies)?
   
   
   

Store Info:

               "@shopify/cli": "^3.74.1",

"@shopify/hydrogen": "^2025.1.0",

"@shopify/remix-oxygen": "^2.0.10",

Any insights or recommendations would be greatly appreciated. Thanks in advance for your help!

[Matteocs95]

Hello, have you been able to solve it?

[ankitkumar-ot]

@ChrisWilTTIHow are you importing this component(OneTrustConsent) in main component?

[ankitkumar-ot]

@ChrisWilTTI You might want to try below snippet: 
You can pass devParameters as a parameter to drop the _tracking_consent cookies

const devParameters = {

headlessStorefront: true,

storefrontRootDomain: 'localhost'

};

customerPrivacy?.setTrackingConsent({

...trackingConsent,

// @ts-ignore

// This is for development purposes only, remove on production

...devParameters

}, (ev) => {

console.log('consent set', ev);

});