Guides

How to add analytics to a Lovable app

Two ways to track what users do in an app built with Lovable: one prompt, or three lines of code. Cookieless, no consent banner for the SDK.

Sep 23, 2026 · 3 min

What Lovable generates#

Lovable builds React apps. Older projects are single-page apps made with Vite; projects created since May 2026 use TanStack Start, which also renders on the server. In both cases your analytics must start in the browser, once, when the app loads.

Your app key (SB-EU-…) is public: it can only write events, so it’s fine in client code. Never put a secret key in a variable starting with VITE_: Vite ships those to the browser.

Option 1: let Lovable do it#

Create an app in the Shipabase dashboard, copy its key from the Setup page, then paste this in Lovable’s chat:

Prompt for Lovable

1Add Shipabase analytics to this app with the @shipabase/js package.2Follow https://shipabase.dev/llms.txt exactly.3- Call init("SB-EU-xxxxxxxxxx") once, in the browser, when the app starts4  (inside a useEffect in the root component).5- Add trackEvent() for the 5–10 most important user actions,6  named in snake_case object_verb form (signup_completed, project_created).7- Props: only non-personal values (plan, count, variant). Never emails, names or user IDs.8- List the events you added.

Review the diff Lovable proposes: init should appear once, in the root component, and every trackEvent should be named after an action, not a click.

Option 2: add it yourself#

If your project is synced to GitHub, open it locally or in your editor and install the package:

Terminal

npm i @shipabase/js

src/main.tsx

1import { init } from "@shipabase/js";2 3init("SB-EU-xxxxxxxxxx");

root component

1import { useEffect } from "react";2import { init } from "@shipabase/js";3 4// inside your root component5useEffect(() => {6  init("SB-EU-xxxxxxxxxx");7}, []);

useEffect only runs in the browser, so the server render stays untouched.

What to track first#

Event	When
`signup_completed`	After the account is created (for example, after Supabase auth succeeds)
`onboarding_completed`	When the user finishes your first-run flow
`project_created`	Your core action, whatever it is in your app
`checkout_started`	When the user opens your pricing or payment page
`checkout_completed`	After a successful payment

after a successful signup

1import { trackEvent } from "@shipabase/js";2 3trackEvent("signup_completed", { method: "google" });

Don’t send the Supabase user ID, the email or the name. Shipabase counts visitors with an anonymous daily hash: props only need to describe the action.

Keep preview visits out of your stats#

Every time you test your app in Lovable’s preview, you create events. To hide them, mark them as debug when the app doesn’t run on your real domain. Debug events only show up when you turn on the debug toggle.

init

1init("SB-EU-xxxxxxxxxx", {2  isDebug: location.hostname !== "yourapp.com",3});

Check that it works#

Open your app, do one tracked action, then open your app’s Setup page in Shipabase: the first event appears as soon as it arrives. If nothing shows up after a few seconds, see Verify your setup.

FAQ

Do I need a cookie banner for this?

Not for the Shipabase SDK: it stores nothing in the browser, no cookies and no localStorage. Other tools you add may need one.

Does it work with Bolt, v0 or Replit apps?

Yes. They generate React or Next.js apps too: install the package and call init once in the browser. See the framework guides in the docs.

Are page views tracked automatically?

Yes, since @shipabase/js 0.4: the SDK records every page and route change. You only add events for actions.