Cómo Agregar Analytics Centrado en la Privacidad a una App SvelteKit
SvelteKit 2 intercepta la navegación del lado del cliente de manera diferente al resto de los frameworks. Este es el patrón correcto para rastrear cambios de ruta sin cookies ni banners de consentimiento.
SvelteKit 2 rompe las integraciones de analytics que apoyan la medición en el ciclo de vida de la página. Una etiqueta <script> simple se dispara una sola vez, en la primera carga del documento, y nunca más — así que toda navegación del lado del cliente posterior queda invisible. El tracker de Monoid evita esto observando la History API en lugar del ciclo de vida de la página.
Por qué una etiqueta script simple no basta
Una etiqueta <script> en <svelte:head> se ejecuta una vez por carga de documento. El router de SvelteKit 2 intercambia el contenido en el sitio sin descargar el documento, así que nada la vuelve a ejecutar. Cualquier tracker cuyo único disparador sea DOMContentLoaded o load registra la ruta de entrada y luego se queda en silencio.
Esta es la causa raíz del problema ampliamente reportado en el que Google Analytics GA4 solo registra el primer pageview en la carga inicial en aplicaciones SvelteKit 2.
Detectar la navegación en sí es la respuesta, y no requiere una integración específica para SvelteKit. El router del lado del cliente de SvelteKit actualiza la URL llamando a history.pushState, así que un tracker que parchea history.pushState observa cada cambio de ruta del lado del cliente sin suscribirse a $app/navigation ni a ningún hook del framework.
El enfoque correcto
Agrega el script del tracker de Monoid una vez en tu +layout.svelte raíz usando <svelte:head>:
<svelte:head>
<script
async
src="https://api.monoid.website/tracker.min.js"
data-site-id="TU_SITE_ID"
></script>
</svelte:head>
El listener de DOMContentLoaded del tracker cubre la carga inicial de la página. Para las navegaciones del lado del cliente posteriores, su parche de history.pushState se ejecuta inmediatamente después de que SvelteKit actualiza la URL, así que lee el nuevo location.pathname y envía un pageview por cambio de ruta.
Una advertencia importante: el parche cubre pushState, no popstate. Los botones Atrás y Adelante cambian la ruta sin llamar a pushState, por lo que actualmente no producen un nuevo pageview.
Para verificarlo, abre la pestaña de Red en DevTools y observa las solicitudes POST hacia /collect. Deberías ver una por cambio de ruta.
Separar el tráfico de staging
Los proyectos SvelteKit suelen ejecutarse en localhost durante el desarrollo. Registra un sitio separado y enlaza su site_id a una variable de entorno para que el tráfico de desarrollo nunca contamine las métricas de producción:
<script>
const siteId = import.meta.env.VITE_MONOID_SITE_ID
</script>
<svelte:head>
{#if siteId}
<script
async
src="https://api.monoid.website/tracker.min.js"
data-site-id={siteId}
></script>
{/if}
</svelte:head>
Define VITE_MONOID_SITE_ID en .env.local para desarrollo (o déjalo sin definir para suprimir el tracking) y en el entorno de deployment para producción. El bloque {#if siteId} asegura que el script del tracker nunca se inyecte cuando la variable no está configurada.
Lo que no necesitas
Sin banner de consentimiento de cookies. Sin actualización de política de cookies. Sin verificación de navigator.cookieEnabled. El endpoint de recolección deriva un hash de visitante diario a partir de la dirección IP, el User-Agent, un secreto del lado del servidor y la fecha actual:
visitor_hash = SHA-256(IP + UA + SALT_SECRET + YYYY-MM-DD)
El hash se reinicia cada 24 horas y no puede revertirse para recuperar la IP o el User-Agent. Nada se almacena en el dispositivo del visitante. Esto significa que la integración no activa los requisitos de consentimiento de ePrivacy o PECR — no hay nada sobre lo que consentir.
Verificar en el dashboard
Después de hacer el deployment, abre tu dashboard de analytics y navega entre varias rutas en tu sitio en producción. Cada navegación debería producir una nueva entrada de pageview con la ruta correcta. Si solo ves una entrada sin importar la navegación, verifica que el script esté cargado en el layout raíz y que VITE_MONOID_SITE_ID esté configurado en el entorno de producción.
El adaptador de SvelteKit que uses (Cloudflare, Vercel, Node, estático) no afecta la recolección de analytics, ya que el tracking ocurre completamente en el navegador después de la hidratación.
Comments
Loading comments…