# Install on v0

> Add MetricRaven to a v0 app by prompting v0 or editing app/layout.tsx, then publish to Vercel.

Source: https://metricraven.com/docs/install-v0  
Markdown: https://metricraven.com/docs/install-v0.md  
Section: Installation guides

v0 builds Next.js apps, so the tag goes in the root layout. Ask v0 to add it or edit the file yourself, then publish.

## Ask v0

1. **Send this prompt in the chat**

   Replace `YOUR_SITE_ID` with the public site ID from your site's **Settings → Install** card. The site ID is public and safe in browser code; never put your secret key in a page.

   ```text title="Prompt"
   Add this analytics script to every page of the app. Load it once for the whole app,
   in index.html or the root layout (with next/script in a Next.js app), never from a single
   page or component. Keep the src and data-site-id attributes exactly as written:

   <script defer src="https://metricraven.com/js/script.js" data-site-id="YOUR_SITE_ID"></script>
   ```

2. **Publish**

   Choose **Publish** (or **Publish Changes** later). The chat preview isn't your production site.

## Or edit the code

1. **Open app/layout.tsx in the code editor**

   Add the `Script` import and element, keeping the rest of your layout. Replace `YOUR_SITE_ID` with the public site ID from your site's **Settings → Install** card. The site ID is public and safe in browser code; never put your secret key in a page.

   ```typescript title="app/layout.tsx"
   // 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://metricraven.com/js/script.js"
             data-site-id="YOUR_SITE_ID"
             strategy="afterInteractive"
           />
         </body>
       </html>
     );
   }
   ```

2. **Publish and open the live URL**

   The same code works after you sync the project to GitHub. See the [Next.js guide](https://metricraven.com/docs/install-nextjs) for details.

> **Verify it works**
>
> Open your live website in a normal browser window (not an automated or embedded one). In the browser's Network panel, look for `script.js` and then a request to `/api/v1/collect` whose response contains `ok: true`. Open your site's **Traffic** tab and choose **Refresh**; the selected dates must include your visit.
>
> Nothing showing? See [Troubleshooting](https://metricraven.com/docs/troubleshooting).

## Notes

- Only hostnames listed in your site's **Settings → General → Site** domains (and their subdomains) are accepted. To also count visits on a platform address such as `your-app.vercel.app`, add it there; otherwise those requests are refused with `domain_not_allowed`.
- Each preview deployment gets its own URL. Leave those hostnames out of your allowed domains if you only want production traffic.
- AI edits can drift. After each publish, open your live app, view the page source and check the tag is still in `<head>` with its `data-site-id` unchanged.
- Click between a few pages and check the Network panel shows one `/api/v1/collect` pageview per navigation. Two per click means the tag is loaded twice.

Optional script attributes are listed in [Install & verify](https://metricraven.com/docs/install). To exclude your own visits, see [Exclude your visits](https://metricraven.com/docs/exclude-visits).