use
hook
A hook that loads the Customer Privacy API.
You can get the customer privacy instance with .
Anchor to useCustomerPrivacy-parametersParameters
- Anchor to propspropsCustomerPrivacyApiPropsrequired
UseCustomerPrivacyGeneratedType
- props
CustomerPrivacyApiProps
export function useCustomerPrivacy(props: CustomerPrivacyApiProps) {
const {
withPrivacyBanner = true,
onVisitorConsentCollected,
onReady,
...consentConfig
} = props;
const loadedEvent = useRef(false);
const scriptStatus = useLoadScript(
withPrivacyBanner ? CONSENT_API_WITH_BANNER : CONSENT_API,
{
attributes: {
id: 'customer-privacy-api',
},
},
);
useEffect(() => {
const consentCollectedHandler = (
event: CustomEvent<VisitorConsentCollected>,
) => {
if (onVisitorConsentCollected) {
onVisitorConsentCollected(event.detail);
}
};
document.addEventListener(
'visitorConsentCollected',
consentCollectedHandler,
);
return () => {
document.removeEventListener(
'visitorConsentCollected',
consentCollectedHandler,
);
};
}, [onVisitorConsentCollected]);
useEffect(() => {
if (scriptStatus !== 'done' || loadedEvent.current) return;
loadedEvent.current = true;
if (!consentConfig.checkoutDomain) logMissingConfig('checkoutDomain');
if (!consentConfig.storefrontAccessToken)
logMissingConfig('storefrontAccessToken');
// validate that the storefront access token is not a server API token
if (
consentConfig.storefrontAccessToken.startsWith('shpat_') ||
consentConfig.storefrontAccessToken.length !== 32
) {
// eslint-disable-next-line no-console
console.error(
`[h2:error:useCustomerPrivacy] It looks like you passed a private access token, make sure to use the public token`,
);
}
if (withPrivacyBanner && window?.privacyBanner) {
window?.privacyBanner?.loadBanner({
checkoutRootDomain: consentConfig.checkoutDomain,
storefrontAccessToken: consentConfig.storefrontAccessToken,
});
}
if (!window.Shopify?.customerPrivacy) return;
// Override the setTrackingConsent method to include the headless storefront configuration
const originalSetTrackingConsent =
window.Shopify.customerPrivacy.setTrackingConsent;
function overrideSetTrackingConsent(
consent: VisitorConsent,
callback: (data: {error: string} | undefined) => void,
) {
originalSetTrackingConsent(
{
...consent,
headlessStorefront: true,
checkoutRootDomain: consentConfig.checkoutDomain,
storefrontAccessToken: consentConfig.storefrontAccessToken,
},
callback,
);
}
window.Shopify.customerPrivacy.setTrackingConsent =
overrideSetTrackingConsent;
onReady && onReady();
}, [scriptStatus, withPrivacyBanner, consentConfig]);
return;
}CustomerPrivacyApiProps
- checkoutDomain
The production shop checkout domain url.
string - 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 - onVisitorConsentCollected
Callback to be called when visitor consent is collected.
(consent: VisitorConsentCollected) => void - onReady
Callback to be call when customer privacy api is ready.
() => void
{
/** The production shop checkout domain url. */
checkoutDomain: string;
/** The storefront access token for the shop. */
storefrontAccessToken: string;
/** Whether to load the Shopify privacy banner as configured in Shopify admin. Defaults to true. */
withPrivacyBanner?: boolean;
/** Callback to be called when visitor consent is collected. */
onVisitorConsentCollected?: (consent: VisitorConsentCollected) => void;
/** Callback to be call when customer privacy api is ready. */
onReady?: () => void;
}VisitorConsentCollected
- analyticsAllowed
boolean - firstPartyMarketingAllowed
boolean - marketingAllowed
boolean - preferencesAllowed
boolean - saleOfDataAllowed
boolean - thirdPartyMarketingAllowed
boolean
{
analyticsAllowed: boolean;
firstPartyMarketingAllowed: boolean;
marketingAllowed: boolean;
preferencesAllowed: boolean;
saleOfDataAllowed: boolean;
thirdPartyMarketingAllowed: boolean;
}Was this section helpful?
Example
import {useCustomerPrivacy} from '@shopify/hydrogen';
export function MyComponent() {
useCustomerPrivacy({
storefrontAccessToken: '12345',
checkoutDomain: 'checkout.example.com',
onVisitorConsentCollected: (consent) => {
console.log('Visitor consent collected:', consent);
},
});
}
examples
example
description
This is the default example
JavaScript
import {useCustomerPrivacy} from '@shopify/hydrogen'; export function MyComponent() { useCustomerPrivacy({ storefrontAccessToken: '12345', checkoutDomain: 'checkout.example.com', onVisitorConsentCollected: (consent) => { console.log('Visitor consent collected:', consent); }, }); }TypeScript
import { type VisitorConsentCollected, useCustomerPrivacy, } from '@shopify/hydrogen'; export function MyComponent() { useCustomerPrivacy({ storefrontAccessToken: '12345', checkoutDomain: 'checkout.example.com', onVisitorConsentCollected: (consent: VisitorConsentCollected) => { console.log('Visitor consent collected:', consent); }, }); }
Anchor to examplesExamples
Example usage with :
Anchor to example-getcustomerprivacygetCustomerPrivacy
Returns the value of if it exists.
Was this section helpful?
JavaScript
import {getCustomerPrivacy} from '@shopify/hydrogen';
import {useEffect} from 'react';
export function MyComponent() {
useEffect(() => {
const customerPrivacy = getCustomerPrivacy();
if (customerPrivacy) {
console.log('Customer privacy:', customerPrivacy);
}
}, []);
}
examples
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); } }, []); }