Product Hunt Launch: GA4 Conversions Checker!

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]

If you haven’t migrated to Google Analytics 4 (GA4) by now, you’re likely flooded with reminders from Google to get to it! But what does auto-migration mean? And can it break your Shopify data? With Universal Analytics’ July deprecation date coming soon, the pressure is on. To encourage UA users to make the switch, Google began auto-migrating UA properties to GA4 on March 1, 2023.  While this may sound helpful, you actually do not want to rely on Google’s auto-migration to GA4. For data-driven ecommerce brands, Google’s “basic” configurations aren’t going to cut it, and Google’s auto-migration could actually hinder your data quality. The same goes for Shopify’s Google sales channel. With a few simple steps, you can opt out of GA4 auto-migration and set up your GA4 property correctly. There’s a lot of confusion in the marketplace right now, especially when it comes to tracking ecommerce stores in GA4. Whether you’re on Shopify, BigCommerce, or another ecommerce platform, it’s a must to track checkout steps and conversions, but auto migrations don’t cover that at all. So in this post, we’ll be clearing up: Why you should opt out of auto-migration (and how to do it) How to ensure data quality in GA4 How to track ecommerce events in GA4 Why you need to opt-out  It’s important to note that GA4 is a completely new reporting tool, built from the ground up for faster reporting, increased flexibility, and streamlined audience building. GA4 relies on a new data model — event-based tracking, rather than session-based tracking — and doesn’t track data like-for-like with UA. To avoid any data disruptions and ensure data integrity, brands need to manually set up their GA4 properties. [tip] Watch our recent webinar to learn more about the differences between UA and GA4 [/tip] Problems with GA4 auto-migration Google’s auto-migration runs deep and migrates several parts of your account. If you’ve already set up a GA4 property, you may think this doesn’t apply to you, but even if you have manually created a GA4 property, it’s crucial that you switch off the auto-migration toggle to avoid further issues. Duplicated orders We’ve seen Shopify stores face duplicated orders and inaccurate data after missing this key step. Even with the proper data tech stack, brands are struggling with data quality issues because they have not opted out of auto-migration. Event naming If you’ve auto-migrated your UA events into GA4, your event naming can majorly skew conversion tracking, if not done properly. GA4 limits event names to 40 characters or less, so any UA events automatically migrated to GA4 that are 40+ characters will not be reported as a conversion because the appended “_c” will be missing. Managing users With great power comes great responsibility. There may be users you don’t want to migrate to GA4 so it’s best to review account and property users and the access they’re granted during migration. How to opt out of GA4 auto-migration It’s easy to opt out of auto-migration. Simply access the GA4 Setup Assistant via the Admin panel and scroll down to ‘Automatically set up a basic Google Analytics 4 property’ and ensure that the toggle is switched off, as pictured below.  As an added measure, ensure that you have “Collect Universal Analytics events” toggled off in your data stream’s tag settings, as shown below.  How to ensure data quality in GA4 Check that all pages and conversions are being tracked Mistakes and inconsistencies in your Google Tag Manager (GTM) tracking can result in missing data, with Littledata’s data layer, you won’t have to worry about that. Unlike alternatives, Littledata’s data layer works automatically, eliminating the risk of human error so you can finally trust your Google Analytics data. As mentioned above, GA4’s event naming requirements could interrupt your conversion tracking. To avoid any interruptions, make sure that your event names are below 40 characters, otherwise, you could face some issues in reporting. Check your transaction and purchase data Tracking complete transactions, revenue, and purchase data is essential for any ecommerce brand. Many of the apps that offer “GA4 setup” for Shopify or BigCommerce stores do not fix your tracking. Find out if your GA4 setup is up to speed with our free GA4 Conversions Checker. Connect your Google Analytics account and the Conversions Checker will automatically audit your GA4 property for any data discrepancies, explains why they exist, and how to get more accurate ecommerce reporting in just a few clicks. Build out your data tech stack  Using the right Shopify or BigCommerce app can help make your transition to GA4 much easier. Littledata’s GA4 integration works seamlessly out of the box, automatically tracking the entire customer journey — from discovery at the source, through the checkout funnel and post-purchase events — pushing events into Google Analytics 4, Facebook Conversions API, Segment, and any connected reporting tool.  How to track ecommerce events in GA4 Shopify’s GA4 integration is now available through the Google Sales Channel App, but as with Shopify’s native integration with UA, it comes with a few core limitations. Beyond this app, you have two other options: Google Tag Manager (GTM) GTM is a common tracking solution for ecommerce stores. And while GTM itself is free to use, it comes with a price — GTM is very time-consuming, complex, and often costly to maintain, especially for a lean team. Plus, Shopify’s recent updates removed the ability to add scripts to checkout.liquid, no longer permitting brands to track the checkout funnel with GTM. A trusted app, like Littledata Within minutes, fix your ecommerce tracking in GA4 — no implementation or developer needed. Littledata’s app uses a combination of client-side and server-side tracking to capture the entire customer journey, including complete marketing attribution and post-purchase events, like subscriptions and upsells. Start your GA4 journey on the right foot with hands-on support from our team of analytics experts. [tip] Read our step-by-step guide to tracking ecommerce conversions in GA4 [/tip] Next steps The good news is that there’s still time to fully migrate your ecommerce analytics to GA4 before the July deprecation date. But don’t delay — the sooner you set up a GA4 property that checks all the boxes, the better equipped you’ll be in the future with a treasure trove of historical data, custom-built reports to answer your business's top questions, and a BigQuery export to turn data into marketing magic.