Como anadir analytics a una app Next.js (sin cookies ni banners de consentimiento)

Has creado una app con Next.js. Ahora quieres saber cuantas personas la usan, sin anadir un banner de cookies, sin ralentizar tu sitio y sin enviar los datos de tus visitantes a Google.

Asi es como hacerlo en menos de 2 minutos.

Por que no usar simplemente Google Analytics?

Google Analytics establece cookies, recopila direcciones IP y comparte datos con la red publicitaria de Google. En la UE, esto significa que necesitas un banner de consentimiento de cookies, y la mayoria de los visitantes los rechazan, lo que significa que tus datos estan incompletos de todos modos.

Tambien existe el riesgo legal. Varias autoridades de proteccion de datos de la UE han dictaminado que Google Analytics viola el RGPD porque transfiere datos personales a EE.UU. sin las garantias adecuadas.

Para una app Next.js, necesitas algo mas ligero.

La configuracion: un componente, cero configuracion

App Router (Next.js 13+)

Anade el script de seguimiento a tu layout raiz:

// app/layout.js
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="es">
      <body>
        {children}
        <Script
          src="https://app.fairlytics.dev/js/tracker.v1.js"
          data-site="TU_TRACKING_ID"
          data-api="https://app.fairlytics.dev"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Pages Router

Anadelo a _document.js:

// pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
        <script
          src="https://app.fairlytics.dev/js/tracker.v1.js"
          data-site="TU_TRACKING_ID"
          data-api="https://app.fairlytics.dev"
          defer
        />
      </body>
    </Html>
  );
}

Eso es todo. Despliega y ya estas rastreando visitas.

Que pasa con la navegacion del lado del cliente?

Next.js usa enrutamiento del lado del cliente: cuando un usuario hace clic en un enlace, la pagina no se recarga completamente. El tracker de Fairlytics maneja esto automaticamente. Escucha los cambios de URL a traves de la History API, por lo que cada transicion de ruta se registra como una vista de pagina sin codigo adicional.

No necesitas un hook usePathname(), ni un listener router.events, ni llamadas manuales a trackPageview(). Simplemente funciona.

Que se rastrea

Vistas de pagina — cada pagina y transicion de ruta
Visitantes unicos — contados sin cookies ni fingerprinting
Referentes — de donde viene tu trafico
Paises — derivados de la IP, luego la IP se descarta inmediatamente
Tipo de dispositivo, navegador, SO — derivados del User-Agent, luego el UA se descarta

Que NO se rastrea

Sin cookies (de ningun tipo)
Sin direcciones IP almacenadas
Sin datos personales
Sin seguimiento entre sitios
Sin sesiones de usuario individuales

Esto significa que no necesitas un banner de consentimiento de cookies. El script cumple completamente con el RGPD, la CCPA y la ePrivacy sin consentimiento del usuario.

Impacto en el rendimiento

El script del tracker pesa 510 bytes comprimido con gzip. Para comparar:

Script	Tamano (gzip)
Google Analytics (GA4)	~22 KB
Plausible	~1 KB
Fairlytics	510 bytes

Se carga con strategy="afterInteractive" para que nunca bloquee tu renderizado inicial. Tu puntuacion de Lighthouse no cambiara.

Opcional: rastrear eventos personalizados

Si tienes un plan Pro, puedes rastrear clics en botones, envios de formularios o cualquier conversion personalizada:

// En cualquier componente
function BotonRegistro() {
  const handleClick = () => {
    window.fairlytics?.track('clic_registro');
    // ... resto de tu logica
  };

  return <button onClick={handleClick}>Registrarse</button>;
}

Opcional: respetar Do Not Track

El tracker respeta automaticamente tanto la cabecera Do Not Track como la senal Global Privacy Control. Si un visitante tiene cualquiera de las dos activadas, no se envia ningun dato. No necesitas anadir ningun codigo para esto.

Despliegas en Vercel? Ya esta

Si despliegas tu app Next.js en Vercel, no hay nada mas que configurar. El script se carga desde los servidores de Fairlytics, asi que no hay variables de entorno, ni rutas API, ni configuracion en tiempo de build.

En resumen

Anadir analytics a una app Next.js no tiene que significar anadir cookies, banners de consentimiento ni politicas de privacidad. Con un solo componente <Script> y cero configuracion, puedes ver como se usa tu app respetando la privacidad de cada visitante.

Crea una cuenta gratuita — toma 30 segundos, sin tarjeta de credito. El plan gratuito cubre hasta 10.000 vistas de pagina al mes.

Preguntas sobre la integracion? Contactanos — estaremos encantados de ayudarte.