Web pixel extension
Pixels are JavaScript code snippets that run on the online store and collect behavioral data, referred to as customer events, for marketing campaign optimization and analytics.
Previously, pixels required merchants and Partners to modify their online store’s theme code, which was a difficult and error prone process. Often this code was broken, unmaintained or forgotten.
Web Pixel extensions provide Partners with a simplified process for managing and processing behavioral data, by loading pixels in a secure sandbox environment with APIs for subscribing to customer events. Web Pixel extensions provide the following benefits to merchants and Partners:
- Eliminate or minimize the need for merchants to add tracking code
- Securely access all surfaces, like storefront, checkout and post-purchase pages
- Control what data Partners have access to
- Avoid performance and privacy alerts
- Provide a smaller pixel code libraries with the removal of excess DOM manipulation code
Web Pixel extensions are compatible with the Customer Privacy API, so you can request consent as needed. Web Pixel extension callbacks are executed only after the visitor has given consent. When the buyer gives consent, all registered events are replayed to capture any events that already occurred on the page.
Requirements
Anchor link to section titled "Requirements"- You've created a Partner account and a development store.
- You understand how apps fit into Shopify and the different ways of distributing your app.
You've created an app that uses Shopify CLI 3.0 or higher, or you've migrated your existing app so that it's compatible with Shopify CLI 3.0 or higher.
How web pixels works
Anchor link to section titled "How web pixels works"After you’ve created your Web Pixel and configured it to a merchant’s shop, your pixel is able to load in the shop’s online store. As a customer browses the online store, they’ll trigger customer events that are published to a Shopify data layer or event bus. Your pixel can subscribe to the events on this data layer and then transform the event payloads into a format that conforms to the requirements of your pixel’s data collection endpoint.
Sandbox environments
Anchor link to section titled "Sandbox environments"Web pixels are loaded in a sandbox on a visitor's browser, and are designed to give merchants and buyers complete control over what data is accessible to Partners. These controls mean some common features of pixels won’t work the same or won’t work at all. Specifically, these include any features that rely on scraping the DOM for information or attempting to write to the DOM. Although these limitations may seem constraining, most can be overcome by leveraging the data passed into the sandbox using the Web Pixel Extension API.
While this documentation is focused on web pixel extensions, it's important to note that there are two types of sandbox environments: strict and lax.
Strict sandbox (Web Pixel Extension)
Anchor link to section titled "Strict sandbox (Web Pixel Extension)"App developers create web pixel extensions which are loaded in a strict sandbox environment using web workers. This environment has access to many of the same globals as you’d get with JavaScript running in a browser. However, we only guarantee the presence of the following globals:
self, a reference back to the global object.console, which is the sameconsoleavailable in the browser and can be used for printing to the browser’s console. Note: Your app should not log any content when running in production.setTimeout,clearTimeout,setInterval, andclearInterval, which behave the same as they do outside a web workerfetchand related globals (Headers,Request, andResponse), which can be used to make HTTP requests to arbitrary endpoints. Note: Any requests you make must explicitly support cross-origin resource sharing (CORS), just as they would if the request were coming fromfetch()outside of a web worker.
Traditional JavaScript pixels that use browser APIs such as window.document won't work in this environment. You can use contextual APIs available to Web Pixel extensions to replicate specific browser API functionality.
Lax sandbox (Custom Web Pixel)
Anchor link to section titled "Lax sandbox (Custom Web Pixel)"Custom pixels are loaded in a lax sandbox environment, which is an iframe with the sandbox attribute. This allows traditional Javascript pixels to be inserted onto the page of the iframe. It's important to note that traditional pixels placed in the lax sandbox will not be able to directly access the parent frame.
This feature is intended for merchants to use and more information can be found in the help docs. We strongly recommend partners create apps and encourage merchants to use their apps instead of creating Custom Pixels, for greater integration.