Choose a version:

useCustomerPrivacy

A hook that loads the Customer Privacy API. When using Hydrogen's request handler, the Storefront API proxy is automatically detected and used for consent requests.

You can also listen to a document event for shopifyCustomerPrivacyApiLoaded. It will be emitted when the Customer Privacy API is loaded.

Anchor to useCustomerPrivacy
useCustomerPrivacy(
props
)

Anchor to useCustomerPrivacy-parametersParameters

Anchor to props props required

CustomerPrivacyApiProps

checkoutDomain
The production shop checkout domain url.
```
string
```
country
Country code for the shop.
```
CountryCode
```
locale
Language code for the shop.
```
LanguageCode
```
onReady
Callback to be call when customer privacy api is ready.
```
() => void
```
onVisitorConsentCollected
Callback to be called when visitor consent is collected.
```
(consent: VisitorConsentCollected) => void
```
sameDomainForStorefrontApi
Whether consent libraries can use same-domain requests to the Storefront API. Defaults to true if the standard route proxy is enabled in Hydrogen server.
```
boolean
```
storefrontAccessToken
The storefront access token for the shop.
```
string
```
withPrivacyBanner
Whether to load the Shopify privacy banner as configured in Shopify admin. Defaults to true.
```
boolean
```

VisitorConsentCollected

analyticsAllowed
```
boolean
```
firstPartyMarketingAllowed
```
boolean
```
marketingAllowed
```
boolean
```
preferencesAllowed
```
boolean
```
saleOfDataAllowed
```
boolean
```
thirdPartyMarketingAllowed
```
boolean
```

Examples

import {useCustomerPrivacy} from '@shopify/hydrogen';

import {useEffect} from 'react';

export function MyComponent() {

const {customerPrivacy, privacyBanner = null} = useCustomerPrivacy({

storefrontAccessToken: '12345',

checkoutDomain: 'checkout.example.com',

onVisitorConsentCollected: (consent) => {

console.log('Visitor consent collected:', consent);

});

useEffect(() => {

if (customerPrivacy) {

// check if user has marketing consent

console.log(

'User marketing consent:',

customerPrivacy.analyticsProcessingAllowed(),

);

// or set tracking consent

customerPrivacy.setTrackingConsent(

{

marketing: true,

analytics: true,

preferences: true,

sale_of_data: true,

(data) => {

if (data?.error) {

console.error('Error setting tracking consent:', data.error);

return;

}

console.log('Tracking consent set');

);

}

if (privacyBanner) {

privacyBanner.loadBanner();

// or show banner with specific locale and country

// privacyBanner.loadBanner({locale: 'FR', country: 'CA'});

// or show consent preferences banner

// privacyBanner.showPreferences()

// or show consent preferences banner with specific locale and country

// privacyBanner.showPreferences({locale: 'FR', country: 'CA'});

}

}, [customerPrivacy, privacyBanner]);

}

Examples

Example

JavaScript

import {useCustomerPrivacy} from '@shopify/hydrogen';
import {useEffect} from 'react';

export function MyComponent() {
  const {customerPrivacy, privacyBanner = null} = useCustomerPrivacy({
    storefrontAccessToken: '12345',
    checkoutDomain: 'checkout.example.com',
    onVisitorConsentCollected: (consent) => {
      console.log('Visitor consent collected:', consent);
    },
  });

  useEffect(() => {
    if (customerPrivacy) {
      // check if user has marketing consent
      console.log(
        'User marketing consent:',
        customerPrivacy.analyticsProcessingAllowed(),
      );

      // or set tracking consent
      customerPrivacy.setTrackingConsent(
        {
          marketing: true,
          analytics: true,
          preferences: true,
          sale_of_data: true,
        },
        (data) => {
          if (data?.error) {
            console.error('Error setting tracking consent:', data.error);
            return;
          }
          console.log('Tracking consent set');
        },
      );
    }

    if (privacyBanner) {
      privacyBanner.loadBanner();

      // or show banner with specific locale and country
      // privacyBanner.loadBanner({locale: 'FR', country: 'CA'});

      // or show consent preferences banner
      // privacyBanner.showPreferences()

      // or show consent preferences banner with specific locale and country
      // privacyBanner.showPreferences({locale: 'FR', country: 'CA'});
    }
  }, [customerPrivacy, privacyBanner]);
}

TypeScript

import {
  type VisitorConsentCollected,
  useCustomerPrivacy,
} from '@shopify/hydrogen';
import {useEffect} from 'react';

export function MyComponent() {
  const {customerPrivacy, privacyBanner = null} = useCustomerPrivacy({
    storefrontAccessToken: '12345',
    checkoutDomain: 'checkout.example.com',
    onVisitorConsentCollected: (consent: VisitorConsentCollected) => {
      console.log('Visitor consent collected:', consent);
    },
  });

  useEffect(() => {
    if (customerPrivacy) {
      // check if user has marketing consent
      console.log(
        'User marketing consent:',
        customerPrivacy.analyticsProcessingAllowed(),
      );

      // or set tracking consent
      customerPrivacy.setTrackingConsent(
        {
          marketing: true,
          analytics: true,
          preferences: true,
          sale_of_data: true,
        },
        (data) => {
          if (data?.error) {
            console.error('Error setting tracking consent:', data.error);
            return;
          }
          console.log('Tracking consent set');
        },
      );
    }

    if (privacyBanner) {
      privacyBanner.loadBanner();

      // or show banner with specific locale and country
      // privacyBanner.loadBanner({locale: 'FR', country: 'CA'});

      // or show consent preferences banner
      // privacyBanner.showPreferences()

      // or show consent preferences banner with specific locale and country
      // privacyBanner.showPreferences({locale: 'FR', country: 'CA'});
    }
  }, [customerPrivacy, privacyBanner]);
}

Was this page helpful?

Anchor to useCustomerPrivacyuseCustomerPrivacy(propsprops)

Anchor to useCustomerPrivacy-parametersParameters

CustomerPrivacyApiProps

VisitorConsentCollected

Anchor to useCustomerPrivacy
useCustomerPrivacy(
props
)