Cómo agregar analytics con privacidad a una app Next.js
Una guía paso a paso para integrar Monoid en Next.js sin cookies, banners de consentimiento ni complicaciones de cumplimiento.
Las aplicaciones Next.js tienen algunos enfoques comunes para los analytics, y la mayoría implica un banner de cookies o un script pesado de terceros que perjudica los Core Web Vitals. Aquí te mostramos cómo agregar analytics en tiempo real con enfoque en privacidad sin ninguno de los dos.
Lo que obtendrás
- Seguimiento de pageviews en cada cambio de ruta, incluida la navegación del lado del cliente
- Conteos de visitantes, referidores, países, familias de navegador y tipos de dispositivo
- Sin cookies, sin fingerprinting, sin necesidad de consentimiento RGPD
- Una sola etiqueta de script async — ningún paquete npm que mantener
Paso 1: Crea una cuenta en Monoid
Regístrate en monoid.website y crea un nuevo sitio. Recibirás un site_id — un identificador alfanumérico corto para tu propiedad.
Paso 2: Agrega el tracker a tu layout
En Next.js 13+ con el App Router, añade el script del tracker a tu layout.tsx raíz:
import Script from 'next/script'
export default function RootLayout({ children }) {
return (
<html lang="es">
<body>
{children}
<Script
src="https://api.monoid.website/tracker.min.js"
data-site-id="TU_SITE_ID"
strategy="afterInteractive"
/>
</body>
</html>
)
}
Usar strategy="afterInteractive" carga el script después de que la página se vuelve interactiva, sin afectar tu puntuación de Largest Contentful Paint.
Paso 3: Manejar la navegación del lado del cliente
El hook nativo de history.pushState del tracker se activa automáticamente en cada evento de navegación, tanto en el Pages Router como en el App Router. No necesitas agregar nada más.
Si quieres enviar eventos personalizados — por ejemplo, cuando un usuario completa un pago o hace clic en un botón específico — llama al helper global directamente:
window.monoid('event', 'checkout_completado')
Paso 4: Verifica en el dashboard
Abre tu dashboard de Monoid y navega a una página de tu sitio. Deberías ver a un visitante en vivo aparecer en el feed en tiempo real en unos segundos. Si tienes un entorno de staging, asegúrate de que use un site_id separado para que el tráfico de desarrollo no contamine tus métricas de producción.
Lo que no es necesario
No necesitas instalar un gestor de consentimiento de cookies. No necesitas actualizar tu política de privacidad para mencionar cookies de analytics (porque no hay ninguna). Y no necesitas un paquete npm — el tracker es un archivo JavaScript vanilla servido desde el de una red edge global.
La familia de navegador y el tipo de dispositivo se derivan del lado del servidor desde el User-Agent ordinario de la solicitud para reportes agregados. User-Agent completos, versiones de navegador, cookies, identificadores persistentes y fingerprints de dispositivo nunca se almacenan.
Para la mayoría de los proyectos Next.js, esto toma menos de dos minutos desde el registro hasta los datos en vivo.