Lovable

Lovable has no project setting for custom head code, so the tag 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. The live app picks it up only after you publish.

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 Lovable

Paste this into the chat:

Add this script tag to the <head> of every page and keep all existing head tags:
<script src="https://app.onyxmetric.com/api/script.js?siteId=YOUR_SITE_ID" async></script>

Review the change: the tag belongs in the document head, not inside a component.

Open the Code tab in the project toolbar. Editing needs a paid plan, because the editor is read-only on Free. Which file holds the head depends on the project's age:

Newer projects (TanStack Start): add the script to the head() of the root route in src/routes/__root.tsx. The <HeadContent /> already in that file renders it into <head>:

src/routes/__root.tsx

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

Older React + Vite projects have one 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.onyxmetric.com/api/script.js?siteId=YOUR_SITE_ID" async></script>
</head>

Save the file.

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

Troubleshooting

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

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.

Copy your tracking snippet

Add the snippet to Lovable

Check that it works

Troubleshooting

Next steps

On this page