Pixel Privacy

In order to comply with international privacy regulations, Shopify provides a way for merchants to manage their pixels and the data they collect. This guide will help you understand how to set up customer privacy settings for App and Custom pixels, and how to use the customerPrivacy API to manually handle pixel privacy behavior.

App Pixels Privacy Settings

When creating app pixels, you can define the customer privacy settings that your pixel requires within your `shopify.extension.toml` file. Shopify's pixel manager will only load your pixel if there is visitor permission for all of the settings that your pixels declares as required. For more information, visit the [App Pixel Tutorial](https://shopify.dev/docs/apps/marketing/pixels/getting-started) documentation.

App Pixels Privacy Settings

type = "web_pixel_extension"
name = "web pixel"

runtime_context = "strict"

# This pixel will only load when there is permission for analytics, marketing and sale of data
[customer_privacy]
analytics = true
marketing = true
preferences = false
sale_of_data = "enabled"

[settings]
type = "object"

[settings.fields.pixelID]
name = "Pixel ID"
description = "Pixel ID"
type = "single_line_text_field"
validations =  [
  { name = "min", value = "1" }
]

Custom Pixels Privacy Settings

When creating custom pixels, you can define the customer privacy settings that your pixel requires directly within the user interface. For more information please visit the [Custom Pixel](https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/manage) documentation.

Customer Privacy API

Shopify provides Standard APIs to allow pixels to query the initial customer privacy permissions on a page and listen to any subsequent updates to consent. To query the initial customer privacy permissions, use the `init.customerPrivacy` API. You may assign this value to a variable to keep track of it throughout the lifecycle of your pixel. If consent changes without a page refresh (i.e. customer provides consent through a banner), you can adjust this value using the `customerPrivacy` Standard API. This API allows you to subscribe to the `visitorConsentCollected` event and apply any changes when consent is given. Using these APIs, you can manually handle any privacy related behavior inside a pixel sandbox.

Customer Privacy API

import {register} from '@shopify/web-pixels-extension';

register(({analytics, init, customerPrivacy}) => {
  // Use the init.customerPrivacy object to get the initial customer privacy status
  let customerPrivacyStatus = init.customerPrivacy;

  // Use the customerPrivacy Standard API to subscribe to consent collected events and update the status
  customerPrivacy.subscribe('visitorConsentCollected', (event) => {
    customerPrivacyStatus = event.customerPrivacy;
    /**
     * {
     *   "analyticsProcessingAllowed": boolean,
     *   "marketingAllowed": boolean,
     *   "preferencesProcessingAllowed": boolean,
     *   "saleOfDataAllowed": boolean,
     * }
     */
  })

  // Every product added to cart event will have the most up to date customer privacy status
  analytics.subscribe("product_added_to_cart", event => { 
    const payload = {
      eventName: event.name,
      customerPrivacyStatus: customerPrivacyStatus,
    };

    fetch('https://example.com/pixel', {
      method: 'POST',
      body: JSON.stringify(payload),
      keepalive: true,
    });
  });
});

let customerPrivacyStatus = init.customerPrivacy;

// Use the customerPrivacy Standard API to subscribe to consent collected events and update the status
api.customerPrivacy.subscribe('visitorConsentCollected', (event) => {
  customerPrivacyStatus = event.customerPrivacy;
  /**
   * {
   *   "analyticsProcessingAllowed": boolean,
   *   "marketingAllowed": boolean,
   *   "preferencesProcessingAllowed": boolean,
   *   "saleOfDataAllowed": boolean,
   * }
   */
})

// Every product added to cart event will have the most up to date customer privacy status
analytics.subscribe("product_added_to_cart", event => { 
  const payload = {
    eventName: event.name,
    customerPrivacyStatus: customerPrivacyStatus,
  };

  fetch('https://example.com/pixel', {
    method: 'POST',
    body: JSON.stringify(payload),
    keepalive: true,
  });
});