How to add analytics to a Lovable or Bolt app

What you'll see

• Visitors, visits and pageviews, and how many people are on your app right now.
• Where they came from: Reddit, X, Google, ChatGPT, a newsletter, or a link you shared.
• Which pages they land on and view, their country, device and browser.
• Every page change inside your app. Lovable and Bolt apps are single-page apps, so many analytics tools only count the first page; this one counts them all.

Before you start

• An app built with Lovable or Bolt (Replit and v0 work too), published on its live address.
• A VibeMetrics account. Signing up is free and needs no card.

1. Add your app

In VibeMetrics, click "Add app". Give it a name, enter the address people use to open it (for example myapp.lovable.app or your own domain), and pick what you built it with.

You also choose how visitors are told apart: Standard keeps a random ID in the visitor's browser, so a visit on Monday and a payment on Thursday are linked; Cookieless stores nothing and links visits within a day only. You can switch later in Settings.

2. Paste the install prompt into your builder

VibeMetrics shows your personal prompt with your own site ID. Copy it and paste it into the Lovable or Bolt chat. It looks like this:

Add website analytics to this app.

In index.html, inside <head>, add exactly these two lines and nothing else:

<script defer data-site="YOUR-SITE-ID" src="https://www.vibemetrics.app/s.js"></script>
<script>window.vm=window.vm||function(){(window.vm.q=window.vm.q||[]).push(arguments)};</script>

Rules:
- Add them once only. Do not add any other analytics tool, cookie banner or tracking code.
- Do not move or change any other code.
- If this project uses Next.js instead of index.html, add the same script in the root layout using next/script with strategy="afterInteractive", plus the second line as an inline script.

When done, tell me which file you changed.

The prompt asks your builder to add two lines to your app's <head> and to tell you which file it changed, so you can check it didn't do anything else.

3. Publish, then open your app

Publish your app, then open its live address in your browser. Within a few seconds, VibeMetrics shows "We see your app! ✅" with where that first visit came from.

Visits from the builder's preview (the editor, lovableproject.com, Bolt's WebContainer preview) and from localhost aren't counted, so testing in the editor doesn't fill your numbers with your own clicks.

4. Leave out your own visits

In your app's settings, open "Don't count my own visits" and use the link there in each browser you use. Your visits stop being counted on that browser; nothing changes for anyone else.

If nothing shows up

• Open your app on its published address, not in the builder's preview.
• Check that the address matches the one you added. If your app also runs on another address (www. or a custom domain), add it in Settings.
• Ask your builder to show you the <head> of index.html; the two lines should be there once. The install page also has a fix-it prompt for this.
• Ad blockers block some analytics scripts, so a few visitors may be missing, but most visits show up.

Next steps

Traffic is the start. Paste the signup prompt to see who signs up, and connect Stripe to see who pays and which channel brought them.