Fumadocs
Add Rybbit analytics to your Fumadocs docs
Fumadocs is a documentation framework for Next.js, so the snippet goes in the root layout, app/layout.tsx, rendered with next/script so it is on every page including the docs routes.
Get your tracking snippet
In your Rybbit dashboard, open Site Settings → Tracking Script and copy your snippet. It looks like this:
<script src="https://app.rybbit.io/api/script.js?siteId=YOUR_SITE_ID" defer></script>YOUR_SITE_ID is the numeric ID of your site. If you self-host Rybbit, app.rybbit.io is the domain of your own instance.
Add the snippet to Fumadocs
Open app/layout.tsx and render the Script component inside <body>, next to the RootProvider that Fumadocs already puts there:
import { RootProvider } from "fumadocs-ui/provider/next";
import Script from "next/script";
import type { ReactNode } from "react";
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.rybbit.io/api/script.js?siteId=YOUR_SITE_ID"
strategy="afterInteractive"
/>
</body>
</html>
);
}Use the root layout, not app/docs/layout.tsx: the docs layout only wraps pages under /docs, so a landing page outside it would be missed.
Client-side navigation between docs pages is recorded as pageviews automatically. The Next.js guide covers the Script component, custom events from client components and proxying through your own domain.
Verify installation
Open your live site in a new tab and click through a few pages. Within a few seconds the pageviews appear in the Rybbit dashboard.
If nothing shows up:
- View the page source and search for
script.js?siteId=to confirm the snippet is on the page. - Open the browser Network tab and check that
script.jsreturns200and thatPOSTrequests go to/api/track. - Disable ad blockers, or set up a proxy so the script loads from your own domain.
- See the script troubleshooting guide for other common causes.
Next steps
- Track custom events such as signups, purchases and button clicks.
- Identify users to connect sessions to accounts.
- Proxy the script through your own domain to bypass ad blockers.
- Script attributes let you skip or mask URLs and tag events.