Documentation
On this page

Install on Next.js

Install the website tracker in the App Router root layout so it runs across your application.

Before you start

If you don't have a Jelto account yet, create one. Register your production hostname. In Settings → Installation or guided setup, choose Install manually and select Next.js under Your platform to copy ready-to-paste next/script code for the root layout. This guide uses Next.js App Router; you only edit your own Next.js project.

Add the script

  1. Open app/layout.tsx, or src/app/layout.tsx if your project uses src.
  2. Import Script from next/script.
  3. Add the component once in the existing root layout, using your copied values:
import Script from 'next/script'

export default function RootLayout({
  children,
}: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script id="jelto" strategy="afterInteractive"
          src="https://app.jelto.io/jelto.js"
          data-product="YOUR_PRODUCT_ID"
          data-endpoint="https://app.jelto.io/v1/e" />
      </body>
    </html>
  )
}

Keep your existing layout content, providers and metadata. Replace YOUR_PRODUCT_ID with your public product ID (prd_8f3kq2m9x1) from Settings → Installation. This example uses Jelto's standard cookieless script; preserve any custom tracking domain, cookie-mode script or additional options from your copied tag. Additional data-* attributes are forwarded by Next.js to the script.

  1. Build and deploy the application using your normal production workflow.

Verify

Open the published homepage, use a Next.js link to open another route, and use Back. Check those pages in Jelto and run installation verification.

Common problems

Do not add the tracker to each page or send an extra manual pageview for navigation already handled by Jelto. Code that sends a custom goal must run in the browser after the script has loaded; it cannot run in a Server Component. If you enforce a content security policy, add the script and ingestion hosts from your copied values as shown in Endpoints and content security policy, and preserve your nonce policy.

Platform reference: Next.js script loading.