Next.js

Add Produl to a Next.js app. App Router is fully supported with automatic client-side route tracking.

Install

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. The component uses usePathname() internally so every client-side navigation is tracked automatically.

App Router

Add <Analytics> to app/layout.tsx. It renders a <script> tag in the document and wires up route-change listeners, 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_ID" />
      </body>
    </html>
  )
}

Pages Router

The same Analytics component works in Pages Router — add it to pages/_app.tsx. Automatic route tracking is not available in Pages Router because the component cannot observe Next.js router events from inside the tree. You have two options: call track('pageview') manually on each page, or set up a router.events listener in _app.tsx.

pages/_app.tsxtsx

import { Analytics, track } from 'produl-tracker/next'
import { useRouter } from 'next/router'
import { useEffect } from 'react'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  const router = useRouter()

  useEffect(() => {
    const handleRouteChange = () => track('pageview')
    router.events.on('routeChangeComplete', handleRouteChange)
    return () => router.events.off('routeChangeComplete', handleRouteChange)
  }, [router.events])

  return (
    <>
      <Analytics siteId="YOUR_SITE_ID" />
      <Component {...pageProps} />
    </>
  )
}

Configuration

Prop	Type	Default	Description
`siteId`	`string`	—	Required. Your site ID from the dashboard.
`serverUrl`	`string`	hosted instance	Override the tracker server URL (e.g. for self-hosting).
`disableAutoTrack`	`boolean`	`false`	Disable automatic pageview tracking on route changes.
`endpoint`	`string`	`/api/collect`	Base URL that pageview and event data is sent to.
`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