Cómo añadir analítica a una app de Lovable

Mira toda la instalación en 38 segundos (vídeo en inglés) y luego sigue los pasos de abajo. Para empezar por lo básico: qué registra la analítica integrada de Lovable y dónde se queda corta.

¿Qué genera Lovable?#

Lovable crea apps de React. Los proyectos más antiguos son single-page apps hechas con Vite; los creados desde mayo de 2026 usan TanStack Start, que también renderiza en el servidor. En ambos casos, tu analítica tiene que arrancar en el navegador, una sola vez, cuando carga la app.

Opción 1: deja que Lovable lo haga#

Crea una app en el dashboard de Shipabase, copia su clave desde la página Setup y pega esto en el chat de Lovable:

1Añade la analítica de Shipabase a esta app con el paquete @shipabase/js.2Sigue https://shipabase.dev/llms.txt al pie de la letra.3- Llama a init("SB-EU-xxxxxxxxxx") una sola vez, en el navegador, al arrancar la app4  (dentro de un useEffect en el componente raíz).5- Añade trackEvent() para las 5–10 acciones de usuario más importantes,6  con nombres en snake_case y formato object_verb (signup_completed, project_created).7- Props: solo valores no personales (plan, count, variant). Nunca emails, nombres ni IDs de usuario.8- Enumera los eventos que has añadido.

Revisa el diff que propone Lovable: init debe aparecer una sola vez, en el componente raíz, y cada trackEvent debe llevar el nombre de una acción, no de un clic.

Opción 2: añádelo tú mismo#

Si tu proyecto está sincronizado con GitHub, ábrelo en local o en tu editor e instala el paquete:

npm i @shipabase/js

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

1import { useEffect } from "react";2import { init } from "@shipabase/js";3 4// dentro de tu componente raíz5useEffect(() => {6  init("SB-EU-xxxxxxxxxx");7}, []);

¿Qué eventos medir primero?#

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

Deja las visitas de la vista previa fuera de tus estadísticas#

Cada vez que pruebas tu app en la vista previa de Lovable, generas eventos. Para ocultarlos, márcalos como debug cuando la app no se ejecute en tu dominio real. Los eventos de debug solo aparecen cuando activas el interruptor debug.

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

Comprueba que funciona#

Abre tu app, haz una de las acciones que mides y luego abre la página Setup de tu app en Shipabase: el primer evento aparece en cuanto llega. Si no ves nada tras unos segundos, consulta Verifica tu instalación.