Category : Headless
Do Shopify's new Commerce Components fit the modern data stack?
We are off to the races in 2023 already with Shopify officially launching Commerce Components by Shopify (CCS), an improved offering for large retailers. CCS allows enterprise retailers to access Shopify's foundational, high-performing components, such as its checkout, along with flexible APIs to build dynamic customer experiences that integrate seamlessly with a retailer's preferred existing services. But larger brands don't just want composable commerce. They also want -- actually, need -- complete, accurate, actionable data. Have Shopify's new Commerce Components been designed with the modern data stack in mind? There are lots of good things to say about Commerce Components. Enterprise retailers can take the components they need and leave those they do not, and developers are “free to build with any front-end framework they choose”, says Shopify. CCS uses Shopify's global scale infrastructure, which has over 275 network edge points to enable fast storefronts and checkouts no matter where customers are located -- and in a year where consumers are savvier than ever and demand a great experience. While we are excited about how this will attract larger brands to the Shopify ecosystem, we feel the Data Analytics component is underwhelming -- and won’t allow enterprise brands to track full server-side event data for building marketing attribution, product recommendation, or personalization data models. This component uses ShopifyQL, launched in mid-2022, as a neat query language for charting. But data analysts using ShopifyQL to query Shopify’s own data tables can only query the current state of the customer or order, and not understand the customer journey that led to that order. Popular reports such as marketing attribution by campaign or channel are just not possible from this data set. Furthermore, most enterprise brands we talk to want to own their own data warehouse and have the flexibility to use best-in-class tools like BigQuery, Looker, and dbt to store and analyze the data. Littledata provides a raw event data feed, directly sourced from Shopify’s servers to power just such a modern data stack -- and gives analysts the flexibility to build their own data models. Littledata is excited to work with brands using Commence Components (including headless stores), but we think Shopify will need to lean on its partner network to provide the breadth of functionality, especially in data analysis, that enterprise brands require. For now brands on our Littledata Plus plans are skeptical about the initial release of Commerce Components, just as they have been about Shopify's new Web Pixel and overall Shopify Theme changes.
We Make Websites features Littledata in ideal headless tech stack
We Make Websites is one of our trusted agency partners at Littledata. The geniuses behind beautiful ecommerce experiences for Lauren Conrad Beauty, PANGAIA, and countless other Shopify Plus sites, We Make Websites are experts in headless builds. We were honored to be included in their new outline of a "perfect" headless tech stack for ecommerce merchants! Littledata's ecommerce data platform now supports any headless Shopify build, and we work together with top Shopify Plus agencies like WMW to help brands get accurate data to fuel their growth. The "perfect" headless tech stack Headless ecommerce isn't new, but the technology has improved across the board in recent years. With the rise of Progressive Web Apps (PWAs) and increasing popularity of React frameworks, it seems like headless platforms are everywhere you turn these days. Many brands are turning to sites that act like apps, and headless is a great way to do that. Even Shopify seems ready to go all-in with the launch of Hydrogen, which is focused on integrating React server components. As the WMW team explains, headless isn't for everyone. To really do it right (and keep maintenance costs down), you'll need a developer or agency with experience in Node.js and React/Vue as well as the Shopify ecosystem. When done right, headless sites like Recess and ILIA Beauty are lightning fast and provide personalized experiences for shoppers. In "Creating the Perfect Tech Stack for Your Headless Build", the We Make Websites team highlights top apps that work well in a headless environment, work well together, and "harmonize" with the wider tech stack. Here's their recommended stack. ShopifyLoyaltyLionKlevuYotpoNacelleNostoShogunRechargeLittledata Littledata is featured alongside some of our longtime integration partners Recharge (for selling by subscription) and Nacelle (for fast, flexible headless builds), as well as our friends at LoyaltyLion. So, this is an ideal stack for a customer-driven brand that is selling by subscription (at least in part) and is serious about data-driven growth. Note: Littledata also integrates with landing page builders like Shogun, Zipify Pages and Gem Pages Our headless tracking ensures that sessions are stitched together and linked to ecommerce events. We have also added default integrations with every major landing page builder, whether those pages act as your front-end or you're running hundreds of top-of-funnel landing pages. Should you go headless? As the WMW team puts it, one of the biggest reasons for going headless in the first place is the ability to pick and choose from modern commerce tools, including data platforms and CDP integrations: A headless architecture [lets you] employ a “best of breed” technology strategy. By harnessing the power and agility of APIs, headless websites allow you to create a tech stack that’s unique to, and perfect for, your business. We have certainly found that to be true in practice, especially with our merchants using Nacelle and Netlify. For the most part they have managed to keep their Shopify Plus tech stacks while improving speed and engagement . As Devin Saxon, senior sales engineer at Nacelle put it in our interview last year: Every headless build is unique. Not because of catalogue size, but due to what the merchant’s goals and needs are for their front end and overall architecture.The process itself is not dramatically different. We align with the customer on the build scoping process, including their goals, integration, and workflow needs, which can be the biggest determinant of the timeline. It’s best to work this out far before they start building, though, to mitigate any issues from coming up during the build. In our view, chief among those goals and workflows should be your data vision: what do you want to track, how do you want to track it, and who will be using the data? Check out our headless tracking demo to get sense for what's possible. If you're ready to start planning a headless build — or you've already launched are are ready to take data more seriously — let's chat.
Is it possible to track headless Shopify setups?
Headless commerce is not a new concept, but it's an increasingly popular solution. As larger brands continue to move to streamlined ecommerce checkouts such as Shopify and BigCommerce, they look to headless setups as a way to maintain speed or flexibility. An increasing number of those bigger DTC brands are going headless, whether that means a collection of landing pages leading directly to a Shopify checkout, or a full-on headless architecture implementation with a dynamic CMS. The question today is less whether you should consider headless in the first place (everyone is at least considering it), but more about your overall tech stack. When looking at the details of your stack (cost, functionality, maintenance, etc), it's important to consider headless pros and cons in general. But it's often even more useful to highlight specific use cases. We've previously written about how it's now possible to maintain your favorite Shopify Plus tech stack with a headless Shopify architecture. But what about your data stack? Does headless mean that your analysts will be dealing with a snow storm of anonymous IDs? Are there sacrifices to data accuracy, such as marketing attribution for recurring orders? With the right tools and plug-ins, you can still capture the complete headless journey on your headless site. In this post we look at headless Shopify tracking from several different angles and share resources for further reading. Why headless? DTC brands with a headless Shopify Plus setup now include Inkbox, Rothy's, Verishop, Allbirds, Recess, and many more. So why do merchants go headless? Headless commerce overview from Shopify Plus The main reason is speed, or site speed to be precise. When built the right way, modern headless sites are insanely fast. Ballsy increased conversion rates by 28% after going headless, thanks to dramatically faster page load times. (The average Shopify site sees around 4 seconds to full page load). At the same time, as our agency partner We Make Websites has noted, "extreme performance" isn't for everybody. Sometimes it can be like "the difference between buying a BMW or Audi, versus buying a Ferrari". Additional reasons for going headless include flexibility of controlling and customizing the complete frontend (with a CMS or other content framework). Of course, there are also limitations. When it comes to headless Shopify sites specifically, some trade-offs are the need to maintain multiple technologies or platforms, and the fact that Shopify's Storefront API uses GraphQL (there's currently no REST API for Storefront). Without the right tools, the other limitation is data accuracy and completeness. That can include: Marketing channels (paid channels, organic social communities, SEO)Browsing behavior (landing pages, product lists, website, mobile apps)Sales data (checkout behavior; one-off, first-time and repeat purchases)Ecommerce data from additional checkout apps (subscriptions and upsell flows) Headless tracking in Google Analytics / GTM It's no secret that Shopify and GA need some help to play well together. For every 10,000 orders processed on Shopify, 1,200 go missing in Google Analytics. For your average headless site, the stats are even worse. By default, different customer interactions with your brand — ppc campaigns, product lists, adds-to-cart, checkouts, refunds, recurring orders and subscriptions, email campaigns — are often either not tracked at all or not linked to the original user or session. In that way, you can end up with siloed data in different apps and platforms. Or even worse, everything could show up as anonymous activity or "Direct" traffic, even for repeat purchases. This isn't Las Vegas; what happens in the checkout should definitely not stay in the checkout! We have solved this problem by extending Littledata's server-side tracking to stitch sessions together from the client-side events captured on headless frontends . . . which is a rather technical way of saying that our Google Analytics app for Shopify now tracks headless sites automatically, from browsing behavior through the checkout funnel and beyond (we even capture subscriptions such as ReCharge payments!) This guarantees accurate sales and marketing data for any headless Shopify site. Check out Littledata's headless demo to see how our headless Shopify tracking works for Google Analytics. Tip: Using Google Tag Manager? Read more about our GTM / Data Layer spec. Headless tracking in Segment As mentioned, we have offered server-side tracking for Shopify since the beginning, and automatically linked this with client-side events. Now this is available for any headless setup as well. In theory, it should be easy to send data from additional cloud sources to Segment. Each part of your headless frontend stack can just plug right in. But in practice this means manually adding a hodgepodge of client-side and server-side event tracking, and maintaining this as you scale. If you're using Segment as your CDP — or considering using Segment — rest assured that Littledata's headless tracking now fully supports Segment as a data destination. You can try to set this up yourself, but it's much easier (not to mention cheaper and more reliable) to just use our Shopify source for Segment to track your checkout. With Littledata, you can automatically send sales and marketing data from a headless Shopify site to your Segment workspace. We also recently added more flexibility around which fields to send as the userId for known customers. Check out our headless tracking demo to see how our headless Shopify tracking works for Segment. Tracking landing page builders Not every headless site is using a Content Management System (CMS). For those who do, Contentful is the most popular with straightforward headless Shopify builds. There are also "soft headless" sites that rely on a series of landing pages or similar flows, which then lead to the main Shopify site or even directly to the checkout. In the first case, where the landing pages are truly landing pages and lead to your main site, you can use the default settings in Littledata's Shopify app and generally do not need to take the headless install route. For cases where landing pages go directly to the checkout, see the headless tracking demo linked above. We also need to take landing pages seriously. It can actually be just as difficult to get complete marketing attribution or even to link sessions together and track the purchases customers make after landing on one of these pages. To solve this problem, Littledata's automated tracking now tracks landing pages as "additional apps" on top of our main Shopify connections for Segment and Google Analytics. As long as the Littledata script is loading on those landing pages, everything will link together automatically. We have tested this functionality with three of the most popular landing page builders for Shopify stores: Shogun PagesZipify Pages Gem Pages Drop us a line if you have any questions about additional apps or special requests for landing page tracking. Preferred headless tech partner: Nacelle Our merchants looking for a complete headless Shopify solution often choose our tech partner Nacelle. Nacelle powers storefronts that stand out from the competition, offering headless website builds backed by a robust data stack. Focused on Progressive Web App (PWA) technology, they build lightning-fast, responsive sites for modern DTC brands. We've been working closely with Nacelle on tracking setup for some initial merchants (many brands you would recognize...) and are excited to now be able to offer headless tracking for any Nacelle customer. Read our shared ebook on going headlessExplore our headless tracking demoCheck out our NPM package for grabbing client IDs [or forward this to your developer!] Littledata's Nacelle tracking works automatically once you follow a few simple setup steps. Plus, the data can be sent to Segment, Google Analytics, or any connected data warehouse or reporting tool.
Going headless while keeping your Shopify Plus stack
It seems like everyone's considering going headless lately. What do you need to know before you make the leap? This year, in addition to optimizing Littledata for Shopify Plus (including headless Shopify setups), we have extended our headless tracking to include ReCharge and Segment in addition to Google Analytics. And we have collaborated with Nacelle as our preferred tech partner for headless builds. Led by CEO Brian Anderson, Nacelle has raised around $4.8M in funding so far, including angel investment from Shopify and Klaviyo execs. A growing number of successful online brands seeking to go headless are using Nacelle for the build and Netlify for deployment, and it's been great to see remarkable performance improvements with shared customers like Ballsy, who saw a 28% conversion rate increase across the board after moving to a headless Nacelle setup with Littledata for analytics. So we were excited to contribute some ideas to the new Nacelle ebook on how to get the headless experience without overhauling your Shopify Plus tech stack. If you are using Shopify Plus (or planning a migration), we highly recommend downloading the free guide and sharing with your team internally -- as well as any external partners like ecommerce agencies and growth consultants. In the free guide, you’ll learn: How a headless PWA works in combination with top solutions including Shopify Plus, email, SMS marketing, reviews and user-generated content, affiliate marketing, subscriptions, analytics, and customer service What industry leaders in these respective categories have to say about going headless and enhancing functionality (including Littledata for analytics and some of our long-term partners like ReCharge for subscriptions and Refersion for affiliate sales) Real-world examples of merchant success To learn more, download the free guide from Nacelle. What about headless tracking? At Littledata, we do not see headless ecommerce as a passing fad. PWA tech has caught up to the needs of larger DTC brands, who want best-in-class technology at each customer touch point (eg. social microsites, one-click subscriptions, multi-currency payments, upsell funnels) alongside custom design and a deep cross-device user experience to match their brand story. As Nacelle explains, headless ecommerce now offers the possibility of not just integrating your current tools but actually improving the functionality of your Shopify Plus stack. Together we can build a shopping experience that is better, faster, more reliable, and more highly personalized. But without server-side tracking, getting accurate data about your headless Shopify setup can be extremely complicated. Check out our headless tracking demo to see how to automatically get complete sales and marketing data about your headless Shopify site in Segment or Google Analytics.
Subscribe to Littledata news
Insights from the experts in ecommerce analytics
Try the top-rated Google Analytics app for Shopify stores
Get a 30-day free trial of Littledata for Google Analytics or Segment