v0 | OnyxMetric

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

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 v0

Paste this into the chat:

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

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

Open the Code tab in the preview toolbar, then app/layout.tsx, and add the Script component inside <body>:

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.onyxmetric.com/api/script.js?siteId=YOUR_SITE_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Save the file.

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

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.js returns 200 and that requests go to /api/track.
Turn off ad blockers, or proxy the script through your own domain.
Read script troubleshooting for other causes.

Track custom events

Call window.onyx.event() from a client component. Guard the call, because 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.onyx) {
      window.onyx.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 changes only after Publish to Production. Projects connected to GitHub go through a pull request that v0 merges before the production deploy runs.
v0 rewrote the layout: a later prompt can regenerate app/layout.tsx. Add "keep the OnyxMetric 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 uses 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 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.

v0