Como añadir el pop up de Cookies sin necesidad de plugin
Debido a la legislación vigente en la mayoría de países, para usar herramientas que permiten el análisis de la interacción de los usuarios en la página web (como se pongan muy restrictivos, acabaremos usando logs para sacar las estadísticas). Se pide como requisito en toda web, un pop-up donde el usuario acepta recibir Cookies.
Las Cookies no solo funcionan por conceptos de analítica, sino por cuestión de identificar al usuario y hacer que tenga una mejor experiencia dentro de la web, mucho más personalizada.
No obstante en este post me centraré en como hace que funcione con código la aceptación de Cookies. Muchos plugins te meten JS y CSS innecesario y velan por su propio interés de que compres la versión premium, así que vamos a ver como quitarnos esa dependencia.
Primero explico el código básico para poder adaptarlo en cualquier entorno web.
En un módulo que se repita dentro de nuestra web, preferiblemente el "footer" para no bloquear el contenido principal, vamos a crear el popup, a este Pop-up le vamos a añadir un extra. Este extra va a ser que solo exista este código en nuestra web, si las Cookies no están aceptadas. ¿Para qué vamos a querer el Pop-up con un display none, si ya están aceptadas?
Eso lo conseguiremos con el !isset($_cookie[]
<?php
if (!isset($_COOKIE['accept_cookies'])) {
?>
<link rel='stylesheet' id='cookies-css' href='{RUTA DE TU ARCHIVO CSS}' media='all' />";
<div id="cookieConsentContainer" data-nosnippet>
<div style="color:white">Usamos cookies para asegurar que te damos la mejor experiencia en nuestra web. Aquí tienes nuestra <a rel="nofollow" href="/politica-privacidad/" style="color:grey">política de privacidad.</a></div>
<div>
<button id="rejectCookies">Rechazar</button>
<button id="acceptCookies">Aceptar</button>
</div>
</div>
<script id="cookies-js" src="{RUTA DE TU ARCHIVO JS}" defer></script>
<?php
}
El ejemplo lo he puesto por eficiencia con los archivos JS y CSS externals, pero funcionaría igual internal. Los id y clases son esos por poner un ejemplo.
Como es evidente, la parte más importante del POP-UP es que funcione, y para eso necesitamos Javascript.
Básicamente con este código, lo que hacemos es activarle al usuario la función de las Cookies en caso de que las acepte, y volver a mostrar la petición de aceptarlas al cabo de un minuto en caso de que las rechace. Todos estos parámetros se pueden cambiar al gusto.
document.addEventListener("DOMContentLoaded", function(){
var consent = getCookie("accept_cookies");
if (!consent) {
document.getElementById("cookieConsentContainer").style.display = "flex";
}
document.getElementById("acceptCookies").addEventListener("click", function(){
setCookie("accept_cookies", true, 365);
document.getElementById("cookieConsentContainer").style.display = "none";
location.reload(); // Recarga la página
});
document.getElementById("rejectCookies").addEventListener("click", function(){
setCookie("reject_cookies", true, 1);
document.getElementById("cookieConsentContainer").style.display = "none";
setTimeout(function() {
document.getElementById("cookieConsentContainer").style.display = "flex";
}, 60000); // 60,000 milisegundos = 1 minuto
});
});
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
Sobra una conversión a "Display: none;" cuando se aceptan las Cookies, te animo a encontrarla.
Está muy bien hacer el aviso, pero tendremos que darle sustancia al usuario una vez que aceptan las calorías, es decir que tengan algo.
Pues en la sección que necesitemos, por ejemplo en el "<head>" podemos poner las herramientas de analíticas que necesitemos. Por ejemplo Analytics:
<?php
if (isset($_COOKIE['accept_cookies'])) {
// Google Analytics
?>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id={USER_ID}">
</script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '{USER_ID}');
</script>
<?php
}
?>
Realmente aquí se deberían añadir todas las herramientas de medición, como también pueden ser Metrika, Hotjar o Clarity. A los que además se les puede combinar con un delay en caso de que no quieras que afecte excesivamente al rendimiento de la web y no te importe que no se registre bien el rebote con estas herramientas de mapas de calor y comportamiento del usuario.
Si recibo muchas peticiones, explicaré como hacer este proceso óptimo cuando se usa Google Tag Manager.
Bueno, aunque con esto bastaría, para facilitar el trabajo, añado un CSS simple para que tenga un aspecto visual.
#cookieConsentContainer {
position: fixed;
bottom: 0;
z-index: 10;
min-height: 112px;
display: flex;
align-items: center;
background-color: rgba(253, 253, 253, 0.9);
color: black;
font-size: 14px;
padding: 0 32px;
width: 100%;
margin: auto;
justify-content: center;
flex-direction: column;
}
#acceptCookies {
background-color: var(--secondary);
font-weight: bold;
color: var(--lightgrey);
}
#rejectCookies {
color:rgb(44, 45, 45);
}
#acceptCookies, #rejectCookies {
font-size: 14px;
margin: 7px;
padding: 5px 20px;
cursor: pointer;
border-radius: 50px;
border: none;
}
Aunque me resisto a explicar las cosas para WordPress, es verdad que sigue siendo el CMS más usado, y por consiguiente me veo en la obligación de hacer la adaptación para los fanáticos de la W.
Se puede hacer por medio del functions.php o por medio de crearte un propio plugin.
Así que realmente sería la misma aplicación pero añadiendo Hooks.
Entonces sería encapsular tanto el código del POP-UP como el de que las cookies hagan algo en un Hook.
¿Cómo funciona? Con esta función añadimos todo ese código en el footer.
function add_cookie_notice_footer() {
// El código del pop-up
}
add_action('wp_footer', 'add_cookie_notice_footer');
Y con esta otra, podemos añadir el código de analítica en el header.
function add_cookie_track_header() {
// El código de analítica
}
add_action('wp_head', 'add_cookie_track_header');
Pues pongo un ejemplo de forma avanzada. Este código no es para copiar y pegar, solo puede tener sentido si lees y entiendes lo anterior.
<?php
function add_cookie_notice_footer() {
$noCookiePopup = isset($_GET['noCookiePopup']) && $_GET['noCookiePopup'] == 'true';
// Esta parte en gris solo tiene sentido si te lees el artículo sobre el bot que acepta cookies de forma automática
$autoAcceptCookies = isset($_GET['utm_term']) && $_GET['utm_term'] == 'seobots';
if ($autoAcceptCookies && !isset($_COOKIE['accept_cookies'])) {
setcookie('accept_cookies', '1', time() + (86400 * 30), "/"); // 86400 = 1 día
$_COOKIE['accept_cookies'] = '1'; // Establecer también la variable superglobal para el resto de la ejecución del script
}
if (!isset($_COOKIE['accept_cookies']) && !$noCookiePopup) {
$mi_plugin_url = plugin_dir_url( __FILE__ );
echo "<link rel='stylesheet' id='cookies-css' href='" . $mi_plugin_url . "css/cookies.css' media='all' />";
?>
<div id="cookieConsentContainer" data-nosnippet>
<div style="color:var(--white)">Usamos cookies para asegurar que te damos la mejor experiencia en nuestra web. Aquí tienes nuestra <a rel="nofollow" href="https://carlos.sanchezdonate.com/politica-privacidad/" style="color:var(--grey)">política de privacidad.</a></div>
<div>
<button id="rejectCookies">Rechazar</button>
<button id="acceptCookies">Aceptar</button>
</div>
</div>
<?php
}
}
add_action('wp_footer', 'add_cookie_notice_footer');
function add_cookie_track_header() {
if (isset($_COOKIE['accept_cookies'])) {
// Inserta aquí el código de seguimiento, como se muestra anteriormente
}
}
add_action('wp_head', 'add_cookie_track_header');
?>
Google Chrome hará un cambio importante acerca de cómo afectan en el navegador (no motor de búsqueda) las cookies de terceros.
Por otro lado y en contraposición, tenemos a la AEPD que publica una guía de Cookies para la medición de tráfico web, que puede hacer que legalmente en España no se tenga que pedir permiso para instalarle cookies de analíticas a los visitantes. Información brindada por Pablo Moratinos y confirmada por Ubaldo Hervás.
Google Chrome ha restringido las cookies de terceros para el 1% de los usuarios a modo de prueba en su navegador, con la intención de implementarlo en su totalidad al fin de 2024.
Eso quiere decir que las Cookies principales (como las que usan las webs para los carritos o usuarios registrados) seguirán funcionando.
Google hace ciertas sugerencias como opciones o soluciones a soluciones que preservan la privacidad.
Las CHIPS , también conocidas como cookies particionadas, es una tecnología que permite a los desarrolladores almacenar cookies de terceros de manera particionada (es decir, en distintas partes), restringiendo su acceso solo al contexto del sitio de nivel superior donde fueron inicialmente establecidas, para mejorar la privacidad y evitar el seguimiento entre diferentes sitios.
Por ejemplo, tienes el dominio example.com, pero el back o la estructura de lo que tienes para establecer ese servicio está en chart.example.com. En este caso, una buena forma de implementar las Cookies, aunque esté usando una API de terceros para establecer gráficos, sería esta.
Una cookie de terceros particionada está vinculada al sitio de nivel superior donde se estableció inicialmente y no puede ser accedida desde otros lugares.
El objetivo es permitir que las cookies sean establecidas por servicios de terceros, pero solo leídas dentro del contexto del sitio de nivel superior donde se establecieron inicialmente.
Esto bloquea el seguimiento entre sitios, permitiendo aún usos no rastreadores de cookies de terceros, como mantener el estado de mapas incrustados o widgets de chat a través de diferentes sitios, y persistir información de configuración para equilibrio de carga de CDN y proveedores de headless CMS (cuando se usa un back de WordPress o Shopify por ejemplo, pero con un front-end potente en un framework de js).
Nota: Chrome tiene un límite máximo de 180 cookies por partición que no puede exceder los 10 KB por sitio incorporado.
Actualmente solo es compatible con los navegadores basados en Chromium como Chrome o Edge.
En los navegadores que soportan CHIPS, se proporciona un nuevo atributo para la cabecera HTTP Set-Cookie — Partitioned — que permite a los propietarios de sitios optar por usar CHIPS:
Set-Cookie: __Host-example=34d8g; SameSite=None; Secure; Path=/; Partitioned;
Las cookies particionadas deben ser establecidas con Secure, y se recomienda usar el prefijo __Host para vincularlas al nombre del host en lugar del dominio registrable.
Con Partitioned establecido, la cookie se almacena usando dos claves: la clave del host y una nueva clave de partición basada en el esquema y eTLD+1 de la URL de nivel superior que el navegador visitaba cuando se hizo la solicitud al punto final de la URL que estableció la cookie.
Por ejemplo, si un usuario visita https://shoppy.example, que incrusta un servicio de chat de terceros desde https://3rd-party.example/chat para ofrecer soporte, https://3rd-party.example/chat establece una cookie en el dispositivo del usuario usando Partitioned para mantener el estado del chat a través de diferentes subdominios del sitio. Si el usuario visita varios subdominios que también incrustan https://3rd-party.example/chat, las nuevas instancias incrustadas pueden acceder a la cookie porque la clave de partición coincide.
En cuanto a la compatibilidad del navegador, CHIPS se está desarrollando con el objetivo de convertirse en un estándar web abierto y está en discusión en el PrivacyCG. Ha tenido una prueba de origen durante 7 meses, durante la cual el equipo de Chrome ha recibido retroalimentación útil, trabajando con partes interesadas clave para explorar esa retroalimentación y resultando en un diseño actualizado que sirve mejor al ecosistema web.
Para implementar CHIPS en PHP, se debería establecer el atributo Partitioned en la cabecera Set-Cookie al enviar la cookie:
<?php
$cookie_value = '34d8g';
setcookie('__Host-example', $cookie_value, [
'expires' => time() + 3600, // 1 hora de vida
'path' => '/',
'domain' => 'tu-dominio.com', // Cambia a tu dominio
'secure' => true, // Importante para CHIPS
'httponly' => true, // Recomendado por seguridad
'samesite' => 'None', // Necesario para cookies de terceros
'partitioned' => true, // Atributo para CHIPS
]);
?>
La principal diferencia entre cookies particionadas y no particionadas es que las particionadas tienen una clave de partición adicional basada en la URL de nivel superior, lo que restringe su acceso a ese contexto específico y evita el seguimiento entre diferentes sitios. Las cookies no particionadas, por otro lado, no tienen esta restricción y pueden ser accedidas por cualquier sitio que comparta el dominio.
El modelo de partición opcional se utiliza para equilibrar la privacidad del usuario y la funcionalidad del sitio web. Permite que los sitios web sigan utilizando cookies de terceros para funciones legítimas, como servicios de chat o mapas incrustados, mientras se bloquea el seguimiento entre sitios.
La API de Storage Access basicamente hace que las cookies de terceros para iframes que tenemos insertados en la web sean como Cookies de primeros.
Es decir, ofrece una forma para que el contenido de sitios cruzados cargado en un contexto de terceros (es decir, incrustado en un <iframe>) obtenga acceso a cookies de terceros, a las que normalmente solo tendría acceso en un contexto de primeros. Es relevante para los agentes de usuario que, por defecto, bloquean el acceso a cookies de terceros para mejorar la privacidad (por ejemplo, para prevenir el seguimiento). La API provee métodos que permiten a los recursos incrustados comprobar si actualmente tienen acceso a cookies de terceros y, de no ser así, solicitar acceso al agente de usuario.
El nombre puede dar lugar a confusión porque solo proporciona acceso a cookies y no a otros mecanismos de almacenamiento del lado del cliente, como Web Storage o IndexedDB.
Los navegadores implementan varias características y políticas de acceso al almacenamiento que restringen el acceso a cookies de terceros. Estas van desde dar a los recursos incrustados bajo cada origen de nivel superior un espacio de almacenamiento de cookies único (cookies particionadas) hasta bloquear completamente el acceso a las cookies cuando los recursos se cargan en un contexto de terceros. El objetivo es proteger la privacidad y la seguridad del usuario, evitando que su actividad sea rastreada a través de diferentes sitios y haciéndolos menos vulnerables a exploits como el falsificación de solicitud en sitios cruzados (CSRF)
Para implementarlo, podemos añadir lo que hemos aprendido antes así:
// Esta función intentará obtener acceso a las cookies de terceros
function requestThirdPartyCookieAccess() {
// Verifica si ya tienes acceso a cookies de terceros
document.hasStorageAccess().then(hasAccess => {
if (!hasAccess) {
// Si no tienes acceso, solicítalo
document.requestStorageAccess().then(
() => {
console.log("Acceso a cookies de terceros concedido");
// Aquí puedes realizar operaciones que requieran cookies de terceros
},
() => {
console.log("Acceso a cookies de terceros denegado");
// Manejar la situación en la que el acceso no es concedido
}
);
} else {
console.log("Ya tienes acceso a cookies de terceros");
// Continuar con las operaciones normales
}
});
}
// Llama a la función cuando sea necesario, por ejemplo, al cargar un iframe
requestThirdPartyCookieAccess();
Los conjuntos de sitios web relacionados (RWS, anteriormente conocidos como First-Party Sets o FPS) permiten que una empresa declare relaciones entre varios sitios web. Esto se hace para que los navegadores permitan un acceso limitado a las cookies de terceros para propósitos específicos, equilibrando así las expectativas de privacidad de los usuarios con la funcionalidad deseada en los sitios web con los que interactúan.
La aplicación de RWS es particularmente relevante para organizaciones con múltiples dominios que desean compartir cierta información de cookies entre ellos para funciones específicas, manteniendo al mismo tiempo la privacidad del usuario. Esto es útil para casos como el inicio de sesión único (SSO) o la persistencia de preferencias de usuario en diferentes dominios de la misma entidad. Los RWS proporcionan una manera estructurada y transparente de declarar estas relaciones de sitios web relacionados y gestionar el acceso a cookies en un ecosistema de navegación cada vez más centrado en la privacidad.
Permite a los sitios web interactuar de manera segura con sistemas de autenticación de terceros. Proporciona una forma estandarizada para que los usuarios inicien sesión en diferentes sitios web utilizando sus cuentas existentes en proveedores de identidad, como Google o Facebook, mejorando así la experiencia de inicio de sesión y manteniendo la seguridad.
Solo se aplica si eres un proveedor de Identidad (lo de inicia sesión con...), que raramente va a ocurrir.
Como no soy ducho en la materia legal ni experto en analítica os dejo un directo que hicieron Pablo Moratinos, Nuria Moreno y Andres Barreto desde Products Hackers bastante interesante y completo.
Por ejemplo se comenta que en la actualidad está recogido que las empresas que no son públicas pueden hacer que la opción de navegar sin cookies se pueda hacer de pago, es obligatoria ponerla, pero puede ser una vía de ingreso más.
Este directo que es tan útil para completar la información de esta publicación, vino por el bombazo que descubrió Pablo Moratinos sobre que la interpretación actual de la ley no recoge la obligatoriedad de pedir permisos por las cookies a los usuarios si esas cookies son de analítica:
Habrá que ver como acaba afectando en las herramientas de analítica, pero me veo calculando los usuarios con logs.
Te falta mi máster. Accede a una formación avanzada que te permitirá aplicar e implementar SEO en cualquier tipo de WEB
¡Accede al Máster de SEO Técnico!