Report page data from single-page applications - Application Real-Time Monitoring Service

In a single-page application (SPA), the page loads only once, so the Browser Monitoring SDK reports page view (PV) data only on the initial load. Route changes within the SPA do not trigger additional PV reports. As a result, sub-page views and logs of other types are not tracked per route.

The Application Real-Time Monitoring Service (ARMS) Browser Monitoring SDK provides two methods to report PV data on each route change:

Method	Routing type	Setup
Automatic reporting	Hash-based (`#/path`)	Set one configuration flag
Manual reporting	Any (hash, history, or custom)	Call `setPage()` on each route change

Enable automatic SPA reporting

This method works for most SPAs that use URL hash (#) as the route identifier. The SDK listens for hashchange events and reports PV data each time the hash changes. The hash value is also used as the page identifier when the SDK reports other data.

Set enableSPA to true in the SDK configuration:

const config = {
  pid: '<your-pid>',
  enableSPA: true
};

Customize page name extraction

By default, the SDK uses the raw URL hash as the page name. To extract a custom page name from the hash, use enableSPA together with parseHash. The parseHash function receives the full hash string and returns the page name you want to report.

const config = {
  pid: '<your-pid>',
  enableSPA: true,
  parseHash: function (hash) {
    // Example: extract the path from '#/user/profile?tab=info'
    // and return '/user/profile'
    return hash.replace(/(\?.*)?$/, '');
  }
};

For the full parameter reference, see enableSPA and parseHash.

Report page data manually

This method works with any routing strategy, including history-based and custom routing. Use it when automatic hash-based reporting does not match your routing setup.

Call setPage() to update the page name whenever a route change occurs. Each call triggers a new PV report by default.

// Listen for route changes and report the new page name
app.on('routeChange', function (next) {
  __bl.setPage(next.name);
});

Adapt the event listener to match your router. For example, hook into the route change callback provided by React Router, Vue Router, or Angular Router, and call __bl.setPage() with the new page name.

Framework integration examples

The following examples show how to call setPage() with common SPA routers.

React Router (v5 and later)

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function PageTracker() {
  const location = useLocation();

  useEffect(() => {
    // Report the pathname as the page name on each route change
    __bl.setPage(location.pathname);
  }, [location.pathname]);

  return null;
}

// Add <PageTracker /> inside your <Router> component

Vue Router

router.afterEach((to) => {
  __bl.setPage(to.path);
});

For the full setPage() API, see setPage().

Choose a reporting method

Criteria	Automatic (`enableSPA`)	Manual (`setPage()`)
Routing type	Hash-based (`#/path`)	Any (hash, history, or custom)
Setup effort	One configuration flag	Event listener per route change
Page name control	Derived from URL hash (customizable with `parseHash`)	Fully customizable
Best for	Standard hash routing	History API routing, custom page names, or nested routing