Issue Syncing OneTrust Consent with Shopify Customer Privacy API in Hydrogen

Hydrogen and Storefront APIs
,
1

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.

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(
      {
        marketing: true,
        sale_of_data: true,
        analytics: true,
        preferences: true,
      },
      (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;
}

Copy

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 so much in advance for your help!