Single-page apps

In a single-page app (SPA), moving between "pages" doesn't reload the browser; the framework swaps the content and updates the URL. Snow handles this for you.

It just works

When the URL changes through the browser's History API (which is how React Router, Vue Router, Next.js, SvelteKit, Astro, and essentially every modern router navigate), Snow automatically records a new page view. You don't need to add any router hooks or call anything yourself. Install the snippet once in your root layout and client-side navigations are tracked.

Snow watches pushState, replaceState and the browser back/forward buttons (popstate). A new path is a new page view, and so is a query string change made by pushState or back/forward, such as ?page=2. But a page view within 10 seconds of the visitor's last counted one on the same path is merged into it. A replaceState that only rewrites the query string, the way routers sync filters or strip UTM tags, stays the same page view, and so does a jump to an anchor such as #pricing.

Recording a page view manually

Use sa.page() when you want to record a view yourself, for a "virtual" page like a modal or wizard step, or a router that doesn't use the History API:

// Record the current URL as a page view
sa.page();

// Record a specific path (e.g. a virtual step)
sa.page("/checkout/step-2");

Hash-based routing

A hash router that keeps its route after #/ or #!/ (for example /#/dashboard), like React Router's HashRouter or Vue Router's hash mode, is tracked automatically. Each route is recorded under the path the app is served from, such as /. So a route change within 10 seconds of the visitor's last counted page view on that path is merged into it.

If your router's hash has no leading slash (for example /#dashboard), Snow can't tell it from an anchor, so call sa.page() yourself whenever the route changes:

window.addEventListener("hashchange", () => sa.page());