use
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 . It will be emitted when the Customer Privacy API is loaded.
Anchor to useCustomerPrivacy-parametersParameters
- Anchor to propspropspropsCustomerPrivacyApiPropsCustomerPrivacyApiPropsrequiredrequired
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
Description
This is the default 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]); }Description
Returns the value of `window.Shopify.customerPrivacy` if it exists.
JavaScript
import {getCustomerPrivacy} from '@shopify/hydrogen'; import {useEffect} from 'react'; export function MyComponent() { useEffect(() => { const customerPrivacy = getCustomerPrivacy(); if (customerPrivacy) { console.log('Customer privacy:', customerPrivacy); } }, []); }
Was this page helpful?