SPA Support
Single-page app routing is handled automatically. Here's how it works and when you might need manual control.
Automatic tracking
The SDK automatically tracks pageviews for single-page applications by listening to:
history.pushState— triggered by client-side navigation (React Router, Vue Router, Next.js, etc.)popstate— triggered when the user clicks the browser's back/forward buttons
No configuration is needed. Just install the script and every route change will be tracked.
Works with all major frameworks: React, Vue, Svelte, Angular, Next.js, Nuxt, SvelteKit, Astro (with client-side routing enabled).
Manual pageview
In rare cases where you need to trigger a pageview manually (e.g. after a hash change or a custom router), use:
ripples.pageview()
This sends a pageview event with the current location.href, location.pathname, and document.title.
Session & entry page tracking
Sessions are tracked per-tab using sessionStorage. A session expires after 30 minutes of inactivity.
Each session records:
- Entry URL — the first page the user landed on in this session
- Entry path — the path portion of the entry URL
- Entry referrer — the domain that brought the user to your site
These values persist across all pageviews within the same session, so you can always see where a session originally started — even after the user has navigated away from the landing page.
Web Vitals
The SDK automatically collects Core Web Vitals using the browser's PerformanceObserver API:
| Metric | Description |
|---|---|
LCP |
Largest Contentful Paint — measures loading performance |
FCP |
First Contentful Paint — time to first visible content |
CLS |
Cumulative Layout Shift — measures visual stability |
INP |
Interaction to Next Paint — measures responsiveness |
TTFB |
Time to First Byte — measures server response time |
These are combined into an Experience Score (0–100) shown in your dashboard. Vitals are reported once per page load, after at least 3 metrics have been collected (or after a 10-second timeout).