Screen Tracking

Track the pages/screens users move through so you can visualise journeys and drop-off under RUM → User Flows in the dashboard. The SDK auto-tracks SPA navigation; you mostly just give screens readable names.

Automatic tracking

When RUM is initialised, navigation changes (history pushState/replaceState, back/forward) are detected automatically and reported as view events. Each event is tagged with the channel (web) and the user's browser + OS, so flows can be segmented by platform, browser, and OS in the dashboard.

import { simplrRUM } from "@simplr-ai/js";

simplrRUM.initialize({
  apiKey: "pk_your_public_key",
  applicationId: "my-web-app",
  environment: "production",
});

Naming screens

Auto-tracking uses the path by default. For clean, stable flow maps, name your screens explicitly with trackView — especially in SPAs where one path can represent different screens:

simplrRUM.trackView("Checkout");
simplrRUM.trackView("Product Detail");

Use consistent names across web and mobile so the same step lines up in the flow.

React

Use the helpers to track a screen per route with one line:

import { useTrackView, RUMView } from "@simplr-ai/js/react";

function CheckoutPage() {
  useTrackView("Checkout");
  return <Checkout />;
}

// or wrap a subtree
<RUMView name="Checkout">
  <Checkout />
</RUMView>;

With React Router, track on location change once at the app root:

import { useLocation } from "react-router-dom";
import { simplrRUM } from "@simplr-ai/js";

function ScreenTracker() {
  const location = useLocation();
  useEffect(() => {
    simplrRUM.trackView(nameForPath(location.pathname));
  }, [location.pathname]);
  return null;
}

Identifying users (optional)

simplrRUM.setUser("user_123");
simplrRUM.clearUser();

What you get

Journeys appear under RUM → User Flows — a branching map of screen-to-screen transitions with drop-off rates, filterable by channel (web / iOS / Android) and broken down by browser/OS on each screen. See User Flows.