Framework Integration
VeloStats automatically listens to the browser History API (pushState, replaceState, and popstate) so page transitions in Single Page Applications (SPAs) are tracked out of the box without special routing hooks.
Next.js (App Router)
Add the script to your root layout (app/layout.tsx):
import Script from 'next/script';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<Script
src="https://velostats.dev/velo.js"
data-site-key="YOUR_SITE_KEY"
strategy="afterInteractive"
/>
</head>
<body>{children}</body>
</html>
);
}Astro
Add the script to your base layout (src/layouts/Layout.astro):
---
// src/layouts/Layout.astro
---
<!doctype html>
<html lang="en">
<head>
<script
defer
src="https://velostats.dev/velo.js"
data-site-key="YOUR_SITE_KEY"
is:inline>
</script>
</head>
<body>
<slot />
</body>
</html>React / Vite SPA
Add the script directly to your index.html inside <head>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script defer src="https://velostats.dev/velo.js" data-site-key="YOUR_SITE_KEY"></script>
<title>My App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>