Web pixel extension
Pixels are JavaScript code snippets that run on the online store that collect behavioral data, referred to as customer events, for marketing campaign optimization and analytics.
Previously, pixels required merchants and Partners to modify an online store’s theme code, which was a difficult and error prone process. Often this code was broken, unmaintained or forgotten.
The aim of the Web Pixel Extension is to 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. With this aim Web Pixel Extensions are meant to provide the following benefits to merchants and Partners:
- Eliminate or minimize requiring merchants to add tracking code
- Securely access all surfaces, like storefront, checkout and post-purchase pages
- Control what data Partners have access to
- Compatible with our Customer Privacy API, for requiring consent as needed
- Avoid incidents with performance and privacy alerts
- Lighter pixel code libraries with the removal of excess DOM manipulation code
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 types of apps you can build.
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.
Sandbox environment
Anchor link to section titled "Sandbox environment"The Web Pixel Extension sandbox loads pixels in a strict web worker environment. Traditional JavaScript pixels that use browser APIs, like window.document will not work. Instead, we provide app developers a set of contextual APIs to replace their functionality.
The sandbox is designed so that merchants and buyers have complete control over what data is collected by 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.
How web pixels works
Anchor link to section titled "How web pixels works"Once you’ve created your Web Pixel Extension and configured it to a given merchant’s shop, your pixel is able to load on the shop’s online store. As a visitor browsers the online store they’ll trigger customer events, which will be 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.
Currently, only events published by Shopify can be subscribed to. If you have any needs for non-standard customer events this solution may not be for you at this time.