Analítica

Habilita analítica web para tu aplicación con Plausible, Google Analytics o PostHog.

Sintaxis

$ vela enable analytics [--provider <plausible|google|posthog>]

Sin --provider se te pedirá que elijas uno. Fuera de una terminal (CI, scripts) el flag es obligatorio. Después se te pedirán los valores de configuración del proveedor, y los que ya estén en tu .env se conservan sin preguntar.

La analítica no tiene dependencias. Solo modifica el layout raíz y .env, así que funciona en sitios estáticos sin backend.

Qué obtienes

• Un componente en src/lib/components/analytics/analytics.svelte que carga el script del proveedor y registra las vistas de página, incluidas las navegaciones del lado del cliente.
• <Analytics /> montado en el nivel superior de src/routes/+layout.svelte, encima de {@render children()}.
• Las variables PUBLIC_* del proveedor añadidas a .env.

El componente lee su configuración de $env/dynamic/public y no renderiza nada hasta que las variables estén definidas, así que una copia local con un .env vacío no envía datos. Define las mismas variables en cada destino de despliegue con vela env set.

Proveedores

Plausible

$ vela enable analytics --provider plausible

Variable	Descripción
PUBLIC_PLAUSIBLE_DOMAIN	El sitio tal como está registrado en Plausible, p. ej. example.com.

Carga plausible.io/js/script.js, que registra por sí solo las navegaciones del lado del cliente. Si alojas Plausible tú mismo, cambia el src del script en el componente para que apunte a tu instancia.

Google Analytics

$ vela enable analytics --provider google

Variable	Descripción
PUBLIC_GA_MEASUREMENT_ID	El ID de medición, p. ej. G-XXXXXXXXXX.

Carga gtag.js con las vistas de página automáticas desactivadas y envía un evento page_view desde afterNavigate, de modo que cada cambio de ruta se cuenta exactamente una vez. Hay una función gtag en src/lib/components/analytics/gtag.ts para eventos personalizados:

import { gtag } from '$lib/components/analytics/gtag';

gtag('event', 'sign_up', { method: 'email' });

PostHog

$ vela enable analytics --provider posthog

Variable	Descripción
PUBLIC_POSTHOG_KEY	La clave de API del proyecto, p. ej. phc_....
PUBLIC_POSTHOG_HOST	El host de ingesta. Por defecto https://us.i.posthog.com; usa https://eu.i.posthog.com para proyectos en la UE o tu propia instancia.

Instala posthog-js y lo inicializa al montar con los valores por defecto 2025-05-24, que capturan una vista de página en cada cambio del historial. Importa posthog en cualquier parte para eventos personalizados:

import posthog from 'posthog-js';

posthog.capture('sign_up');

Cambiar de proveedor

Ejecuta el comando de nuevo con otro --provider. El componente se sobrescribe con la implementación del nuevo proveedor, las nuevas variables se añaden a .env y el layout no se toca, ya que <Analytics /> ya está montado. Elimina tú mismo las variables del proveedor anterior de .env.

Personalización

El componente generado es tuyo para editarlo. Los cambios habituales son condicionarlo a un banner de consentimiento de cookies, omitirlo para administradores autenticados o añadir eventos personalizados con las funciones anteriores.

Para quitar la analítica por completo, ejecuta vela disable analytics.