Skip to main content

Customer Privacy
API

Requires access to protected customer data for some properties.

The API for interacting with a customer's privacy consent. It is similar to the Customer Privacy API in storefront.

Anchor to standardapiStandardApi

The base API object provided to this and other customer-account extension targets.

Anchor to applyTrackingConsentChange
applyTrackingConsentChange
required

Allows setting and updating customer privacy consent settings and tracking consent metafields.

Note

Requires the customer_privacy capability to be set to true.

Requires access to protected customer data.

Anchor to customerPrivacy
customerPrivacy
<>
required

Customer privacy consent settings and a flag denoting if consent has previously been collected.

Was this section helpful?

Extension.jsx

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default async () => {
render(<Extension />, document.body);
};

function Extension() {
const visitorConsent =
shopify.customerPrivacy.value
.visitorConsent || {};

// Use consent values
console.log(
'analytics',
visitorConsent.analytics,
);
console.log(
'marketing',
visitorConsent.marketing,
);
console.log(
'preferences',
visitorConsent.preferences,
);
console.log(
'saleOfData',
visitorConsent.saleOfData,
);

return null;
}

Anchor to examplesExamples

Anchor to example-use-a-sheet-to-manage-customer-privacy-consentUse a Sheet to manage customer privacy consent

You can apply changes to customer consent by using the applyTrackingConsentChanges API.

Note

Requires the customer_privacy capability to be set to true.

Was this section helpful?

Use a Sheet to manage customer privacy consent

Extension.jsx

import '@shopify/ui-extensions/preact';
import {render} from 'preact';
import {useState, useRef} from 'preact/hooks';

export default async () => {
render(<Extension />, document.body);
};

function Extension() {
const {
shouldShowBanner,
visitorConsent: {
analytics,
marketing,
preferences,
saleOfData,
},
} = shopify.customerPrivacy.value;

const [
consentFormValues,
setConsentFormValues,
] = useState({
analytics,
marketing,
preferences,
saleOfData,
});

const sheetId = 'sheet-consent';
const modalId = 'modal-consent';
const sheetRef = useRef();
const modalRef = useRef();

const getCheckboxOnChangeHandler = (key) => {
return function (event) {