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?
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:
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 headless
- Explore our headless tracking demo
- Check 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.