Track a single-page app

The pixel fires one pageview when the document loads. In a single-page app, navigations don’t reload the document — so you fire a pageview yourself on each route change. Everything else (the vid, identify, revenue attribution) works unchanged.

1. Load the pixel once

Add the script to your app shell so it loads on first paint:

<script async src="https://www.trackrev.io/p.js" data-id="YOUR_WORKSPACE_ID"></script>

2. Fire a pageview on each route change

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

export function usePageviews() {
  const location = useLocation();
  useEffect(() => {
    window.trk?.pageview();
  }, [location.pathname]);
}

"use client";
import { useEffect } from "react";
import { usePathname } from "next/navigation";

export function usePageviews() {
  const pathname = usePathname();
  useEffect(() => {
    window.trk?.pageview();
  }, [pathname]);
}

router.afterEach(() => {
  window.trk?.pageview();
});

Use optional chaining (window.trk?.pageview()) so a route change never throws if the script hasn’t finished loading yet.

3. Identify and track as usual

These don’t depend on route changes — call them whenever the event happens:

// on login / signup
window.trk?.identify("customer@example.com");

// a custom conversion event
window.trk?.track("trial_started", { plan: "pro" });

4. Pass the vid at checkout

If checkout runs client-side, read window.trk.vid when you create the session; if it runs server-side, read the vid cookie. See Pass the visitor id to checkout.

Your SPA now records a pageview per navigation, and the visitor journey shows the full in-app path — not just the landing page.

Launch an affiliate programme Migrate an affiliate programme

⌘I

Get started

Links & Analytics

Revenue Attribution

Affiliate & Partners

For affiliates

Free tools

Account & workspace

Guides

Track a single-page app

1. Load the pixel once

2. Fire a pageview on each route change

3. Identify and track as usual

4. Pass the vid at checkout

​1. Load the pixel once

​2. Fire a pageview on each route change

​3. Identify and track as usual

​4. Pass the vid at checkout

1. Load the pixel once

2. Fire a pageview on each route change

3. Identify and track as usual

4. Pass the vid at checkout