# 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`](/es/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:

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

```ts
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`](/es/disable/analytics).