Next.js

Use the script tag for the default install, or the optional Next.js package wrapper when you want typed helpers.

Install

The recommended Next.js install is the standard HTML script tag in your root layout. The optional package wrapper below loads the same hosted tracker script and adds typed exports for custom events and visitor ID access.

1
Add the package
bash
npm install produl-tracker
2
Add Analytics to your layout
For App Router, import from produl-tracker/next and place <Analytics> inside your root layout. Pageview tracking is handled by the injected tracker script, including client-side route changes.

App Router

Add <Analytics> to app/layout.tsx. It renders a <script> tag in the document, so you only need it once at the root.

app/layout.tsxtsx

import { Analytics } from 'produl-tracker/next'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Analytics siteId="YOUR_SITE_API_KEY" />
      </body>
    </html>
  )
}

Pages Router

The same Analytics component works in Pages Router — add it to pages/_app.tsx. The runtime tracks route changes through the browser History API, so do not add a separate router.events pageview handler.

pages/_app.tsxtsx

import { Analytics } from 'produl-tracker/next'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Analytics siteId="YOUR_SITE_API_KEY" />
      <Component {...pageProps} />
    </>
  )
}

Configuration

Prop	Type	Default	Description
`siteId`	`string`	—	Required. Your public site API key from the dashboard.
`serverUrl`	`string`	hosted instance	Override the tracker server URL (e.g. for self-hosting).
`endpoint`	`string`	script origin	Advanced override for the Produl server base URL used by `/r`, `/b`, and `/f`.
`debug`	`boolean`	`false`	Show a debug overlay listing every tracked event.

Environment variable

If you want to configure the server URL without hardcoding it, set NEXT_PUBLIC_MULTIANALYTICS_URL in your environment. The tracker reads this automatically — no prop required.

.env.localbash

NEXT_PUBLIC_MULTIANALYTICS_URL=https://your-instance.example.com

Sending custom events

Import track from produl-tracker/next and call it anywhere in your app: track('signup', { plan: 'pro' }). See Custom Events for the full API.

Overview

React