With a sleek look and feel, it’s no surprise that developers are trending towards adopting single-page applications (SPAs). And, of course, product teams want to understand how customers interact with their SPA to know how behavior impacts retention, loyalty, and lifetime value. Yet too many developers are lured into the false promise of auto-tracking, which is, as we have said before, [still] bad. Auto-tracking SPAs causes problems like incomplete views of the customer journey and slower web performance. If this sounds too familiar, the good news is, you aren’t alone. In this post, I’ll share how SPAs and auto-tracking work under the hood, and why auto-tracking does not work well with SPAs.
How do single-page applications work?
At a high level, a single-page application (SPA) is a web application that loads most of the data (i.e. HTML, CSS, and Javascript) when it’s initially opened. When navigating the app, SPAs dynamically rewrite the current web page to give the impression that it’s changed, whereas traditional websites require an entire page reload. This is why SPAs feel faster, more responsive, and more seamless compared to traditional websites – similar to a native mobile experience. For example, many ecommerce cart checkout flows are built as single-page applications. Popular sites like Facebook, Github, and Google Maps are also SPAs. SPAs are increasingly popular as users expect better and better product experiences on the web. In their 2021 Developer Survey, Stack Overflow asked participants what their most commonly used web frameworks were. Multiple SPA frameworks topped the rankings: React, Angular, and Vue came in 1st, 4th, and 5th place.
So, how does auto-tracking work?
Auto-tracking tools require you to put a single snippet of code into your SPA. The tool will automatically start monitoring all changes to the Document Object Model (DOM), all network requests, and all user input events, whether important or not. If you want to do any meaningful analysis, you have to sort through the flood of data coming in and organize the data via tagging. On the other hand, auto-track is easier to set up and quickly see data coming in, making it a good option for non-technical folks.
Although it seems faster to get started with auto-tracking, it has drawbacks. For the purposes of this blog, I’ll cover the two main auto-tracking challenges specific to SPAs.
Difficult to extract clear insights
Now more than ever, capturing the entire customer journey is essential to understanding how loyal customers use your product and identifying churn risks and opportunities for monetization, or upsell. Identifying even a simple change can result in a massive positive impact on your business. For example, Well Pharmacy, the largest independent pharmacy business in the United Kingdom, was able to investigate why users were dropping off in their sign-up flow using Funnels, Conversion Drivers, and Time to Convert. With insight into the entire customer journey, Well Pharmacy was able to increase signup conversion by 30%.
Having clear insight into the full customer journey is crucial, but getting the entire picture of the customer journey with auto-tracking can be a challenge. Users can perform multiple actions without changing the DOM in a way that triggers tracking immediately, resulting in incorrect timing and order of actions.
Let’s say, for example, a customer adds an item to their cart. This would be picked up by most auto-track solutions. But, auto-track solutions have a hard time picking up on the important context for that event, for example, what item was added to the cart, how much did it cost, was their cart empty, did they see a deal, was the item recommended? The context is pertinent information that any product person would want to know about an add-to-cart event.
This leads to faulty and incomplete conclusions, making it hard to trust the data and the insights that you pull from it. If the insights you’re finding are inaccurate, it will be even harder to get more people to use data to make decisions. When this happens, the best route to take is to start from scratch and take the precision tracking route. It’s painful, but we’ve seen so many companies go through this process once they realize the limitations of auto-track.
Risk of slower website performance
Lastly, let’s talk about performance. One of the biggest advantages SPAs have over traditional websites is their more responsive user experience—everything feels sleeker and faster. With auto-tracking an SPA, since you’re not precisely telling your tool what to track, it tracks everything. Sounds good, right? But in actuality, this flood of data can easily increase network traffic and processing time. If the UX is not as snappy as it was before, this could greatly affect your bottom line. According to a study done by Amazon, they estimate that for every 100ms delay in page load time, there could be about a 1% drop in revenue.
Treat yourself and your SPA to precision tracking
Using auto-track for SPAs is not ideal —you end up with the risk of an incomplete view of the customer journey and slower performance times. The alternative to these challenges is precision tracking.
If you are looking for a tool that provides trusted data, clear insights into the customer journey, and fast performance times, look no further. Amplitude uses precision tracking, meaning you manually instrument your events upfront and capture all the relevant context of those events.
Although it takes more time initially, it ensures the accuracy of event counts and user journeys. With precision tracking, you’ll have data your teams can trust and clear insights on every step of the customer journey. Furthermore, Amplitude only tracks and sends what you deem as important over the network, impacting your SPA’s performance as little as possible.
If you want to switch over to precision tracking, let’s chat. We’ve guided many customers as they switch from auto-tracking tools to precision tracking. We’re ready to share best practices so your teams can keep focusing on powering your product.
