Lovable

Lovable has no project setting for custom head code, so the snippet goes into the app's HTML head like any other code change: ask Lovable to add it in chat, or open the Code tab and edit the file yourself. Either way, the live app only picks it up after you publish the change.

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 Lovable

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

Add this script tag to the <head> of the app on every page. Do not remove any existing head tags.
<script src="https://app.rybbit.io/api/script.js?siteId=YOUR_SITE_ID" defer></script>

Check the diff Lovable shows: the tag belongs in the document head, not in a React component.

Open the Code tab in the project toolbar (editing needs a paid plan; on the Free plan the editor is read-only). Which file holds the head depends on when the project was created:

Projects created from May 13, 2026 use TanStack Start. Add the script to the head() of the root route in src/routes/__root.tsx; the <HeadContent /> component already in that file renders it into the <head>:

src/routes/__root.tsx

export const Route = createRootRoute({
  head: () => ({
    scripts: [
      { src: "https://app.rybbit.io/api/script.js?siteId=YOUR_SITE_ID", defer: true },
    ],
  }),
  component: RootComponent,
});

Older React + Vite projects have a single index.html at the project root. Paste the snippet before </head>:

index.html

<head>
  <meta charset="UTF-8" />
  <title>My app</title>
  <script src="https://app.rybbit.io/api/script.js?siteId=YOUR_SITE_ID" defer></script>
</head>

Save with Cmd+S / Ctrl+S.

Then click Publish in the top right and choose Publish changes. Client-side route changes inside the app are 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.

Troubleshooting

Live app still has no script: Lovable does not push edits to the published app automatically. A dot on the Publish button means unpublished changes; open it and click Publish changes.
Free plan: the Code tab is read-only, so use the chat prompt instead.
Script disappeared after a later prompt: Lovable can rewrite the head when it regenerates the layout or upgrades the template. Add "keep the Rybbit script tag" to the project's Knowledge so future edits preserve it, and re-check the page source after big changes.

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.

Get your tracking snippet

Add the snippet to Lovable

Verify installation

Troubleshooting

Next steps

On this page