Vercel
Vercel deploys both static sites and server-rendered apps. Add the snippet to the root layout of your framework so it renders on every page.
Finding the root layout in common Vercel frameworks
Vercel hosts projects from many different frameworks. The file you edit depends on which framework your project uses. For Next.js App Router, it is app/layout.tsx (or .jsx, .js). For Next.js Pages Router, it is pages/_document.tsx. For SvelteKit, it is src/routes/+layout.svelte. For Astro, it is a Layout.astro component. For Nuxt 3, it is app.vue or a layout component in layouts/.
In all cases, find the file that outputs the outermost HTML wrapper — the one that contains <html>, <head>, and <body> tags. Paste the snippet before the closing </body> tag in that file. The framework will include it in every page it renders.
For Next.js App Router specifically, paste the snippet in app/layout.tsx as a plain <script> tag inside the <body> element, after the {children} expression. Next.js will include it in the rendered HTML for every route.
Plain HTML or Vite-based static sites on Vercel
If your Vercel project is a plain HTML site without a framework, find the index.html or the shared HTML template that is used as the base for all pages. Paste the snippet before </body>. Push to your repository or drop the folder in the Vercel deploy interface.
For Vite projects (React, Vue, Svelte without SSR), the root HTML file is index.html in the project root. Paste the snippet there and Vite will include it in every page of the built site.
For static site generators whose output you deploy directly to Vercel (rather than using Vercel's built-in build), the snippet should be in the source layout, not the compiled output. The compiled output is overwritten on every build.
Vercel custom domains
Every Vercel project gets a vercel.app subdomain. When you add a custom domain in Project Settings → Domains, Vercel provisions SSL and routes traffic to your custom domain. Use the custom domain as the site identifier in your StatelessID dashboard.
Vercel also creates preview deployments for every pull request and branch push. Each preview gets a unique URL. If you do not want preview deployments to send beacons to your production data, add a runtime check in the root layout that reads the hostname and only renders the snippet when the hostname matches your production domain.
In Next.js, you can use process.env.VERCEL_URL or a custom environment variable to detect non-production environments. Set NEXT_PUBLIC_STATELESSID_KEY to your site key in production-only environment variable settings in the Vercel dashboard, and conditionally render the script tag only when that variable is set.
Server-rendered pages and single-page navigation
The StatelessID snippet fires on the browser's load event. For a traditional multi-page application where every navigation triggers a full page load, every route change will fire a beacon. Your dashboard page view count will reflect every full-page navigation.
For single-page applications (Next.js with client-side navigation, SvelteKit transitions, Nuxt transitions), subsequent navigations after the initial page load do not fire a new load event and therefore do not fire a new beacon. You will see the initial page load counted but not soft navigations.
This is a fundamental characteristic of stateless beacon tracking — it measures what the browser reports as a complete page load. If full SPA navigation tracking matters for your project, consider measuring server-rendered entry points and treating SPA navigation as a separate problem outside this tool's scope.
Troubleshooting
I added the snippet to the Next.js App Router layout but I only see one page view even when navigating to multiple pages. Next.js client-side navigation does not trigger a new page load event after the initial render. The snippet fires once on the initial load. Subsequent route changes in the SPA do not trigger new beacons.
The snippet is in app/layout.tsx but Vercel preview builds are sending data to my production dashboard. Set the snippet to only render when a production environment variable is present, or use a separate StatelessID site registration for staging and set a different key in development environments.
My Vercel project uses Edge Runtime and the snippet is not appearing. The snippet is a static HTML tag — it has no dependency on the runtime. Check that the layout file outputting the <body> tag is being rendered correctly by looking at the HTML source of the deployed page.