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
What can you track with Web Pixel?
Web Pixel currently supports 5 pre-checkout customer events: page_viewed
search_submitted And 6 checkout events: checkout_started
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?
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]