Fumadocs
Add OnyxMetric analytics to your Fumadocs docs
Fumadocs is a documentation framework for Next.js. Render the script with next/script in the root layout so it covers every page, including the docs routes.
Copy your tracking snippet
In OnyxMetric, open your site's Site Settings and copy the tracking script. It looks like this:
<script src="https://app.onyxmetric.com/api/script.js?siteId=YOUR_SITE_ID" async></script>YOUR_SITE_ID is the numeric ID of your site.
Add the snippet to Fumadocs
In app/layout.tsx, render Script inside <body>, beside the RootProvider that Fumadocs already places there:
import Script from "next/script";
export default function Layout({ children }: { children: ReactNode }) {
return (
<html lang="en" suppressHydrationWarning>
<body className="flex flex-col min-h-screen">
<RootProvider>{children}</RootProvider>
<Script
src="https://app.onyxmetric.com/api/script.js?siteId=YOUR_SITE_ID"
strategy="afterInteractive"
/>
</body>
</html>
);
}Use the root layout, not app/docs/layout.tsx: that one only wraps pages under /docs, so a landing page outside it would be missed.
Navigation between docs pages is tracked automatically. The Next.js guide explains more about Script and about custom events from client components.
Check that it works
Load your live site and click through a few pages. Pageviews show up in the OnyxMetric dashboard within seconds.
If nothing arrives:
- View the page source and search for
script.js?siteId=to confirm the tag is present. - In the browser's Network tab, check that
script.jsreturns200and that requests go to/api/track. - Turn off ad blockers, or proxy the script through your own domain.
- Read script troubleshooting for other causes.
Next steps
- Track custom events such as signups, purchases, and clicks.
- Identify users to tie sessions to accounts.
- Proxy the script through your own domain to get past ad blockers.
- Script attributes let you skip or mask URLs and tag events.