Going headless while keeping your Shopify Plus stack

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]

What if we told you that the best way to boost Average Order Value (AOV) is to stop focusing on AOV?  Yes, it’s counterintuitive. But when your brand tries to increase AOV just for increasing AOV’s sake, it can often be ineffective and even off-putting for consumers. After all, nobody wants to feel like they’re being pressured to spend more money. Luckily, there’s an easy solution to combat this — and it all boils down to intention. Your subscribers are human first and foremost, and as is the case with any other relationship, they need to feel valued and appreciated. By shifting your brand’s attention away from solely increasing AOV and instead focusing on adding real value to your subscribers, you can organically heighten engagement, improve your customer retention, and ultimately increase your AOV.  [note] Don’t miss crucial subscriber data by using Littledata’s app with Smartrr to capture checkout events through client-side and server-side tracking. [/note] Here are the retention-driving, value-adding components that your eCommerce brand should target, which will subsequently lead to increased AOV: Utilize Personalized Recommendations & Exclusive Add-ons Cross-selling and upselling are the two main strategies that typically spring to mind when anyone talks about increasing AOV.  When considering a value-adding approach for your subscribers, a different and more effective way to think about cross-selling and upselling is through personalized product recommendations.   In general, personalization is becoming more essential (and powerful) for eCommerce businesses. About 71% of consumers are expecting a more personalized experience from the brands they interact with — so playing up an individualized approach is an effective way to keep subscribers engaged (and organically encourage them to spend more).  Lean into your subscriber data to make specific, personalized recommendations to your subscribers based on products they’ve purchased in the past as well as products that other subscribers have previously purchased together. This way, you’re only recommending highly-relevant products that are significantly more likely to delight each subscriber.  And the best part is that happy subscribers are proven to spend more — which increases your AOV. 54% of retailers reported that product recommendations were a key driver of AOV, and leaning into personalization has been shown to account for a 25% revenue boost for DTC brands. In other words, prioritizing the end consumer is an evidently lucrative move.  As for an effective location for cross-selling and upselling — a good tactic is to display one-time add-ons in your customer account portal. And to take your add-ons to the next level, you can add a layer of exclusivity.  A key component of keeping subscribers engaged is by reminding them as often as possible that being a subscriber unlocks perks that one-time purchasers don’t get.  Featuring a subscriber-only exclusive one-time add-on creates the sensation for subscribers that they’re VIPs, thereby increasing the likelihood that they’ll want access to the product. We’ve seen some businesses even offer merch as a one-time add-on as an additional way to level up the overall brand experience.  ARMRA offers a branded tote bag as one of their one-time add-ons. Lean Into a Loyalty Program Loyal customers are the bread and butter of subscription brands, and that’s because they’re accurately known for being the most profitable. Just a 5% increase in customer retention rates has been shown to cause profits to spike by 25% to 95%, and loyalty programs specifically have been proven to increase AOV by about 14%.   Of course, loyalty isn’t something that can be created with the snap of your fingers; it has to be earned, and that takes time. But that doesn’t mean that there aren’t strategies to help the process along.  Loyalty programs are one of the easiest and most effective ways to encourage retention. A strong loyalty program provides valuable rewards as subscribers continue to stay and spend money. Consumers can accrue points with each purchase and exchange them for free products, discounts, exclusive items, and more.  Loyalty programs also put subscribers in control of their experience, allowing them to select whatever is most valuable to them. Take L’AMARUE, for example. Subscribers can decide to redeem 100 points to quickly unlock $10 off, or they can delay gratification and choose to save 475 points for The Face Cream.  By associating spending more money with tangible rewards, you create a positive feedback loop each time your loyal subscribers buy additional products. Much like the name implies, this encourages subscribers to remain loyal to your brand and keep coming back for more.  Offer Free Shipping  Free shipping is a low-lift strategy to add value to your customers, and the ROI is significant. Consumers are fairly adamant about despising shipping costs. One study found that 77% of consumers have previously abandoned a purchase altogether if they weren’t pleased with the shipping options, whereas 84% went through with a purchase specifically because shipping was free. Additionally, a different study found that 90% of online consumers said that the ability to unlock free shipping directly motivated them to buy more.  For one-time purchases, one of the best value-adding strategies is to institute a free shipping threshold. If you provide free shipping for orders over $50 and a consumer spends only $43, they’re way more likely to toss on an additional $15 product to access free shipping.  Looking beyond one-time purchases, it’s a good idea to offer free shipping for all of your subscribers. For one, this creates a sense of exclusivity associated with your subscription offering, which is a great way to foster loyalty. But it also gives subscribers a sense that they’re saving money with each purchase, especially if you’re transparent about these savings.  Chillhouse lists “Free Shipping, Always” as the first bullet beneath their PDP. Strikethroughs or clear deductions are an excellent way to illustrate savings. At every chance you get, be sure to highlight the amount of money subscribers save by not paying for shipping. This subconsciously makes your consumers feel as if they have a little extra money to spend, and it encourages them to add on another item. Once again, beginning from a place of providing consumers with real value results in the opportunity to boost your AOV.   Implement Product Bundling Product bundling is the ultimate paradox. By grouping products together and offering a discount, you give subscribers the perception that they’re getting more for less — when in actuality they usually wind up spending more than they would have if the products weren’t bundled. That’s because the concept of saving money incentivizes consumers to buy a bundle even if it includes a product or two that they wouldn’t have purchased separately. And an added perk of getting subscribers to try a product they might not have tried is you increase the likelihood that they’ll love the new product and come to rely on it, purchasing it again in the future as a result.  Here are a few strategies to help optimize your product bundles:  Just like with free shipping, be sure to make your subscribers’ savings evident on your PDP with strikethroughs and/or different colored fonts.  Allow subscribers to customize their bundles. This way, you can play into personalization, flexibility, and ensure subscribers get exactly what they need.  Monitor your analytics to see which items are commonly bought together to identify future bundles. Product bundling has repeatedly been shown to increase sales, and optimizing your bundles to provide your consumers with the best value will only further drive revenue.   Highlight Trending Products  While we’re on the topic of customer account portals, another way to drive engagement and boost AOV is through utilizing trending upsells.  Generally speaking, tacking the word “trending” next to a product automatically adds value to it by tapping into social proof. If subscribers believe there’s buzz around an item, they’ll be more likely to want to try it.  The exciting part is that there are myriad ways to creatively leverage trending products in a way that adds value to your subscribers.  For example, Wholesome Story took advantage of trending upsells to provide educational factoids about a lesser-known product. This “Did You Know” angle spreads necessary awareness before subscribers buy a new product, taking out the need for any research. Nooma, on the other hand, used their trending upsells as a way to promote a rotating flavor of the month in order to keep subscribers on their toes and give them the chance to sample something new. This adds a level of freshness to subscriptions and keeps customers returning to their account portal each month to see what the new flavor is.  You can also go in another direction and feature a relevant influencer’s favorite products. The endorsement will only further boost social proof, which automatically adds value to your brand as a whole. After all, 61% of consumers trust influencers’ recommendations.  Wrapping Up: Adding Value to Consumers Leads to a Higher AOV All in all, the best way to approach increasing your average order value is by prioritizing and delighting your end consumer. By creating the best possible experience for your subscribers every step of the way, you’ll encourage retention, grow customer loyalty, and naturally drive revenue as a result.  This post is the product of a partnership between Littledata and Smartrr. Check out Littledata to optimize and scale your DTC brand with key data insights including subscription data, and visit Smartrr to level up your subscription offering and increase customer engagement.  – Written by Gaby Tegen  Bio:  Gaby Tegen is the Co-Founder & CEO of Smartrr, the leading Shopify subscription app built to increase LTV. In addition to offering out-of-the-box subscription models and a branded customer account portal, Smartrr elevates the post-purchase experience with loyalty rewards, referrals, bundles, and more. Recently, Smartrr raised $10M in Series A funding to further their mission of becoming the first comprehensive LTV platform in the Shopify ecosystem. For more information, visit https://smartrr.com/.