Next.js
Add OpenRevenue to App Router or Pages Router with Next.js Script.
Add the script
Copy your project ID from Settings → General, then add the tracker to the right file for your router.
✦
Use Next.js
Script. It loads the tracker outside your app bundle.App Router
Add the script to your root app/layout.tsx:
app/layout.tsx
import Script from "next/script" export default function RootLayout({ children }) { return ( <html> <body> {children} <Script src="https://api.openrevenue.com/tracker.js" data-site="your-project-id" strategy="afterInteractive" /> </body> </html> )}import Script from "next/script" export default function RootLayout({ children }) { return ( <html> <body> {children} <Script src="https://api.openrevenue.com/tracker.js" data-site="your-project-id" strategy="afterInteractive" /> </body> </html> )}Pages Router
Add the script to your pages/_app.tsx:
pages/_app.tsx
import Script from "next/script"import type { AppProps } from "next/app"import { API_URL } from "@/lib/urls" export default function App({ Component, pageProps }: AppProps) { return ( <> <Component {...pageProps} /> <Script src="https://api.openrevenue.com/tracker.js" data-site="your-project-id" strategy="afterInteractive" /> </> )}import Script from "next/script"import type { AppProps } from "next/app"import { API_URL } from "@/lib/urls" export default function App({ Component, pageProps }: AppProps) { return ( <> <Component {...pageProps} /> <Script src="https://api.openrevenue.com/tracker.js" data-site="your-project-id" strategy="afterInteractive" /> </> )}npm package
Prefer a package? Install openrevenue and use the thin OpenRevenueScript helper (still loads the CDN tracker), or call init from a client component.
terminal
npm install openrevenuenpm install openrevenueapp/layout.tsx
import { OpenRevenueScript } from "openrevenue/next" export default function RootLayout({ children }) { return ( <html> <body> {children} <OpenRevenueScript siteId="your-project-id" /> </body> </html> )}import { OpenRevenueScript } from "openrevenue/next" export default function RootLayout({ children }) { return ( <html> <body> {children} <OpenRevenueScript siteId="your-project-id" /> </body> </html> )}components/analytics.tsx
"use client" import { useEffect } from "react"import { init, track } from "openrevenue" export function Analytics() { useEffect(() => { init({ siteId: "your-project-id" }) }, []) return null} // Elsewhere: track("signup")"use client" import { useEffect } from "react"import { init, track } from "openrevenue" export function Analytics() { useEffect(() => { init({ siteId: "your-project-id" }) }, []) return null} // Elsewhere: track("signup")Verify
Deploy your app and visit any page. A pageview should appear in your OpenRevenue dashboard within seconds.
ℹ
OpenRevenue ignores
localhost and 127.0.0.1 automatically. Open your live site, not the dev server.