Open-source web analytics and RUM for Next.js
Zero-config cookieless web analytics, p75 Core Web Vitals RUM, custom conversion events, and runtime crash monitoring designed natively for Next.js applications.
npm install or use universal 1-line script tagComplete Next.js Integration Guide
Follow these steps to track pageviews, custom events, Core Web Vitals, and errors.
1Add Tracking Script to Root Layout
Using Next.js `next/script` with `strategy="afterInteractive"` ensures the sub-3.2KB beacon loads without delaying initial server-rendered HTML.
// app/layout.tsx (App Router)
import Script from "next/script";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<Script
src="https://api.openanalytics.org.in/open.js"
data-project-id="prj_your_project_id"
strategy="afterInteractive"
/>
</head>
<body>{children}</body>
</html>
);
}2Alternative: Pages Router Setup
If your project uses Next.js Pages Router, embed the script inside `pages/_app.tsx` or `pages/_document.tsx`.
// pages/_app.tsx (Pages Router)
import type { AppProps } from "next/app";
import Script from "next/script";
export default function MyApp({ Component, pageProps }: AppProps) {
return (
<>
<Script
src="https://api.openanalytics.org.in/open.js"
data-project-id="prj_your_project_id"
strategy="afterInteractive"
/>
<Component {...pageProps} />
</>
);
}3TypeScript Declarations (Optional)
Provide type safety when invoking custom tracking events on the global `window.OpenAnalytics` namespace.
// types/openanalytics.d.ts
interface Window {
OpenAnalytics?: {
track: (eventName: string, properties?: Record<string, unknown>) => void;
captureError: (error: Error | string, context?: Record<string, unknown>) => void;
page: (pathname?: string) => void;
};
}Tracking Next.js Conversion Events
Dispatch custom business conversions such as signups, upgrades, checkout completions, and downloads.
"use client";
export function CheckoutButton() {
const handlePurchase = async () => {
// Execute checkout logic...
// Track conversion event in Open Analytics
if (typeof window !== "undefined" && window.OpenAnalytics) {
window.OpenAnalytics.track("purchase_completed", {
plan: "pro_annual",
amount: 180,
currency: "USD",
});
}
};
return (
<button onClick={handlePurchase}>
Complete Purchase
</button>
);
}Automated Field Performance
In Next.js, Open Analytics automatically hooks into W3C PerformanceObservers to capture p75 field LCP, INP, CLS, FCP, and TTFB. Soft client-side route transitions using `next/link` are measured separately from initial document loads.
Runtime Crash Triage
Global runtime errors and unhandled promise rejections inside Client Components are automatically captured with circular user action breadcrumbs, route paths, and component stacks without requiring custom error wrappers.
Frequently Asked Questions
Add Open Analytics to your Next.js app today
Zero cookies, sub-3.2 KB payload, real-time Core Web Vitals RUM, and automated crash triage.