Skip to main content

Documentation Index

Fetch the complete documentation index at: https://revlytics.co/docs/llms.txt

Use this file to discover all available pages before exploring further.

Add the script to your root layout:
app/layout.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "My App",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <head>
        <script
          defer
          data-site="YOUR_SITE_ID"
          src="https://revlytics.co/script.js"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

​
Pages Router

Add the script to your custom _app.tsx or _document.tsx:
pages/_document.tsx
import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html>
      <Head>
        <script
          defer
          data-site="YOUR_SITE_ID"
          src="https://revlytics.co/script.js"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

​
SPA navigation

Revlytics automatically detects client-side navigation in Next.js (both App Router and Pages Router). No extra configuration is needed — the script listens for pushState, replaceState, and popstate events.

​
Track custom events

components/SignupButton.tsx
export function SignupButton() {
  const handleClick = () => {
    window.revlytics?.track("signup_click", { plan: "pro" });
  };

  return <button onClick={handleClick}>Sign Up</button>;
}
For TypeScript, you can extend the Window interface:
declare global {
  interface Window {
    revlytics?: {
      track: (name: string, props?: Record<string, unknown>) => void;
      identify: (userId: string, traits?: Record<string, unknown>) => void;
      optOut: () => void;
      optIn: () => void;
    };
  }
}

​
Environment-based loading

Only load the script in production:
app/layout.tsx
<head>
  {process.env.NODE_ENV === "production" && (
    <script
      defer
      data-site="YOUR_SITE_ID"
      src="https://revlytics.co/script.js"
    />
  )}
</head>