Add PageLens analytics to Next.js

Steps

1. Open app/layout.tsx (App Router) or pages/_app.tsx (Pages Router).
2. Add the Script component. Client-side route changes are tracked automatically.
3. Deploy and check the dashboard.

import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://app.pagelens.io/script.js"
          data-site-id="YOUR_SITE_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Replace YOUR_SITE_ID with the id from your site settings in PageLens. The dashboard shows the exact snippet with your id filled in.

Check that it works

Open your site in a new tab, then open PageLens. The live counter shows your visit within a few seconds. Visits from localhost are ignored by default.

Track custom events

Add data-pagelens-event to any button or form, or call the JavaScript API:

<button data-pagelens-event="signup" data-pagelens-prop-plan="pro">Start trial</button>

<script>
  window.pagelens?.track('signup', { plan: 'pro' })
</script>

You can also turn on autocapture for button clicks, form submissions and copy events in Site Settings → Tracking. No code is needed.

Avoid ad blockers

Some ad blockers drop requests to analytics domains. Serve PageLens from your own domain to count those visits too.

Other frameworks