SPA + route changes

Single-page apps don't load a new HTML document on navigation, so a naive analytics tracker only ever sees the first page. Tracera handles this automatically and gives you escape hatches when you need them.

The default behaviour

The tracker hooks history.pushState and the popstate event. Every URL change automatically becomes a new pageview event with the new path. Most SPA routers (React Router, Vue Router, Next.js, and similar) push history state on navigation, so the basic snippet usually just works.

<script defer src="https://tracera.eu/t.js" data-pk="pk_..."></script>

Manual pageviews

If you want explicit control (modal-as-page, virtual paths, multi-step wizards), call manually from your router:

router.afterEach((to) => {
  tracera('pageview', to.fullPath);
});

React example

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

// Drop this once at app root. Auto-tracker can be left ON or OFF.
export function TraceraRouteWatcher() {
  const loc = useLocation();
  useEffect(() => { window.tracera?.('pageview'); }, [loc.pathname, loc.search]);
  return null;
}

Next.js (App Router)

'use client';
import { usePathname, useSearchParams } from 'next/navigation';
import { useEffect } from 'react';

export default function TraceraTracker() {
  const path = usePathname();
  const sp = useSearchParams();
  useEffect(() => { window.tracera?.('pageview'); }, [path, sp]);
  return null;
}

Tracking modal "pages"

Sometimes a modal carries enough content to deserve its own pageview. Send a virtual path:

tracera('pageview', '/checkout/billing-modal');