# Install on Lovable

> Add MetricRaven to a Lovable app by asking Lovable, or by editing the code yourself.

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

The quickest way is to ask Lovable to add the tag. You can also edit the file yourself in Code mode or through GitHub.

## Ask Lovable

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 **Update** for an app that is already live). The editor preview isn't your published app.

## Or edit the code

Open the **Code** tab (editing needs a paid Lovable plan) or edit the repository you synced to GitHub. Where the tag goes depends on how the app was built:

- **Vite + React** (most apps created before May 2026): paste the tag before `</head>` in `index.html`.
- **TanStack Start** (newer, server-rendered apps; `package.json` lists `@tanstack/react-start`): add it to the document head in the root route, `src/routes/__root.tsx`.

```html title="Your app's head"
<script
  defer
  src="https://metricraven.com/js/script.js"
  data-site-id="YOUR_SITE_ID"
></script>
```

> **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.lovable.app`, add it there; otherwise those requests are refused with `domain_not_allowed`.
- 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.
- To record signups or other actions, ask Lovable to call `window.analytics.track("signup")` at that point; see [Goals & funnels](https://metricraven.com/docs/goals-funnels).

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).