Guides

Comment ajouter des analytics à une app Lovable

Deux façons de suivre ce que font les utilisateurs d’une app Lovable : un prompt ou 3 lignes de code. Sans cookies, sans bandeau de consentement pour le SDK.

Par NightOwl · Mis à jour le 27 sept. 2026 · 3 min de lecture

Regardez toute l’installation en 38 secondes (vidéo en anglais), puis suivez les étapes ci-dessous. Pour commencer par les bases : ce que suivent les analytics intégrées de Lovable, et leurs limites.

How to add analytics to your Lovable app (in 1 prompt) · YouTube

Ce que génère Lovable#

Lovable crée des apps React. Les projets plus anciens sont des single-page apps construites avec Vite ; ceux créés depuis mai 2026 utilisent TanStack Start, qui fait aussi du rendu côté serveur. Dans les deux cas, vos analytics doivent démarrer dans le navigateur, une seule fois, au chargement de l’app.

La clé de votre app (SB-EU-…) est publique : elle ne permet que d’écrire des événements, elle peut donc figurer dans le code client. Ne mettez en revanche jamais de clé secrète dans une variable qui commence par VITE_ : Vite les envoie au navigateur.

Option 1 : laisser Lovable s’en charger#

Créez une app dans le dashboard Shipabase, copiez sa clé depuis la page Setup, puis collez ceci dans le chat de Lovable :

Prompt pour Lovable

1Ajoute les analytics Shipabase à cette app avec le package @shipabase/js.2Suis exactement https://shipabase.dev/llms.txt.3- Appelle init("SB-EU-xxxxxxxxxx") une seule fois, dans le navigateur, au démarrage de l’app4  (dans un useEffect du composant racine).5- Ajoute trackEvent() pour les 5 à 10 actions utilisateur les plus importantes,6  nommées en snake_case au format object_verb (signup_completed, project_created).7- Props : uniquement des valeurs non personnelles (plan, count, variant). Jamais d’e-mails, de noms ni d’identifiants utilisateur.8- Liste les événements que tu as ajoutés.

Relisez le diff proposé par Lovable : init doit apparaître une seule fois, dans le composant racine, et chaque trackEvent doit porter le nom d’une action, pas d’un clic.

Option 2 : l’ajouter vous-même#

Si votre projet est synchronisé avec GitHub, ouvrez-le en local ou dans votre éditeur et installez le package :

Terminal

npm i @shipabase/js

src/main.tsx

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

composant racine

1import { useEffect } from "react";2import { init } from "@shipabase/js";3 4// dans votre composant racine5useEffect(() => {6  init("SB-EU-xxxxxxxxxx");7}, []);

useEffect ne s’exécute que dans le navigateur : le rendu serveur n’est pas touché.

Quels événements suivre en premier ?#

Événement	Quand
`signup_completed`	Après la création du compte (par exemple, une fois l’authentification Supabase réussie)
`onboarding_completed`	Quand l’utilisateur termine votre parcours de première utilisation
`project_created`	Votre action principale, quelle qu’elle soit dans votre app
`checkout_started`	Quand l’utilisateur ouvre votre page de tarifs ou de paiement
`checkout_completed`	Après un paiement réussi

après une inscription réussie

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

N’envoyez ni l’identifiant utilisateur Supabase, ni l’e-mail, ni le nom. Shipabase compte les visiteurs avec un hash quotidien anonyme : les props n’ont besoin que de décrire l’action.

Exclure les visites de l’aperçu de vos stats#

Chaque fois que vous testez votre app dans l’aperçu de Lovable, vous créez des événements. Pour les masquer, marquez-les comme debug quand l’app ne tourne pas sur votre vrai domaine. Les événements debug n’apparaissent que si vous activez l’option debug.

init

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

Vérifier que tout fonctionne#

Ouvrez votre app, effectuez une action suivie, puis ouvrez la page Setup de votre app dans Shipabase : le premier événement s’affiche dès qu’il arrive. Si rien n’apparaît au bout de quelques secondes, consultez Vérifier votre installation.

FAQ

Faut-il un bandeau cookies pour ces analytics ?

Pas pour le SDK Shipabase : il ne stocke rien dans le navigateur, ni cookies ni localStorage. D’autres outils que vous ajoutez peuvent en nécessiter un.

Est-ce que ça marche avec une app Bolt, v0 ou Replit ?

Oui. Ces outils génèrent eux aussi des apps React ou Next.js : installez le package et appelez init une seule fois dans le navigateur. Consultez les guides par framework dans la documentation.

Les pages vues sont-elles suivies automatiquement ?

Oui, depuis @shipabase/js 0.4 : le SDK enregistre chaque page et chaque changement de route. Vous n’ajoutez des événements que pour les actions.