# 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 ```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" } ] ``` - [API Reference](https://shopify.dev/docs/apps/marketing/pixels/getting-started): App Pixel Tutorial ## 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 ```js 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, }); }); }); ``` ```js 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, }); }); ``` ## References - [alert_displayed](https://shopify.dev/docs/api/web-pixels-api/standard-events/alert_displayed.txt): The `alert_displayed` event records instances when a user encounters an alert message, whether it's an inline validation message on an input field or a warning banner. This event is only available on checkout. - [cart_viewed](https://shopify.dev/docs/api/web-pixels-api/standard-events/cart_viewed.txt): The `cart_viewed` event logs an instance where a customer visited the cart page. - [checkout_address_info_submitted](https://shopify.dev/docs/api/web-pixels-api/standard-events/checkout_address_info_submitted.txt): The `checkout_address_info_submitted` event logs an instance of a customer submitting their mailing address. This event is only available in checkouts where Checkout Extensibility for customizations is enabled - [checkout_completed](https://shopify.dev/docs/api/web-pixels-api/standard-events/checkout_completed.txt): The `checkout_completed` event logs when a visitor completes a purchase. It's triggered once for each checkout, typically on the **Thank you** page. However, for upsells and post purchases, the `checkout_completed` event is triggered on the first upsell offer page instead. The event isn't triggered again on the **Thank you** page. If the page where the event is supposed to be triggered fails to load, then the `checkout_completed` event isn't triggered at all. - [checkout_contact_info_submitted](https://shopify.dev/docs/api/web-pixels-api/standard-events/checkout_contact_info_submitted.txt): The `checkout_contact_info_submitted` event logs an instance where a customer submits a checkout form. This event is only available in checkouts where Checkout Extensibility for customizations is enabled - [checkout_shipping_info_submitted](https://shopify.dev/docs/api/web-pixels-api/standard-events/checkout_shipping_info_submitted.txt): The `checkout_shipping_info_submitted` event logs an instance where the customer chooses a shipping rate. This event is only available in checkouts where Checkout Extensibility for customizations is enabled - [checkout_started](https://shopify.dev/docs/api/web-pixels-api/standard-events/checkout_started.txt): The `checkout_started` event logs an instance of a customer starting the checkout process. This event is available on the checkout page. For Checkout Extensibility, this event is triggered every time a customer enters checkout. For non-checkout extensible shops, this event is only triggered the first time a customer enters checkout. - [collection_viewed](https://shopify.dev/docs/api/web-pixels-api/standard-events/collection_viewed.txt): The `collection_viewed` event logs an instance where a customer visited a product collection index page. This event is available on the online store page. - [page_viewed](https://shopify.dev/docs/api/web-pixels-api/standard-events/page_viewed.txt): The `page_viewed` event logs an instance where a customer visited a page. This event is available on the online store, checkout, and **Order status** pages. - [payment_info_submitted](https://shopify.dev/docs/api/web-pixels-api/standard-events/payment_info_submitted.txt): The `payment_info_submitted` event logs an instance of a customer submitting their payment information. This event is available on the checkout page. - [product_added_to_cart](https://shopify.dev/docs/api/web-pixels-api/standard-events/product_added_to_cart.txt): The `product_added_to_cart` event logs an instance where a customer adds a product to their cart. This event is available on the online store page. - [product_removed_from_cart](https://shopify.dev/docs/api/web-pixels-api/standard-events/product_removed_from_cart.txt): The `product_removed_from_cart` event logs an instance where a customer removes a product from their cart. This event is available on the online store page. - [product_viewed](https://shopify.dev/docs/api/web-pixels-api/standard-events/product_viewed.txt): The `product_viewed` event logs an instance where a customer visited a product details page. This event is available on the product page. - [search_submitted](https://shopify.dev/docs/api/web-pixels-api/standard-events/search_submitted.txt): The `search_submitted` event logs an instance where a customer performed a search on the storefront. The products returned from the search query are in this event object (the first product variant for each product is listed in the array). This event is available on the online store page. - [ui_extension_errored](https://shopify.dev/docs/api/web-pixels-api/standard-events/ui_extension_errored.txt): The `ui_extension_errored` event logs occurrences when an extension fails to render due to an uncaught exception in the extension code. This event is only available on checkout. - [analytics](https://shopify.dev/docs/api/web-pixels-api/standard-api/analytics.txt): Provides access to Shopify's [customer event API](/docs/api/web-pixels-api/standard-events) - [browser](https://shopify.dev/docs/api/web-pixels-api/standard-api/browser.txt): Provides access to specific browser methods that asynchronously execute in the top frame (`cookie`, `localStorage`, `sessionStorage`) - [customerPrivacy](https://shopify.dev/docs/api/web-pixels-api/standard-api/customerprivacy.txt): Provides access to the [customerPrivacy API](/api/web-pixels-api/pixel-privacy#customer-privacy-api) to track whether or not customers have given consent. - [init](https://shopify.dev/docs/api/web-pixels-api/standard-api/init.txt): A JSON object containing a snapshot of the page at time of page render. It will always have the present `Context` of the page, as well as the `Data` field, which provides access to the `Cart` and `Customer` objects. - [settings](https://shopify.dev/docs/api/web-pixels-api/standard-api/settings.txt): Provides access to the settings JSON object as set by the [GraphQL Admin API](https://shopify.dev/docs/apps/marketing/pixels/getting-started#step-5-create-a-web-pixel-setting-for-the-store) **(Web pixel app extensions only)**. The structure of this object is a string keyed hash map: `Record<string, any>`. - [clicked](https://shopify.dev/docs/api/web-pixels-api/dom-events/clicked.txt): The `clicked` event logs an instance where a customer clicks on a page element. - [form_submitted](https://shopify.dev/docs/api/web-pixels-api/dom-events/form_submitted.txt): The `form_submitted` event logs an instance where a form on a page is submitted. - [input_blurred](https://shopify.dev/docs/api/web-pixels-api/dom-events/input_blurred.txt): The `input_blurred` event logs an instance where an input on a page loses focus. - [input_changed](https://shopify.dev/docs/api/web-pixels-api/dom-events/input_changed.txt): The `input_changed` event logs an instance where an input value changes. - [input_focused](https://shopify.dev/docs/api/web-pixels-api/dom-events/input_focused.txt): The `input_focused` event logs an instance where an input on a page gains focus. - [advanced_dom_available](https://shopify.dev/docs/api/web-pixels-api/advanced-dom-events/advanced_dom_available.txt): Event published when the DOM has been loaded and is available for interaction. - [advanced_dom_changed](https://shopify.dev/docs/api/web-pixels-api/advanced-dom-events/advanced_dom_changed.txt): Event published when the DOM has been changed in any way, such as an element being added, removed, or modified. - [advanced_dom_clicked](https://shopify.dev/docs/api/web-pixels-api/advanced-dom-events/advanced_dom_clicked.txt): Event published when a customer clicks on a page element. - [advanced_dom_clipboard](https://shopify.dev/docs/api/web-pixels-api/advanced-dom-events/advanced_dom_clipboard.txt): Event published when a customer has cut, copied or pasted text to or from the clipboard. - [advanced_dom_form_submitted](https://shopify.dev/docs/api/web-pixels-api/advanced-dom-events/advanced_dom_form_submitted.txt): Event published when a form is submitted. - [advanced_dom_input_blurred](https://shopify.dev/docs/api/web-pixels-api/advanced-dom-events/advanced_dom_input_blurred.txt): Event published when an input loses focus. - [advanced_dom_input_changed](https://shopify.dev/docs/api/web-pixels-api/advanced-dom-events/advanced_dom_input_changed.txt): Event published when an input value changes. - [advanced_dom_input_focused](https://shopify.dev/docs/api/web-pixels-api/advanced-dom-events/advanced_dom_input_focused.txt): Event published when an input gains focus. - [advanced_dom_mouse_moved](https://shopify.dev/docs/api/web-pixels-api/advanced-dom-events/advanced_dom_mouse_moved.txt): Event published when a customer moves their cursor over the page. - [advanced_dom_scrolled](https://shopify.dev/docs/api/web-pixels-api/advanced-dom-events/advanced_dom_scrolled.txt): Event published when a customer scrolls on a page or a scrollable element. - [advanced_dom_selection_changed](https://shopify.dev/docs/api/web-pixels-api/advanced-dom-events/advanced_dom_selection_changed.txt): Event published when a customer uses text selection on a page. - [advanced_dom_window_resized](https://shopify.dev/docs/api/web-pixels-api/advanced-dom-events/advanced_dom_window_resized.txt): Event published when a customer resizes their browser window.