---
title: useCustomerPrivacy
description: |-
  A hook that loads the [Customer Privacy API](/docs/api/customer-privacy).

  You can also listen to a `document` event for `shopifyCustomerPrivacyApiLoaded`. It will be emitted when the Customer Privacy API is loaded.
api_version: 2025-05
api_name: hydrogen
source_url:
  html: https://shopify.dev/docs/api/hydrogen/latest/hooks/usecustomerprivacy
  md: https://shopify.dev/docs/api/hydrogen/latest/hooks/usecustomerprivacy.md
---

# use​Customer​Privacyhook

A hook that loads the [Customer Privacy API](https://shopify.dev/docs/api/customer-privacy).

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

## use​Customer​Privacy([props](#-propertydetail-props)​)

### Parameters

* props

  CustomerPrivacyApiProps

  required

### CustomerPrivacyApiProps

* checkoutDomain

  The production shop checkout domain url.

  ```ts
  string
  ```

* country

  Country code for the shop.

  ```ts
  CountryCode
  ```

* locale

  Language code for the shop.

  ```ts
  LanguageCode
  ```

* onReady

  Callback to be call when customer privacy api is ready.

  ```ts
  () => void
  ```

* onVisitorConsentCollected

  Callback to be called when visitor consent is collected.

  ```ts
  (consent: VisitorConsentCollected) => void
  ```

* storefrontAccessToken

  The storefront access token for the shop.

  ```ts
  string
  ```

* withPrivacyBanner

  Whether to load the Shopify privacy banner as configured in Shopify admin. Defaults to true.

  ```ts
  boolean
  ```

```ts
{
  /** 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;
  /** Country code for the shop. */
  country?: CountryCode;
  /** Language code for the shop. */
  locale?: LanguageCode;
  /** 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

  ```ts
  boolean
  ```

* firstPartyMarketingAllowed

  ```ts
  boolean
  ```

* marketingAllowed

  ```ts
  boolean
  ```

* preferencesAllowed

  ```ts
  boolean
  ```

* saleOfDataAllowed

  ```ts
  boolean
  ```

* thirdPartyMarketingAllowed

  ```ts
  boolean
  ```

```ts
{
  analyticsAllowed: boolean;
  firstPartyMarketingAllowed: boolean;
  marketingAllowed: boolean;
  preferencesAllowed: boolean;
  saleOfDataAllowed: boolean;
  thirdPartyMarketingAllowed: boolean;
}
```

### Examples

* #### example

  ##### Description

  This is the default example

  ##### JavaScript

  ```js
  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

  ```ts
  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]);
  }
  ```

## Examples

Example usage with `useAnalytics`:

### useCustomerPrivacy

Returns the value of `window.Shopify.customerPrivacy` if it exists.

### Examples

* ####

  ##### Description

  Returns the value of \`window\.Shopify.customerPrivacy\` if it exists.

  ##### JavaScript

  ```js
  import {getCustomerPrivacy} from '@shopify/hydrogen';
  import {useEffect} from 'react';

  export function MyComponent() {
    useEffect(() => {
      const customerPrivacy = getCustomerPrivacy();
      if (customerPrivacy) {
        console.log('Customer privacy:', customerPrivacy);
      }
    }, []);
  }
  ```