Why Littledata is using Shopify's Web Pixel
Updated article based on the latest iteration of Web Pixel from Shopify in May 2023. 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. In short, I think Web Pixel is now the best way to track the Shopify checkout. But there are a number of problems with tracking customer behavior in modern browsers that Web Pixel can’t solve. Web Pixel is now the best way to track the Shopify checkout...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, the benefits and challenges of different approaches to tracking 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. Firstly, Shopify captures these events in Shopify Analytics. Almost every Shopify merchant uses third party marketing platforms like Facebook Ads, TikTok or Pinterest 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 all cases, 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 in any marketing platform without Shopify directly supporting the data destinations. 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
Prevention of third party code running non-performing Javascript, or interfering with your online store and checkout
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 the new Shopify checkout (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. Prevention of third party code running non-performing Javascript. I've previously written about the 'Wild West’ of stores using the Additional Scripts field. I'm all for removing this risk, but again there’s a trade-off between security and the richness of the data captured. Built in tools for privacy compliance. Shopify launched the customer privacy API back in 2020, and updated that in 2023 to support different consent levels, but it wasn’t mandatory for 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 can you track with Web Pixel?
Web Pixel currently supports 5 pre-checkout customer events: page_viewed
collection_viewed
product_added_to_cart
product_viewed
search_submitted And 6 checkout events: checkout_started
checkout_contact_info_submitted
checkout_address_info_submitted
checkout_shipping_info_submitted
payment_info_submitted
Checkout_completed Of these the most useful are product_added_to_cart (which is really hard to do without interrupting clicks of the add to cart button) and the checkout events (see below). 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. I believe Shopify is launching server pixels to address this problem later in 2023, but I don’t currently have details on how this will work. From a technical perspective, there’s a 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, and the cookies have been set, get the cookie or local storage value in the web worker in which the Web Pixel runs. Shopify's Web Pixel doesn't solve the key problem in modern web analytics: the increasing gaps in client-side tracking. This removes some of the speed & security benefits Shopify is touting (not loading additional scripts) and complicates setup of custom pixels. You’ll need to add third party scripts to the theme to use the tracking libraries, and wait for them to run before the web pixel can fire. For the checkout pages you can get away with not running the tracking library Javascript, as checkout pages are almost never landing pages - so the cookie and session data should have been set on a previous page. Although for Google Analytics, you'll have to create your own tracking URL without the help of the gtag library. And then there are 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: collection_viewed event is in the documentation, but doesn’t seem to fire
No product list impression events
No product list click events
No remove from cart event
No post-purchase events (refunds, cancellations, fulfillments) Why do you need Web Pixel to track 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, rolling out for Plus stores in 2023, does this by allowing more checkout customization via API but removing customizations and scripts in checkout.liquid. So if you're a Plus store, and added a GTM container to the checkout.liquid file, these tags will stop working later this year. 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 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?
Yes - for tracking the checkout at least. That's what Littledata is using it for. The main use for adding Web Pixel right now is tracking the checkout, although Web Pixel is difficult to implement pre-checkout via a custom pixel for landing pages (for example, loading the tracking library and passing through that library to the sandbox). If you want to remove Google Tag Manager from your storefront for performance or security reasons that is understandable, but I’d suggest you make more use of server-side tracking, which will also speed up your site Web pixel would be useful next year for stores moving to Shopify Hydrogen. For headless Shopify stores Web Pixel could 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. In the meantime, Littledata offers an SDK to make pre-checkout tracking easier 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. There are many apps which offer ecommerce tracking (plus Shopify’s Google Channel) but few that offer the accuracy of server-side tracking. [tip]See what Shopify stores can do today to prepare for GA4[/tip] 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 just one part of what’s needed for complete Shopify tracking. [subscribe]
