What Is Shopify’s New Pixel & Web Pixel API Feature (and how does it impact your tracking)
Learn all about the new Shopify Pixel and Customer Events feature, how to implement for your store, and what to look out for during this migration.
This page is actively updated with new learnings — please bookmark to stay up to date.
Updates — February 28th, 2023
- We have several Plus merchants that have upgraded to Checkout Extensibility Once upgraded they do lose access to checkout.liquid
- We have a options available for our Shopify and Shopify Plus stores that supports tracking throughout the checkout, while on Checkout Extensibility, for UA, GA4, Facebook, TikTok, and more. Please contact us letting us know you’d like to have this enabled.
- We have rolled out our Web Pixel API support for Plus and Non-Plus stores.
- We’ve released a new FAQ podcast answering the most common questions on this rollout. Listen here.
- How Do Shopify Plus Stores Upgrade to Checkout Extensibility and maintain Elevar tracking
- How Do Shopify Non-Plus Stores Upgrade to Checkout Extensibility and maintain Elevar tracking
On October 3rd, Shopify officially released their new Pixel and Customer Events product into general availability.
This is a new feature that has been in web developer beta mode for several months.
This means companies like Elevar have had a chance to install, test, and provide feedback to Shopify as they iterated and improved this new feature.
Listen to this FAQ episode that talks through Plus and Non-Plus use cases plus how the upgrade to Checkout Extensibility works for Plus stores:
Or if you’re completely new to Pixels from Shopify, listen to my original podcast on this:
What is the Pixel & Customer Events feature?
The Shopify pixels manager allows you to manage and add pixels (also known as tags or tracking scripts) that track customer events. Customer events are actions that take place in the customer’s browser, for example, adding a product to cart or initiating checkout. You add your pixels via a custom app (like Elevar) or build your own pixel and subscribe to Shopify’s customer events which are a similar concept as Google Tag Manager’s data layer.
You might be asking “Why do I need this when I already use Google Tag Manager, theme.liquid, checkout.liquid, or Additional Scripts setting”?
Allow me to provide a bit of context first.
Conversion Tracking Overview on Shopify
All marketing channels that you want to integrate with requires conversion tracking to be added to your Shopify store.
Marketing channel examples include:
- Apps like Facebook, TikTok, Snapchat
- Search engines like Google Ads, Bing Ads
- Affiliates like Impact Radius, Commission Junction
- Display networks like Criteo, Adroll
- Other channels like Tatari (for TV), Roku, Verizon Media, Spotify, Podsights, etc.
There are thousands of these potential channels (we keep track!).
Historically the way these channels tracking have been integrated is through one of the following.
Native Shopify App
These are the Facebook, Google Ads, TikTok, and Universal Analytics types of integrations most merchants utilize. Historically they were created and maintained by Shopify.
However today most are no longer supported and maintained by Shopify and instead shifted to the platform (i.e. Facebook) themselves to own.
Third Party Shopify App
Similar to the Facebook and Google Ads app examples from above, there are other third party apps that help integrate tracking.
These can be channel owned apps — for example AWIN (affiliate) has their own app.
Or they can be apps like Elevar that allows you to integrate multiple channels.
Google Tag Manager
One of the most popular ways to add tracking to Shopify stores (82% of the top 1,000 Shopify stores are using GTM).
This requires a data layer that you either needed to custom build, integrate, or use a solution like Elevar.
Checkout.liquid theme file
If you’re a Plus merchant you may implement tracking code directly in this template.
Theme.liquid theme file
If you’re a Plus or Non-Plus merchant you almost certainly have implemented tracking code directly in this template.
Order status page scripts setting
And the last and probably most universally used is this setting in your Admin > Checkout settings. I’ve never seen this empty in my life :).
All of these integrations act primarily as client-side tracking.
Client-side tracking == in the “browser” and has variable accuracy (typically ~ 60-90% tracking accuracy).
It doesn’t matter how it’s implemented in the options above. If it’s client-side then it’s susceptible to iOS, AdBlockers, Browser restrictions, bugs, errors, etc.
This has led to growth in server-side tracking for Shopify stores to help combat these headwinds that negatively impact client-side tracking.
I’ll get back to server-side tracking “whys” later…
If you’re like most Shopify customers we’ve worked with over the years your tracking probably looks something like this:
- 3 channels integrated directly in theme.liquid
- 5 channels integrated via Google Tag Manager
- 4 channels integrated via order status thank you page scripts
- 2 in checkout.liquid
- 2 native apps
i.e. — it’s a mixed bag of tracking everywhere!
To circle back to this question:
“Why do I need this (Shopify “Pixels”) when I already use Google Tag Manager, theme.liquid, checkout.liquid, or Additional Scripts setting”?
The answer is:
The Pixels product will become the defacto method for implementing client-side tracking in the checkout as Shopify moves to their new checkout and checkout UI customization.
Once you upgrade to this new checkout experience (which Shopify has stated will be a slow rollout during Q4), then:
- Tags inside Google Tag Manager that currently trigger in checkout will need to be migrated (because they will no longer work)
- Scripts hardcoded inside the checkout.liquid will need to be migrated (because the new checkout that offers more customization options and flexibility doesn’t have the concept of a “checkout.liquid” template)
Here’s what this upgrade looks like for Plus merchants:
- Utilize our source & destination configurations that integrate natively with the web pixel API (you’ll simply see the destination + client-side tracking option)
- Utilize our server-side destination configurations that rely on server-side tracking to maintain 100% accuracy through checkout
- Create your own integration via the custom pixel code setting
- Implement an app from a third party partner that builds their own web pixel API app integration
Our goal during this transition is:
- Keep you informed of changes
- Minimize the amount of work or customization you need to make
- Help you get all of your channels configured in our no-code source/destination wizard which is where our server-side, Shopify web pixel, and GTM integrations live
If you aren’t utilizing server-side tracking yet then I highly recommend implementing this soon.
Our server-side integrations are made even better with the help of the web pixel API and the data we’re able to utilize to harden our integrations.
Plus many channels today want client-side AND server-side tracking for their pixel (see Facebook, TikTok, Snapchat, Pinterest, etc).
If you do decide to migrate to the new checkout and don’t follow through on implementing one of the options above then you will have potentially major tracking issues.
What to do next:
- Keep this page bookmarked — I’ll update this as we learn more about these rollouts in Q4.
- If you’re an existing customer on our Basic Plan or our original GTM data layer (only) plan then look at our upgrade options to server-side tracking
- If you’re an existing server-side customer then stay tuned for more information from this rollout
- If you are a Plus merchant on our PRO plan that is upgrading to this new checkout — please let us know