SPA Tracking & Monitoring: How to Build Better Single-Page Applications With Real User Monitoring

Did you know roughly half of the users that visit your website leave if it takes more than 3 seconds to load? Optimizing your website or webapp for stellar performance is always a crucial goal for any software-based business.

But, the ecosystem has changed in recent years. Smartphones are taking over. Developers need to build websites and optimize for performance primarily targeting these smaller devices.

It’s not solely about performance though.

User Experience, called UX for short, is the golden totem few seem to acquire. It has many faces, from the way you turn first-time users that interact with your landing page into paying customers, to the ease-of-use your web app provides paying customers, or how the interface just seems logical.

In this tutorial, I’ll explain how the principles of Real User Monitoring, also called End User Monitoring, can help in building and optimizing your single-page application, and how you can easily configure monitoring a single-page app for free. Let’s go!

What’s a Good Example of a Single-Page Application?

A good single page application has to be performant and blazing fast across all devices. It needs to have great SEO by prerendering dynamic routes. It should be responsive and reliable while serving customers with quick page loads across the whole globe.

But, how do you know if your customers are happy, how do you know whether users bounce before even trying your product?

You do that by tracking interactions and transactions while monitoring performance and user behavior with Real User Monitoring solutions. Check out this list of popular tools and solutions.

Let’s dive into what Real User Monitoring and Single-Page Application Monitoring is, and how you can use it to improve your single-page app.

What is Real User Monitoring?

Websites and web apps are getting increasingly more complex with more and more client-side logic. This significantly improves UX but adds a lot of code complexity and weight. We’ve come to a point where monitoring only the back end is not enough. To ensure the best possible user experience, you need to monitor the whole client-side as well.

The goal of Real User Monitoring is to detect anomalies in real-time when end-user experience is affected by website/webapp performance and unexpected crashes. When your customers are facing poor UX, you need to be notified!

Check out this Real User Monitoring guide for a more detailed walkthrough.

Having insight into how happy your customers are while interacting with your website keeps you on top of reducing churn and high bounce-rates.

With the ability to inspect individual sessions and drill into page-level statistics, you have a birds-eye view of what your customers are facing while interacting with your website or webapp. Tracking page-loads, HTTP requests, page resources, UI interactions, and on-page transactions are all crucial to understanding what your customers are happy and frustrated about.

There are tons of Real User Monitoring solutions to choose from, in the next section I’ll walk you through using Sematext Experience. To read more about the tool, check this out. It has a nice free tier if you’re starting a side-project and a 30 day free trial of the pro tier if you have a business going already.

How to Monitor Single-Page Applications

The sole purpose of Real User Monitoring is to ensure a better experience for the end user. It is not limited to only increasing your web application’s performance, but helping you improve overall satisfaction levels of your users.

Single-page application monitoring is crucial for you to monitor virtually anything that executes in the browser. You have insight into performance, page-load times, HTTP response times, and much more. This lets you see what your users are seeing in real-time through their eyes.

Why Monitor Single-Page Applications?

Having delays in page loads, loading resources, and HTTP requests can all cause your users to become frustrated and ultimately churn, causing you to lose business. That’s why it’s important to track every user’s experience via distinct sessions that provide valuable insight about which pages were accessed, whether they were hard or soft page loads, which HTTP requests were triggered, which device was used, and how the final load time was affected by all these factors.

Here’s a list of important factors and challenges for a single-page application where end-user monitoring can help:

1. SEO

Single-page apps are inherently terrible regarding SEO because they use JavaScript to load data and content. Meaning the bots that crawl your website and index data for the search engines don’t have any HTML to index because it’s generated once a user loads the SPA in a browser. To remedy this, you can use server-side rendering or prerendering the dynamic SPA routes and generate static HTML.

2. Performance

Single-page apps are well known to be fast and responsive websites, because of the way they load content dynamically, without reloading the HTML page. But, you never know what experience your users have while navigating the SPA. If the initial hard load is way too long or if some routes have bottlenecks with time-consuming HTTP requests.

3. Localizing

Real User Monitoring gives you a complete overview of the geographical location of your users. You know every detail about page loads and the satisfaction of your users across the whole world. Based on this analysis, localizing your SPA to use languages where you have the most customers is an amazing advantage.

4. Security

By tracking users, and their sessions, while interacting with your SPA, you can identify real and fake users, potentially isolating malicious intent.

5. Error and crash reporting

Errors happen, your single-page app can crash, it’s all part of life. But, you need to know this! Don’t rely on your users telling you. They’ll rather stop using your product than tell you. Real User Monitoring is there to watch your back when JavaScript lets you down.

How is Single-Page Application Monitoring Different from Static Website Monitoring?

Monitoring single-page apps and static websites is exactly the same in principle, apart from one important difference. Single-page apps can have hard and soft page loads. The principle behind how routing works with single-page apps is by using JavaScript to change pages dynamically, without reloading the root HTML page. This is a soft reload and requires one additional configuration watcher dedicated to listening for the routeChange event. Hard reloads are straightforward. They happen when the initial HTML page is loaded for the first time when a user lands on your webapp.

Sematext Experience covers all the bases, including tracking route changes for single-page apps so you know exactly which pages were loaded hard or soft and how the page rendering behaves. It supports every major single-page app framework or library like Angular, Vue.js, Ember.js, and React, but also a default configuration setting for any framework that uses HTML5 pushState or Hashchange.

The way you add Real User Monitoring to your webapp is super simple.

Adding Real User Monitoring to a Single-Page Application

Here is a list of steps to add Real User Monitoring to a single-page application:

1. First, create an Experience App in Sematext. Don’t forget to enable the Website uses Single Page Architecture toggle.

2. Then, add the Experience Script in your root HTML file’s <head>

<script type="text/javascript">
  (function(e,t,r,n,a){var c=[];e[a]=function(){c.push(arguments)};
  e[a].queue=c;var s=t.createElement(r);s.async=1;s.src=n;
  var u=t.getElementsByTagName(r)[0];u.parentNode.insertBefore(s,u)})
  (window,document,"script","//cdn.sematext.com/rum.js","strum");
</script>
<script type="text/javascript">
  strum('config', {
    token: 'YOUR_TOKEN',
    receiverUrl: 'https://rum-receiver.sematext.com'
  });
</script>

3. Lastly, add the routeChange event listener to your single-page app’s configuration. Based on what single-page application framework or library you’re using there are specific instructions. Choose what applies to you.

React

import React from 'react';
import { createBrowserHistory as createHistory } from 'history';
const history = createHistory();
history.listen((location, action) => {
  if (action !== 'REPLACE') {
    strum('routeChange', window.location.href);
  }
})
export default function App() {
  return (
    <Router history={history}>
      ...
    </Router>
  );
}

Angular 2+

import { Component, OnInit } from '@angular/core';
import { Router, NavigationStart } from '@angular/router';

@Component({ selector: 'app', templateUrl: 'app.component.html' })
export class AppComponent implements OnInit {
  constructor(private router: Router) {}
  ngOnInit() {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationStart) {
        strum('routeChange', event.url);
      }
    });
  }
}

Angular.js

$scope.$on('$routeChangeStart', function () {
  strum('routeChange', window.location.href);
});

Vue.js

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
  export default {
    name: 'app',
    watch: {
      $route() {
        strum('routeChange', document.location.href);
      }
    }
  }
</script>

Ember.js

import EmberRouter from '@ember/routing/router';
import { on } from '@ember/object/evented';​

EmberRouter.reopen({
  doInformAboutRouteChange: on('didTransition', function() {
    strum('routeChange', window.location.href);
  }),
});
export default Router;

Using On-Page Transactions to Track User Experience

With the configuration above, you’ll have everything set up and ready to go, apart from custom on-page transactions. These are awesome to have if you want to measure custom events that are important to you in understanding your customers’ behavior. Maybe you want to track transactions when your users go through the sign-up flow or how well they’re onboarding. You can do whatever you want with on-page transactions. Let your imagination go wild!

Visualizing User Experience

After finishing the configuration, and have data flowing in, you can visualize metrics and start making business decisions to improve the user experience and thus the happiness of your customers.

Apart from the obvious, you can also visualize user satisfaction based on which part of the world they live in. Geographical data is crucial to understand and optimize performance for markets you wish to enter.

Wrapping Up Monitoring Single-Page Applications

Give your customers the experience they deserve. Don’t let performance issues cause churns. Stop relying on your customers to tell you what’s wrong! Diagnose issues right away when they happen. Convert more sales and enhance your single-page application’s performance.

Using a Real User Monitoring tool like Sematext Experience gives you a clear overview of who is using your web application, with data from real users and their sessions while interacting with your product. Use this to your advantage, find the hidden problems they encounter to keep user satisfaction high.

The state of the Internet today demands lightning-quick web apps that load just as fast on mobile as on desktop. Retain customers who stumble upon your product while casually browsing the web on their phones. Make them want to come back and sign up.

Returning to the question from the beginning of this article, did you know half of the users that visit your website leave if it takes more than 3 seconds to load? Well, now you know. Don’t let yourself be one of those who lose customers before they even land on your website!

Do you know how fast your website or webapp loads in different browsers and regions, on different devices? With a Real User Monitoring solution, you’ll know.

You can check out Sematext here, or just shoot me a message on Twitter if you want to chat.

Hope you guys and girls enjoyed reading this as much as I enjoyed writing it. If you liked it, feel free to share so more people see this tutorial. Until next time, be curious and have fun.