Add PerchLens to a Next.js, Nuxt, SvelteKit, or static site deployed on Vercel.
For Next.js App Router, drop the tag in app/layout.tsx inside the <head>. For Pages Router, use _document.tsx. The defer attribute keeps it from blocking render.
// app/layout.tsx (Next.js App Router)
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html>
<head>
<script defer src="https://perchlens.com/cv.js" data-site="{SITE_ID}"></script>
</head>
<body>{children}</body>
</html>
);
}Vercel auto-deploys on push to your main branch. The script loads on first request — no further configuration needed.
git add app/layout.tsx
git commit -m "add perchlens analytics"
git push origin mainVisit your live site once to register a pageview, then check the PerchLens dashboard. The realtime counter will tick up within a few seconds.
{SITE_ID} in the snippets above with your actual tracking ID. You'll find it in Settings → Tracking after creating a site.Check that the script src loads correctly in your browser DevTools Network tab. If it 404s, verify your deployment includes the new layout.
Yes. Use strategy="afterInteractive" so it loads after hydration. The defer attribute we use achieves the same thing without the wrapper.
Create a free account to get your tracking ID — takes about 30 seconds.
“Set it up in 30 seconds. Replaced two paid tools.”
— Indie maker on X
“Finally, analytics I actually look at every day.”
— SaaS founder
“My users appreciate no cookie banner. I appreciate the simplicity.”
— Agency developer
Join thousands of makers who track their sites with clarity, not complexity. Free forever for up to 3 sites.