Shopify tracking is our bread and butter here at Littledata, so we were excited to learn that Shopify has released a new Web Pixel extension API to help stores track key customer events via tracking ‘pixels’, and a Shopify pixels manager to manage these pixels. Together this is Shopify’s Web Pixel feature.
There are a couple of things to clarify at the outset. Firstly, Shopify’s Web Pixel is not really a pixel at all, but a way of managing and triggering pixels across a merchant store.
Most websites today use some type of Web Pixels to track customer behavior, but Shopify’s standardization and centralization of their own Web Pixel tools is a big deal for both merchants and the partners who work with them. The new Web Pixel signals a change in both how client-side events are tracked, and in how related technologies, such as Google Tag Manager (GTM) and Google Analytics, can access those events.
I welcome the move to standardize the data layer for Shopify tracking, and remove some of the challenges for stores using GTM to trigger events. But I believe Web Pixel is being rushed out to fix a problem for tracking Shopify’s new checkout, and that there are a number of problems with tracking customer behavior in modern browsers that Web Pixel can’t solve.
I welcome the move to standardize the data layer for Shopify tracking…but there are a number of problems with tracking customer behavior in modern browsers that Web Pixel can’t solve.
In this post I look at what Web Pixel is, how it does (and doesn’t) change customer tracking for Shopify stores, and the benefits and challenges of different approaches to tracking. I explain why we think that Shopify Web Pixel currently misses the mark, and what we’re looking forward to as Web Pixel evolves.
Let’s dive in.
Does Web Pixel change customer tracking for Shopify stores?
Shopify merchants can track customer events in a variety of ways.
Almost every Shopify merchant uses third party marketing platforms like Facebook Ads to drive traffic. And they all want to improve ROAS by sharing customer actions from the storefront and checkout (product views, checkout steps such as Add-to-Cart, etc.) back with those marketing platforms for retargeting and audience building.
Historically, this has been done via a client-side browser tracking library: gtag for Google Ads and Google Analytics, Facebook Pixel for Facebook & Instagram Ads, the Pinterest Tag for Pinterest, etc. And there were three main ways stores could get these ‘pixels’ firing on the page:
- Via a Shopify app
- Triggered by Google Tag Manager (GTM)
- A developer adds the tag directly to the store theme
In the case of 2 & 3, the challenge was both triggering the events at the correct time (e.g. listening for the click of ‘Add to cart’ button and sending the event before the page reloaded) and having access to the right page, product and customer details at that time (e.g. product price, variant ID).
What is Shopify Web Pixel?
Shopify has seen stores struggle to implement tracking over the years, and wanted to make it easier for stores to track without Shopify directly supporting the data destinations.
Shopify has been burnt trying to support third party platforms like Google Analytics and Facebook Ads (see the reviews for their Facebook Channel), and would prefer to push that support back to the third parties, or app developers that work with them.
In comes Web Pixel. In Shopify’s own words, using the Shopify pixel manager allows:
- Access to a stream of customer events on your online store, including checkout events
- An additional layer of security for your online store and your customers, including greater control over the customer data that you share with third-party services
- Built in tools for privacy compliance
Let’s look at each benefit in detail, with my commentary.
Access to a stream of customer events: this is solving the challenge of triggering the right event. This was always most difficult for the checkout, and will become impossible for Checkout 1 (see “Common problems tracking Shopify’s new checkout”, below). However, Littledata already offers proven server-side tracking for any Shopify checkout, including headless builds.
An additional layer of security. Yes, restricting access to the storefront by loading the pixels in a sandbox removes the risk of rogue scripts scraping personal data. But it makes it much harder to populate all the data fields that need to be shared with third parties. Littledata’s solution to do that product and customer enrichment server-side is both secure and comprehensive.
Built in tools for privacy compliance. Shopify launched the customer privacy API back in 2020, but it hasn’t had much adoption among tracking apps. With Web Pixel, Shopify is making every pixel respect the customer cookie consent (as managed by a cookie banner app). This is great, but Littledata already respects customer privacy with complete cookie banner integrations.
For stores and app developers I see the key benefit of Web Pixel is robustly triggering standard events and data context for common customer actions. Web Pixel removes the need to build a GTM data layer with an app like Elevar, or set up GTM to use this data layer in the tags. But this, too, is not without complications.
What’s wrong with Web Pixel?
There are several issues with Shopify’s Web Pixel as it exists today.
Firstly, it is not solving the key problem in modern web analytics: the increasing gap in client-side tracking due to ad blockers, browser restrictions on cookies and handling customers opting out of tracking. The solution to this is fully server-side tracking, which Littledata is launching in Q4.
From a technical perspective, there’s a major limitation with how you could use the tracking library (e.g. gtag) within the Web Pixel callback. To send data to Google Analytics, you would need to load the gtag library on the parent page (either from the theme or a script-tag) and, after the library has loaded, pass the gtag function to the sandbox the Web Pixel runs. This removes most of the security benefits Shopify is touting (not loading additional scripts) and massively complicates setup of custom pixels.
Shopify’s Web Pixel doesn’t solve the key problem in modern web analytics: the increasing gaps in client-side tracking.
And then there are a number of gaps in the standard events currently tracked via Web Pixel. I know Shopify intends to patch some of these, but it’s not there yet:
- No context on the collection being viewed in collection_viewed events
- No product list impression events
- No product list click events
- No remove from cart event
- No shipping step on the checkout
- No waiting before page reloads to trigger add to cart events
- Very limited access to the browser window context (including page URL) for the pixel
- No post-purchase events (refunds, cancellations, fulfillments)
Common problems tracking Shopify’s new checkout
Shopify has long said it wants to lock down scripts running in the checkout to protect customer security and privacy. The latest version of the checkout (labelled “Checkout 1”), rolling out for Plus stores in Q4 2022, does this by allowing more checkout customization via API but removing customizations and scripts in checkout.liquid.
You have three options to continue to track the checkout:
- Use Littledata’s server-side checkout tracking
- Use another app making use of the Web Pixel extension
- Build a custom pixel using Shopify pixel manager
If you’re not on Shopify Plus then only Littledata’s checkout tracking will work for you right now. Want to learn more? Find out the differences between client-side tracking and server-side tracking.
Why is Shopify restricting scripts on the checkout?
Google Tag Manager (GTM) is a powerful tool to manage marketing tags, but i’ve written before about how it provides a backdoor for malicious code to be injected into the checkout.
For example, hackers can add a keystroke tracking script which relays credit card details as they are typed to the hacker’s server. Or in another hack we saw, the user was directed away from Shopify’s checkout to a similar-looking bogus checkout.
Shopify has signaled that they see checkout as core to the ‘OS of ecommerce’ and they want to protect their brand from association with such scams. If that means blocking safe tags like Google Analytics or Google Ads, then that’s a worthwhile trade off for better security in their view.
Should your store use the Shopify pixel manager?
In short, no. We do not recommend using Shopify’s pixel manager. At least not yet.
The main use for adding Web Pixel right now is tracking the checkout, but Web Pixel is missing a key step of the checkout (shipping) and are difficult to implement via a custom pixel (for example, loading the tracking library or passing through that library to the sandbox).
If you need to add back checkout tracking, or start tracking Google Analytics 4, you’d be far better using a proven analytics app for that.
If you want to remove Google Tag Manager from your storefront for performance or security reasons that is understandable, but I’d suggest you wait until 2023 and some of the issues with Web Pixel have been ironed out. For now your options are:
- Make more use of server-side tracking, which will speed up your site
- Use Littledata’s GTM data layer to remove custom code that triggers events
Web pixel should be useful next year for stores moving to Shopify Hydrogen. For headless Shopify stores we expect Web Pixel to make it easier to track pre-checkout events like page views, product views and add to carts – in addition to the server-side events Littledata tracks for headless stores.
Some predictions for the future
From our conversations with Shopify, I think the ability for apps to add script-tags to the Thank You page might be removed in 2023. That would make Web Pixel the only way to track purchase events on the Thank You page – but it wouldn’t impact purchases tracked server-side.
I predict the impact on the tracking app ecosystem will be similar to when Shopify opened up subscriptions in the checkout in 2021 – a proliferation of apps offering generic functionality, and a race to the bottom in app pricing. I’d expect to see many more free tracking apps – for common platforms, like Facebook, and for niche ones like Roku and Verizon Media – because the technical complexity of launching client-side tracking is reduced.
This is especially true for Google Analytics 4. Many brands are waiting for Shopify to release an official GA4 integration, but I don’t think this fits with Shopify’s strategy. They prefer to make it easy for app partners to connect to GA4, and leave these partners to help brands with Google Analytics queries.
Tip: See what Shopify stores can do today to prepare for GA4
And yet I expect an increased demand and perceived value for apps that solve the real challenges of data accuracy and marketing attribution, through server-side tracking and other innovations.
I know many brands willing to pay for quality data, and Web Pixel is not able to deliver that just now.