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

Guides · 2026-09-23 · Shipabase team · Source: https://shipabase.dev/blog/add-analytics-lovable-app

## TL;DR

- Lovable apps are React apps: add `@shipabase/js` and call `init` once in the browser.
- Fastest path: paste one prompt in Lovable’s chat and review the change.
- Track 5 to 10 real actions (signup, first project, checkout), never emails or user IDs.

## 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`

```text
Add Shipabase analytics to this app with the @shipabase/js package.
Follow https://shipabase.dev/llms.txt exactly.
- Call init("SB-EU-xxxxxxxxxx") once, in the browser, when the app starts
  (inside a useEffect in the root component).
- Add trackEvent() for the 5–10 most important user actions,
  named in snake_case object_verb form (signup_completed, project_created).
- Props: only non-personal values (plan, count, variant). Never emails, names or user IDs.
- 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`

```bash
npm i @shipabase/js
```

**Vite (older projects)**

`src/main.tsx`

```tsx
import { init } from "@shipabase/js";

init("SB-EU-xxxxxxxxxx");
```

**TanStack Start (newer projects)**

`root component`

```tsx
import { useEffect } from "react";
import { init } from "@shipabase/js";

// inside your root component
useEffect(() => {
  init("SB-EU-xxxxxxxxxx");
}, []);
```

`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`

```tsx
import { trackEvent } from "@shipabase/js";

trackEvent("signup_completed", { method: "google" });
```

> **Warning:** 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`

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

## 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](https://shipabase.dev/docs/verify).

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

## Sources

- [Deploying and hosting outside Lovable (Lovable docs)](https://docs.lovable.dev/tips-tricks/external-deployment-hosting)
- [Shipabase quickstart](https://shipabase.dev/docs/quickstart)