Panel de Cookies sin Plugins en WordPress

Las cosas se están poniendo cada vez más duras para los analíticos del marketing, antes era sencillo rastrear a la gente y poder medir claramente.

Eso se acabó hace un tiempo, ahora ya no vale ese mensaje de “Al seguir navegando entendemos que aceptas las cookies”.

Pero voy a pararme un momento porque estarás pensado:

Mikel…

¿Qué son las cookies?

Las cookies son unos archivos, vamos a llamarlos así, que toda página web genera durante tu visita.

Estos archivos se almacenan en la información temporal de tu navegador, esa que sueles eliminar al darle (cuando te acuerdas) al famoso “Borrar historial de navegación y cookies de sitio”.

Esas cookies pueden ser necesarias para el manejo de la página, como una cookie de sesión para poder conectarte a una red social.

Otras se emplean para el rastreo, medición y fines publicitarios, como puedan ser las de Google Analytics.

Sean del formato que sean, tienes que tener la opción de Aceptarlas o Rechazarlas, así como la de gestionarlas.

Si quieres información más ampliada de las cookies, te dejo un artículo de Xataka donde explican en mayor profundidad este tema.

PD Cookie Constent

La mejor opción que se me ocurre para no requerir de plugins adicionales para WordPress en lo referente a las cookies, es emplear la libreria PD Cookie Consent.

Se trata de una librería gratuita proporcionada por la Agencia Española de Protección de Datos (AEPD) basada en javascript y que pretende facilitar el bloqueo de aquellos “programas o elementos” (para que me entiendas y no meterme en palabras técnicas) que pudieran incrustar cookies.

Te genera una ventana emergente (banner) que avisa al visitante sobre la existencia de cookies, además de facilitar una herramienta para la gestión de las mismas, permitiéndote conocerlas, permitirlas o bloquearlas.

En caso de que cambiaras de decisión respecto a la autorización de cookies durante la visita a la web, también podrías gestionarlo mediante la herramienta.

¿Cómo implementarla?

Muy sencillo, solo tenemos que incluir el siguiente código en el header del WordPress y posteriormente crear un enlace a la herramienta que vamos a llamar “Panel de Cookies”, que nos permite gestionar los consentimientos de las mismas.

Parte 1:

El código a incrustar en el <head>…</head> de tu WordPress es el siguiente:

<link rel="stylesheet" href="https://pdcc.gdpr.es/pdcc.min.css">
<script charset="utf-8" src="https://pdcc.gdpr.es/pdcc.min.js"></script>
<script type="text/javascript">
PDCookieConsent.config({
"brand": {
"dev" : true,
"name": "TU EMPRESA",
"url" : "https://tupaginaweb.com/",
"websiteOwner" : ""
},
"cookiePolicyLink": "https://tupaginaweb.com/enlace-a-politica-de-cookies/",
"hideModalIn": ["https://tupaginaweb.com/enlace-a-politica-de-cookies/"],
"styles": {
"primaryButton": {
"bgColor" : "#A1FFA1",
"txtColor": "#036900"
},
"secondaryButton": {
"bgColor" : "#EEEEEE",
"txtColor": "#333333"
}
}
});
</script>

Si empleas Elementor, tienes una opción para hacerlo muy fácil:

Escritorio > Elementor > Código Personalizado > Nuevo.

Seleccionas la ubicación “<head>” si no está seleccionada y a la derecha en “Condiciones” lo dejas en “No instances” para que se muestre en todo el sitio.

Añadir código personalizado en Elementor – Cookie Consent

En el caso de que emplees Divi, también lo puedes hacer de manera sencilla:

Escritorio > Divi > Opciones del tema > Integración > “Agregar código al <head> de su blog”.

No te olvides de reemplazar “Tu Empresa” por el nombre de tu empresa y la web por el enlace a tu página de “Política de Cookies”.

A veces, ya dispones de plugins para añadir códigos, como el del Tag Manager de Google. En este caso, sería añadir el código de arriba previo al Tag Manager (y otros).

En caso de que no emplees ningún maquetador visual, lo puedes añadir editando el archivo functions.php ubicado en la carpeta /wp-includes/ de tu alojamiento, donde tienes instalado WordPress.

En ese caso, el código variaría ligeramente, teniendo que añadir algunas líneas más:

/* Añadiendo el banner de las cookies LOPD */
add_action('wp_head', 'add_cookie_banner');
function add_cookie_banner(){
?>
<link rel="stylesheet" href="https://pdcc.gdpr.es/pdcc.min.css">
<script charset="utf-8" src="https://pdcc.gdpr.es/pdcc.min.js"></script>
<script type="text/javascript">
PDCookieConsent.config({
"brand": {
"dev" : true,
"name": "TU EMPRESA",
"url" : "https://tupaginaweb.com/",
"websiteOwner" : ""
},
"cookiePolicyLink": "https://tupaginaweb.com/enlace-a-politica-de-cookies/",
"hideModalIn": ["https://tupaginaweb.com/enlace-a-politica-de-cookies/"],
"styles": {
"primaryButton": {
"bgColor" : "#A1FFA1",
"txtColor": "#036900"
},
"secondaryButton": {
"bgColor" : "#EEEEEE",
"txtColor": "#333333"
}
}
});
</script>
<?php
};

Al igual que en el caso anterior, reemplaza tupaginaweb.com/enlace-a-politica-de-cookies/ por el enlace real a tu web y la política de cookies.

Parte 2:

Ahora toca generar el enlace que te permite acceder a ese “Panel de Cookies”.

Realmente puedes llamarlo como quieras, siempre teniendo en cuenta que tiene que ser un nombre claro para el visitante.

En alguna parte visible de la web, además de la sección “Política de Cookies”, añades el siguiente enlace:

<a class="pdcc-open-modal" href="#">Panel de Cookies</a>

En caso de generarlo vía Elementor, lo puedes hacer con el módulo “Editor de Texto” pegando el código anterior en el modo HTML:

Editor de texto de Elementor en modo HTML

Con esto ya tendríais el banner configurado:

El propio programa te reconocerá de forma automática las cookies que emplea tu sitio y te dará la opción de activarlas o desactivarlas.

Con estos pasos ya lo tendrías funcionando.

Personalizar Colores

Soy una persona muy corporativa, me gusta que todo comulgue con los colores de la empresa.

Entiendo que los colores que pueden venir por defecto, de primeras, no te gusten y los quieras cambiar.

Cómo hacerlo es muy sencillo, solo tienes que modificar las siguientes líneas:

"styles": {
"primaryButton": {
"bgColor" : "#A1FFA1",
"txtColor": "#036900"
},
"secondaryButton": {
"bgColor" : "#EEEEEE",
"txtColor": "#333333"
}
}

Los colores HTML son los que tienen el hashtag delante “#“.
En esta web puedes encontrar los colores HTML que quieras, en caso de que los conozcas o ya tengas los códigos, simplemente reemplázalos.

Nota: simplemente reemplaza lo que está entre comillas, ejemplo: “#EEEEE” por “#EEEFFF”.

Recuerda que lo más importante en este caso no es que sea divino, sino que sea funcional.

Si tienes cualquier problema durante la implementación de esta librería, no dudes en ponerlo en comentarios. Tu problema podría tenerlo más gente y entre todos daríamos con la solución.

Si prefieres contar con un experto en WordPress que te lo haga y así estar tranquila, ponte en contacto conmigo directamente.

Email
LinkedIn
Telegram
Facebook
WhatsApp
Picture of Mikel de Luis

Mikel de Luis

Soy Mikel de Luis, Mecánico Digital. Reparo y te soluciono los problemas vinculados a la informática y la tecnología. Especialista en WordPress. No te lo pienses 2 veces y hazme tu aliado informático.
Picture of Mikel de Luis

Mikel de Luis

Soy Mikel de Luis, Mecánico Digital. Reparo y te soluciono los problemas vinculados a la informática y la tecnología. Especialista en WordPress. No te lo pienses 2 veces y hazme tu aliado informático.

Suscríbete para no perderte nada

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

🔧⚙️Apretando Tuercas⚙️🔧

Nota: Te llegará una solicitud de confirmación del correo, una vez la valides, tu suscripción quedará completamente confirmada. Si ya estás suscrito a mi newsletter, no es necesario que te vuelvas a suscribir.

Mikel de Luis. Com te informa que los datos de carácter personal que nos proporciones rellenando el presente formulario serán tratados por Mikel de Luis como responsable de esta web. La finalidad de la recogida y tratamiento de los datos personales que te solicitamos es para enviarte nuestras publicaciones, promociones de productos y/o servicios y recursos exclusivos. La legitimación se realiza a través del consentimiento del interesado. Te informamos que los datos que nos facilitas estarán ubicados en los servidores de Mailerlite (proveedor de email marketing) a través de su empresa UAB “MailerLite”, ubicada en Lituania. Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en [email protected] así como el derecho a presentar una reclamación ante una autoridad de control. Para más información consulte nuestra política de privacidad.