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 openrevenue

npm install openrevenue

app/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.