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.

Anchor to app-pixels-privacy-settingsApp 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 documentation.

API ReferenceApp Pixel Tutorial

App Pixels Privacy Settings

Shopify.extension.toml

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" }

]

examples

App Pixels Privacy Settings

Shopify.extension.toml

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" }
]

Anchor to custom-pixels-privacy-settingsCustom 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 documentation.

Anchor to customer-privacy-apiCustomer 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.

Available Customer Privacy Events

Presently, the only event available for the customerPrivacy.subscribe() API is visitorConsentCollected. This is the only string that will be accepted for now.

Customer Privacy API

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

// 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,

});

examples

Customer Privacy API

App Pixels

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,
    });
  });
});

Custom Pixels

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,
  });
});