Privacidad GDPR, estado de consentimiento "denegado", Google Analytics 4 y Next.js.

TLDR

Mantén la privacidad de tus usuarios en el centro de tus prácticas según lo establecido por la GDPR y las leyes de California.

Establece ad_storage="denegado", analytics_storage="denegado", gtag("set", "ads_data_redaction", true) y "anonymize_ip": true para menor intrusión mientras disfrutas de las excelentes características de la nueva Google Analytics 4 en tu aplicación web Next.js.

Privacidad de datos

Una lucha interminable entre seguridad, funcionalidad, personalización, marketing, monetización y el impacto en la privacidad de los usuarios. Si pones la privacidad de tus usuarios en el centro, entonces la privacidad por diseño es un imperativo, y si también quieres mejorar la usabilidad, entonces la privacidad más estricta por defecto es el camino a seguir.

En este punto, probablemente ya hayas determinado que trabajar hacia la minimización de datos, la retención pragmática de datos, los identificadores basados en tokens y las soluciones de inicio de sesión de terceros/único deben incluirse en tus decisiones de diseño desde el principio.

¿Por qué pedir información que no necesitas o por qué guardar datos para características no concebidas? Datos que a veces no se eliminan de manera oportuna o no se anoniman y almacenan adecuadamente. Menos datos significan menos responsabilidad ante una brecha de datos o exposición de seguridad.

Según la GDPR

"el procesamiento de datos personales está generalmente prohibido, a menos que esté expresamente permitido por la ley, o el sujeto de datos haya consentido al procesamiento". Y debes cumplir con "consentimiento legal válido, contrato, obligaciones legales, interés vital del sujeto de datos, interés público e interés legítimo.

Cuando la privacidad de datos es tu enfoque principal, el consentimiento de los usuarios debería ser "denegado" por defecto. Solo establece las preferencias de privacidad por defecto con la información esencial. Sin molestos ventanas emergentes o banners, botones engañosos o acciones de consentimiento poco claras.

Crea políticas de privacidad que expliquen en términos simples qué datos recopilas y qué haces para proteger la privacidad y todas las opciones disponibles según lo establecido bajo GDPR y las leyes de California con funcionalidades fáciles de rechazar y amigables con la eliminación de datos.

Existe una verdadera necesidad de monitorear tu sitio web para mejorar el rendimiento, la monetización o la personalización, pero el aumento de brechas de datos y exposiciones de seguridad enfoca la atención en expectativas crecientes de los consumidores, desarrollos regulatorios y estándares de tecnología cambiantes para la privacidad del usuario.

Modo de consentimiento

Google ha implementado el modo de consentimiento (beta) donde puedes ajustar las etiquetas de Google basándote en el estado de consentimiento por acciones del usuario, pero podría establecerse por defecto. Incluye soporte para Google Analytics, Floodlight y Google Ads (parcialmente).

Puedes integrar Plataformas de Gestión de Contenido con el modo de consentimiento y la configuración de consentimiento en Google Tag Manager, pero vamos a programarlo en una aplicación web Next.js para el estado "denegado".

Con el modo de consentimiento devuelves el control al usuario. Pero también facilita trabajar con datos consentidos, mejorar tus mediciones de una manera menos intrusiva y desbloquear información generada por aprendizaje automático con la nueva Google Analytics 4. Si eres nuevo en Google Analytics 4, consulta estas mini guías y recursos de Google.

Después de desplegar el modo de consentimiento, el comportamiento se actualiza para, en el caso de pings de Google Analytics, "ser enviados en cada página de un sitio web donde se implementa Google Analytics y cuando se registran eventos".

Cuando se deniega el consentimiento para almacenamiento de anuncios o análisis, las funciones de medición ajustan su comportamiento resultando en la recopilación de menos datos del usuario. Consulta la tabla completa que contiene la explicación de las siguientes configuraciones del modo de consentimiento:

• ad_storage="denegado"
• ad_storage="denegado" y ads_data_redaction="true"
• analytics_storage="denegado"
• ad_storage="otorgado" y analytics_storage="otorgado"

En todos los casos, los pings pueden incluir información funcional con marca de tiempo, agente de usuario y referente; e información agregada/no identificativa como estado de consentimiento, número aleatorio para cada carga de página, plataforma de consentimiento utilizada e inclusión de información de clics de anuncios.

Entonces la pregunta es cómo seguir recopilando información de tu sitio web / aplicación web con Google Analytics 4 mientras se preserva la privacidad del usuario al establecer el modo de consentimiento como denegado por defecto.

Para responder eso, debes verificar las diferentes configuraciones del gtag en el modo de consentimiento.

Estado de consentimiento "denegado"

Vamos a darles a todos los usuarios las mismas protecciones garantizadas bajo GDPR y las leyes de California cuando usamos Google Analytics 4 relacionadas con privacidad de datos y consentimiento, pero si necesitas adaptarlo a regiones específicas, consulta el parámetro de región del gtag.

El comportamiento por defecto del modo de consentimiento de Google funciona como si todas las opciones de consentimiento fueran otorgadas, vamos a cambiar eso para tener:

• Opciones de consentimiento "denegadas" por defecto.

gtag("consent", "default", {
  "ad_storage": "denied",
  "analytics_storage": "denied",
  // wait for gtag to load before update if it is async
  "wait_for_update": 500,
});

• Identificadores de clics de anuncios redactados.

gtag("set", "ads_data_redaction", true);

"Cuando 'ads_data_redaction' es true y 'ad_storage' es 'denied', los identificadores de clics de anuncios enviados en solicitudes de red por etiquetas de Google Ads y Floodlight serán redactados. Las solicitudes de red también se enviarán a través de un dominio sin cookies."

• Anonimización de IP.

gtag("config", "${GA_TRACKING_ID}", {
  page_path: window.location.pathname,
  "anonymize_ip": true,
});

Next.js y Google Analytics 4

En general, para agregar Analítica a tu aplicación Next.js, debes incluir googletagmanager y la configuración de gtag en tu _document.js garantizando que se cargue en cada página.

Next.js con Google Analytics sin modo de consentimiento.

import { GA_TRACKING_ID } from "../utils/gtag";

<script
  async
  src={`https://googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
/>

<Head>
  {/* Global Site Tag (gtag.js) - Google Analytics */}
  <script
    async
    src={`https://googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
  />
  <script
    dangerouslySetInnerHTML={{
      __html: `
           window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('consent', 'default', {
              // strictest privacy defaults
              'ad_storage': 'denied',
              'analytics_storage': 'denied',
              // wait for gtag to load before update if it is async
              'wait_for_update': 500
            });

            gtag('set', 'ads_data_redaction', true);

            gtag('js', new Date());

            gtag('config', '${GA_TRACKING_ID}', {
              page_path: window.location.pathname,
              'anonymize_ip': true
            });
          `,
    }}
  />
</Head>

Accede al identificador de la secuencia de datos de la propiedad de Google Analytics 4 (Google Analytics / Admin / Property / DataStreams / Data Stream X / Measurement ID) y configura la variable de entorno en Vercel para uno o más entornos (Production, Preview, Development).

Para el desarrollo local, puedes extraerla con el comando vercel env pull y seguir las instrucciones.

Entonces estará listo para usar.

export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID;

Para medir vistas de página dependeremos de los eventos de next/router activados cuando el usuario salta entre páginas.

export const pageview = (url) => {
  window.gtag("config", GA_TRACKING_ID, {
    page_path: url,
  });
};

Y registra eventos como la vista de página en tu _app.js. Aquí usamos next/router.

import * as gtag from "../utils/gtag";

useEffect(() => {
  const handleRouteChange = (url) => {
    if (isProduction) {
      gtag.pageview(url);
    }
  };

  router.events.on("routeChangeComplete", handleRouteChange);

  return () => router.events.off("routeChangeComplete", handleRouteChange);
}, [router.events]);

También puedes medir otros eventos como clics de CTA al registrar acciones específicas en diferentes páginas de Next.js.

export const event = ({ action, category, label, value }) => {
  window.gtag("event", action, {
    event_category: category,
    event_label: label,
    value: value,
  });
};

Por ejemplo, agregando una recopilación de eventos para el enlace "Contratarme" en index.js.

import * as gtag from "../utils/gtag";

const handleClickHireMe = (e) => {
  gtag.event({ action: "click_hire_me", category: "Link" });
};

Para propósitos de reutilización, deberías exportar GA_TRACKING_ID, pageview y event desde tu directorio elegido de acuerdo con tus directrices de estructura de carpetas de Next.js de la compañía.

Google define diferentes tipos de eventos, pero también puedes crear tus eventos personalizados para dirigirte a tu caso de uso específico.

Para ver todo junto consulta este repositorio.

Prueba tu Google Analytics

La forma más rápida es verificar el informe en tiempo real de Google Analytics en tu Google Analytics / Account / Property / Realtime overview. Busca los eventos siendo registrados o ten usuarios en tiempo real.

De lo contrario, usa el asistente de etiquetas para depurar tus instalaciones de etiqueta de sitio global.

Ajusta el comportamiento de la etiqueta basándote en las acciones de consentimiento del usuario

Si necesitas recopilar más datos, debes implementar la funcionalidad para pedirle al usuario autorización para esos datos y ajustar el comportamiento de la etiqueta en respuesta al estado de consentimiento.

Banner de cookies personalizado

Puedes consultar una implementación rudimentaria del banner de cookies para Google Analytics aquí.

El banner de cookies comienza con todas las cookies establecidas en denegado por defecto como se explicó anteriormente y después de cualquier cambio, funciona para mantenerlo de esa manera las cookies que no se aceptan explícitamente.

El componente CookieBanner rastrea el estado de diferentes variables del estado consentido, cuando el consentimiento se establece en true indica que el usuario ya decidió aceptar o rechazar las cookies (acción realizada), por lo que el banner no se mostrará en el futuro.

La información de consentimiento se almacena en Local Storage por el gancho useLocalStorageState la primera vez y se leerá desde Local Storage después de eso.

Los caminos principales son cuando el usuario acepta o rechaza todas las cookies, acciones que se logran por las funciones acceptAll y rejectAll. También se asume que cuando el usuario cierra el banner sin acción explícita, la intención es rechazar las cookies, por lo que se llama la función rejectAll.

import {
  acceptAnalytics,
  acceptMarketing,
  acceptFunctional,
  acceptAll,
  rejectAll,
} from "../utils/gtag";

Cuando el usuario decide afinar la selección de cookies, la ruta de configuración, hay una interfaz de usuario más compleja.

Un arreglo estático (también podrías solicitarlo desde tu base de datos dinámicamente si es tu caso) que contiene los datos para los diferentes tipos de cookies que manejas en tu sitio web se proporciona al componente CookieItems que se usa para crear una lista de CookieBannerItem (la nomenclatura debería mejorarse, estoy de acuerdo...).

El CookieItems mostrará la lista de las cookies que usas en tu sitio web por categoría (necesaria, análisis, publicidad, funcional, etc.) y el usuario decidirá si aceptar o rechazar cualquier tipo de categoría.

Puedes agregar cookies de diferentes servicios al arreglo de categorías de cookies si es necesario. Algunos sitios simplemente explican las categorías y enlazan con la declaración de privacidad con la explicación completa de cada uso de cookies.

Después de una selección del usuario, el resto de las opciones se establecen en false para verificar doblemente que las opciones no seleccionadas se mantengan rechazadas.

Servicios de análisis pagos priorizando la privacidad

Si realmente necesitas verificar análisis sobre tu sitio web, y quieres ser una solución que priorice la privacidad, amigable con SEO, conforme con GDPR, CCPA, ePrivacy, PECR sin el molesto banner de cookies, que no recopile datos de usuarios pero que aún proporcione un script de carga rápida y obtenga una imagen completa del tráfico a tu sitio web incluso cuando los scripts estén bloqueados, considera usar servicios pagos como Fathom o Plausible.

Tienen opciones asequibles para elegir. Plausible comienza en $6 / mes para 10k vistas de página y Fathom comienza en $14 / mes para 100k vistas de página. Fathom es un enlace de referencia, recibiría una comisión si lo usas desde mi referencia.

Auto-alojamiento de tu propio análisis y web vitals de forma gratuita

Admitámoslo, a veces preferimos implementar nuestros propios servicios por el bien del aprendizaje.

En esta guía discuto cómo auto-alojar tu propio análisis web usando Next.js (marco de ReactJS), Umami (solución de análisis web auto-alojada), PlanetScale (plataforma de base de datos sin servidor compatible con MySQL), Vercel (alojamiento especializado en Next.js), y Prisma (ORM Node.js y TypeScript de próxima generación).

Con Umami puedes ser propietario de tu análisis de sitio web, usando una alternativa gratuita, amigable, simple y enfocada en privacidad a Google Analytics. En la misma página puedes tener una vista de águila de todos tus sitios web.

Umami aún no puede registrar los web vitals principales de tu sitio web. Sin embargo, también puedes auto-alojar tu propio colector de servicio de web vitals para medir el rendimiento de tus sitios web Next.js con valores del mundo real de Time to First Byte (TTFB), First Contentful Paint (FCP), Largest Contentful Paint (LCP), First Input Delay (FID), y Cumulative Layout Shift (CLS). Este enfoque usa la función reportWebVitals expuesta por Next.js con las métricas sobre los web vitals.

Los web vitals son cruciales para evaluar la experiencia del usuario, e importantes para SEO y clasificación de páginas. Pueden informarte cómo priorizar tus tareas de mejora del sitio web.

Otras plataformas de gestión de consentimiento

También es posible usar Plataformas de Gestión de Consentimiento o librerías que implementan el modo de consentimiento completo en asociación con Google como Osano, OneTrust y CookieBot.

Para más explicaciones consulta esta guía para desarrolladores de Google.