v0 | Rybbit

v0 generates Next.js apps, so there is no single index.html and no project setting for head code. The snippet goes into the root layout, app/layout.tsx, through a next/script tag that renders on every page. Ask v0 to add it or edit the file in the Code tab, then publish.

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 v0

Paste this into the chat, with your site ID in place of the placeholder:

Add the Rybbit analytics script to the root layout (app/layout.tsx) using next/script with strategy="afterInteractive", so it loads on every page:
https://app.rybbit.io/api/script.js?siteId=YOUR_SITE_ID

Check the diff: the <Script> belongs in app/layout.tsx, not in a page or component.

Select the Code tab in the preview toolbar, open app/layout.tsx and add the Script component inside <body>. The defer attribute from the snippet is not needed; the strategy handles timing.

app/layout.tsx

import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://app.rybbit.io/api/script.js?siteId=YOUR_SITE_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Press Cmd+S / Ctrl+S to save.

Click Publish in the top right of the chat, then Publish to Production. Navigation through <Link> and router.push() is tracked as pageviews automatically.

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.js returns 200 and that POST requests 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.

Track custom events

Call window.rybbit.event() from a client component. Guard the call, because v0 components can render on the server and the script loads after hydration.

components/signup-button.tsx

"use client";

export function SignupButton() {
  const handleClick = () => {
    if (typeof window !== "undefined" && window.rybbit) {
      window.rybbit.event("signup_click", { location: "hero" });
    }
  };

  return <button onClick={handleClick}>Sign up</button>;
}

Troubleshooting

Production has no script: the preview updates on save, but the live site only changes after Publish to Production. Projects connected to GitHub go through a pull request that v0 merges before the production deployment runs.
v0 rewrote the layout: a later prompt can regenerate app/layout.tsx. Add "keep the Rybbit Script tag in app/layout.tsx" to the project's custom instructions, and re-check the page source after large changes.
Pages Router: if your project has pages/ instead of app/, put the Script in pages/_app.tsx as shown in the Next.js guide.

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.