Track SPA routes

In a single-page app the URL changes without a full page load. Tell the collector your logical route on each navigation so events group by the page that matters, not by every unique URL.

Tag events with a logical route #

Call amb('setRoute', path) from your router on every route change. The collector starts a fresh view, restarts the session inactivity window, and tags subsequent events with that route. Call it before the new view renders so the route is set when the first metrics fire.

// Call on every route change, before the new view renders.
amb('setRoute', '/checkout/payment');

Hook your router #

Drop one hook into your router's navigation lifecycle. Pass the matched route pattern rather than the raw path, so dynamic segments collapse into a single group.

// React Router (v6) example. Adapt the hook to your router.
import { useEffect } from 'react';
import { useLocation, useMatches } from 'react-router-dom';

function RumRouteTracker() {
  const matches = useMatches();
  const location = useLocation();

  useEffect(() => {
    // Use the matched route pattern, not the raw URL, so dynamic
    // segments collapse: '/orders/:id' instead of '/orders/8a3f'.
    const pattern = matches[matches.length - 1]?.id ?? location.pathname;
    amb('setRoute', pattern);
  }, [location.pathname, matches]);

  return null;
}

The same idea in Vue Router:

// Vue Router example.
router.afterEach((to) => {
  // to.matched holds the matched record; its path keeps the
  // parametrised form, e.g. '/orders/:id'.
  const pattern = to.matched[to.matched.length - 1]?.path ?? to.path;
  amb('setRoute', pattern);
});

Path versus route #

The collector always records the raw URL path. The route you set is a separate, logical grouping. The difference is what makes per-page analysis useful:

• Path: /orders/8a3f, /orders/91b2, one row per order.
• Route: /orders/:id, every order page folded into one row.

Without setRoute, high-cardinality URLs scatter your traffic across thousands of one-hit rows and the per-page view becomes noise. With it, the Pages dashboard aggregates by the route, so performance and traffic land on the page templates you actually own.