Implementa un Formulario de Consentimiento de Cookies cumpliendo la GDPR

La General Data Protection Regulation (GDPR) establece reglas estrictas sobre cómo se deben manejar los datos personales de los usuarios en la Unión Europea. Una de las obligaciones más importantes es obtener el consentimiento de los usuarios antes de almacenar o procesar sus datos personales a través de cookies.

GDPR

La GDPR es una regulación de la UE que protege la privacidad y los datos personales de los ciudadanos europeos. Cualquier sitio web que reciba visitantes de la UE debe cumplir con estas regulaciones, independientemente de dónde esté alojado el sitio.

Requisitos del Consentimiento de Cookies según la GDPR

Ser claro y conciso.
Permitir a los usuarios aceptar o rechazar las cookies.
Explicar el propósito de las cookies.
Permitir a los usuarios cambiar su configuración posteriormente.
Almacenar el consentimiento otorgado por los usuarios.

Pantalla de Consentimiento de Cookies

1.- Implementar formulario

Primero, necesitamos crear la estructura HTML para el formulario de consentimiento de cookies. Este formulario debe incluir botones para aceptar y rechazar las cookies, así como un enlace a la política de cookies.


<div class="cookie-consent">
    <p>
        Utilizamos cookies para mejorar tu experiencia. 
        Consulta nuestra <a href="/politica-cookies.html">política de cookies</a> 
        para más información.
    </p>
    <button class="button button-accept">Aceptar</button>
    <button class="button button-reject">Rechazar</button>
</div>

2.- Agregar estilos

Agregamos algunos estilos básicos para que el formulario de consentimiento de cookies se vea bien en el sitio.


.cookie-consent {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #999;
    color: white;
    text-align: center;
    padding: 16px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cookie-consent .content {
    max-width: 1200px;
    margin: 0 auto;
}

.cookie-consent p {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 18px;
}

.cookie-consent p a {
    color: white;
    border-bottom: solid 1px white;
}

.cookie-consent .button {
    margin: 0 4px;
    padding: 8px 16px;
    height: auto;
}

3.- Lógica JavaScript

Ahora, agregamos la lógica para manejar el consentimiento de cookies. Esto implica almacenar el consentimiento en el localStorage y mostrar u ocultar el formulario según sea necesario.


// file: cookie-consent.js

document.addEventListener('DOMContentLoaded', function () {

    const banner = document.querySelector('.cookie-consent');
    const btAccept = banner.querySelector('.button-accept');
    const btReject = banner.querySelector('.button-reject');

    // Verificar si el usuario ya ha dado su consentimiento
    const cookieConsent = localStorage.getItem('cookieConsent');
    if (cookieConsent) {
        banner.style.display = 'none';
        if (cookieConsent === 'accepted') {
            // code to enable cookies
        }
    }

    // Manejar la aceptación de cookies
    btAccept.addEventListener('click', function () {
        localStorage.setItem('cookieConsent', 'accepted');
        banner.style.display = 'none';
        // code to enable cookies
    });

    // Manejar el rechazo de cookies
    btReject.addEventListener('click', function () {
        localStorage.setItem('cookieConsent', 'rejected');
        banner.style.display = 'none';
        // code to reject cookies
    });
});

Integración con Google Analytics

Google Analytics tiene la opción para incluirse sin utilizar cookies, para ello se usa el comando consent con el que se puede configurar que datos almacenar en cookies. Donde se tienen las siguientes opciones:

ad_storage: Habilita el almacenamiento relacionado con la publicidad.
ad_user_data: Define el consentimiento de datos de usuario con fines publicitarios.
ad_personalization: Define el consentimiento sobre la publicidad personalizada.
analytics_storage: Habilita el almacenamiento relacionado con las analíticas.

Con estas consideraciones, lo primero es rechazar todas las cookies al cargar la página con la opción default y si el usuario acepta las cookies actualizamos estos permisos con la opción update.


// file: cookie-consent.js

// Define dataLayer and the gtag function.
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

// Set default consent to 'denied'
gtag('consent', 'default', {
    'ad_storage': 'denied',
    'ad_user_data': 'denied',
    'ad_personalization': 'denied',
    'analytics_storage': 'denied'
});

document.addEventListener('DOMContentLoaded', function () {

    const banner = document.querySelector('.cookie-consent');
    const btAccept = banner.querySelector('.button-accept');
    const btReject = banner.querySelector('.button-reject');

    // Verificar si el usuario ya ha dado su consentimiento
    const cookieConsent = localStorage.getItem('cookieConsent');
    if (cookieConsent) {
        banner.style.display = 'none';
        if (cookieConsent === 'accepted') {
            acceptGA();
        }
    }

    // Manejar la aceptación de cookies
    btAccept.addEventListener('click', function () {
        localStorage.setItem('cookieConsent', 'accepted');
        banner.style.display = 'none';
        acceptGA();
    });

    // Manejar el rechazo de cookies
    btReject.addEventListener('click', function () {
        localStorage.setItem('cookieConsent', 'rejected');
        banner.style.display = 'none';
    });
});

function acceptGA() {
    gtag('consent', 'update', {
        'ad_storage': 'granted',
        'ad_user_data': 'granted',
        'ad_personalization': 'granted',
        'analytics_storage': 'granted'
    });
}

Ahora que ya tenemos el script para consentimiento de cookies compatible con Google Analytics podemos completar nuestro HTML incluyendo el código de GA.


<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Kodetop</title>
  <link rel="stylesheet" href="cookie-consent.css">
</head>
<body>
<div class="cookie-consent">
    <p>
        Utilizamos cookies para mejorar tu experiencia. 
        Consulta nuestra <a href="/politica-cookies.html">política de cookies</a> 
        para más información.
    </p>
    <button class="button button-accept">Aceptar</button>
    <button class="button button-reject">Rechazar</button>
</div>
<script src="cookie-consent.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){ dataLayer.push(arguments); }
    gtag('js', new Date());
    gtag('config', 'G-XXXXXXXXXX');
</script>
</body>
</html>

Podemos ver el resultado en: Cookie Consent

Consideraciones

Cookies esenciales: Algunas cookies son esenciales para el funcionamiento del sitio web (ejemplo, cookies de sesión). La GDPR permite que estas cookies se utilicen sin consentimiento, pero es buena práctica informar a los usuarios sobre ellas.

Actualización de preferencias: Permite a los usuarios cambiar sus preferencias de cookies en cualquier momento. Puedes hacerlo proporcionando un enlace en el pie de página para modificar la configuración.

Herramientas de marketing: Si usas plataformas externas para el seguimiento de visitas, detectar eventos, re-marketing, re-targeting, asegurate de configurarlas de acuerdo a si el usuario ha aceptado las cookies.

Conclusión

Implementar un formulario de consentimiento de cookies que cumpla con la GDPR es esencial para proteger los datos de tus usuarios y evitar sanciones. Recuerda revisar y actualizar regularmente tu implementación para adaptarte a cualquier cambio en las regulaciones.