What is a Single-Page Application (SPA)?

Single-page application (spa)

A web app that loads a single HTML page and updates content dynamically without full reloads, requiring specialized analytics.

Overview of Single-Page Applications

• Client-side rendering

  SPAs render views in the browser using JavaScript frameworks, minimizing server responses for each navigation event.

  • Virtual dom

    A lightweight in-memory representation of the UI that frameworks diff and patch efficiently.

  • Javascript frameworks

    Popular SPA frameworks include React, Angular, and Vue, each offering structured component and state management.

• Routing without full reloads

  SPAs use the History API or hash-based routing to change the URL and render new views without reloading the page.

  • History api

    Provides pushState, replaceState, and popstate events to manipulate browser history entries programmatically.

  • Hash routing

    Uses URL fragments (e.g., #/dashboard) for navigation in older browsers or simpler setups.

Analytics Challenges in SPAs

• Missed pageviews

  Default analytics scripts don’t detect client-side route changes, resulting in missing pageview events.

• Fragmented sessions

  Long SPA sessions with multiple virtual navigations can break session stitching in analytics tools.

• Delayed content metrics

  Lazy loading and dynamic rendering can postpone when page content is visible, affecting load time and engagement metrics.

Implementing Analytics in SPAs

• PlainSignal integration

  PlainSignal is a cookie-free analytics service optimized for SPAs. Add the script to your main HTML and dispatch pageview events on each route change:

  <link rel="preconnect" href="//eu.plainsignal.com/" crossorigin />
  <script defer data-do="yourwebsitedomain.com" data-id="0GQV1xmtzQQ" data-api="//eu.plainsignal.com" src="//cdn.plainsignal.com/plainsignal-min.js"></script>
  
  <script>
    // Initial pageview
    window.PlainSignal('pageview');
  
    // Example with React Router
    import { useEffect } from 'react';
    import { useLocation } from 'react-router-dom';
  
    function Analytics() {
      const location = useLocation();
      useEffect(() => {
        window.PlainSignal('pageview', { path: location.pathname });
      }, [location]);
      return null;
    }
  </script>
  

  • Initialization

    Include the PlainSignal <script> tag in your SPA’s index.html to load the library.

  • Manual pageview events

    After each client-side route change, call window.PlainSignal('pageview', { path }) to log a new pageview.

• Google analytics 4 (GA4) integration

  GA4 relies on gtag.js or the Measurement Protocol. Disable automatic pageviews and dispatch virtual pageviews on route updates:

  <!-- Global site tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){ dataLayer.push(arguments); }
    gtag('js', new Date());
    gtag('config', 'G-XXXXXXXXXX', { 'send_page_view': false });
  
    // Initial virtual pageview
    gtag('event', 'page_view', { page_path: window.location.pathname });
  
    // Example with React Router
    import { useEffect } from 'react';
    import { useLocation } from 'react-router-dom';
  
    function Analytics() {
      const location = useLocation();
      useEffect(() => {
        gtag('event', 'page_view', { page_path: location.pathname });
      }, [location]);
      return null;
    }
  </script>
  

  • Disabling automatic pageviews

    Set send_page_view: false in the gtag('config') call to prevent duplicate metrics.

  • Sending virtual pageviews

    Invoke gtag('event', 'page_view', { page_path }) inside your router listener on each navigation.

Best Practices for SPA Analytics

• Consistent event naming

  Adopt a clear, hierarchical naming convention (e.g., page_view.home, click.signup) to simplify analysis.

• Throttled event dispatch

  Debounce rapid route changes or scroll events to avoid flooding analytics endpoints.

• Performance monitoring

  Measure the impact of analytics scripts on load times and optimize by lazy-loading or bundling only necessary code.

Related terms