WordPress: plugin aviso cookies (legal en Europa)

6 diciembre, 2019 Deja un comentario

Permite a tu usuario rechazar las cookies

¿Cuál es el mejor plugin para avisar que usas cookies en tu sitio web? Sin duda, uno que permita ver claramente rechazar su uso.

Estuve mirando cantidad de artículos relacionados con este asunto de avisar del uso de cookies, en tu sitio web, así como preparar la página correspondiente de política de cookies. Tienes que realizar ambas acciones para ser legal en Europa, con el tipo de información que recabas de tus usuarios.

Esto es solo uno de los varios detalles a tener en cuenta dentro del RGPD (Reglamento General Protección de Datos) en Europa.

En el videotutorial te explico cómo he configurado yo uno de los mejores plugins, gratuito, que he encontrado en el repositorio de WordPress. Exploro en mayor profundidad cómo y porqué configurar este plugin de esta manera, para ser legal en Europa con tu sitio web.

Aún así hay apartados, de colores, que he tenido que modificar por códigos CSS.

Plugin recomendado (repositorio WordPress)

GDPR Cookie Consent (Por WebToffee:
https://es.wordpress.org/plugins/cookie-law-info/

Además de permitir incluir un botón para rechazar el uso de cookies que analicen el comportamiento de tu usuario, te permite incluir el aviso de diferentes maneras:

  • Banner: en la parte superior o inferior
  • Ventana emergente (pop-up): que ocupa la zona central de tu sitio web (algo parecido a lo que puedes ver en la web ALSA.es)
  • Widget: parecido a la ventana emergente pero ocupa la parte inferior de tu sitio web, como un recuadro en el lado izquierdo o derecho

El plugin permite configurar colores de fondo y texto, así como mostrar en botones o enlaces las acciones más importantes (Rechazar, Configuración cookies, Aceptar).

Igualmente te muestra un ejemplo (en inglés) de cómo configurar tu página de política de cookies y un detalle muy importante que ejecuta un shortcode para que en cualquier momento puedas otra vez ‘gestionar tu consentimiento’ de cookies.

Videotutorial

Eso es todo, espero que comprendas la importancia de enseñarte qué puede hacer este plugin a diferencia de otros y lo pongas en practica ya mismo.

Mi recomendación es que veas el vídeo desde su comienzo para que entiendas cómo se comporta el plugin. Pero si tienes prisa… la práctica con este plugin comienza en el tiempo 9:39 y para configurar el aspecto del mismo a partir del tiempo 21:20.

Reproduce el vídeo y déjame en los comentarios del blog qué te ha parecido este plugin.

Códigos CSS

Actualización 22/03/2020 

A petición de dos usuarias, aleiskar urbina y May Saldaña, quienes vieron y comentaron este vídeo en mi canal de YouTube, voy a incorporar el código CSS que he introducido para hacer los cambios que quería y no venían por defecto en el panel de control de este plugin.

Estos cambios han sido introducidos en ‘CSS adicional’ (Menú WordPress > Apariencia > Personalizar: CSS adicional).

Recomiendo meter la información como se muestra a continuación con las barras inclinadas y asteriscos:
/* Información descriptiva para saber qué hace este código */

Aquí la petición concreta de May Saldaña:

/* Color azul claro de fondo ventana Popup aviso cookies */

.cli-modal-content {
    background-color: #5e9aed;
}

/* Fin */

/* Color azul claro de fondo de la ventana Popup aviso cookies desglosables / acordeon */

.cli-tab-content {
    background: #5e9aed;
}

/* Fin */

/* Color azul claro fondo opción activado o desactivado cookies no necesarias */ 

.cli-switch input:checked + .cli-slider {
    background-color: #5e9aed;
}

/* Fin */

/* Pestaña Cookie de nuevo */

#cookie-law-info-again {
    padding: 1px 10px;
}

/* Fin */

31-03-2020. Puedes ver en el siguiente vídeo cómo lo he hecho. La práctica comienza en el tiempo 5:55

Para saber qué quieres cambiar yo me sirvo en este vídeo superior del navegador web Google Chrome y Colorzilla:

  1. Te sitúas sobre aquel objeto que quieres cambiar de color y con el botón derecho del ratón haces clic sobre el mismo
  2. Se abre una ventana con varias opciones, la que te interesa se denomina ‘Inspeccionar’
  3. Si quieres saber el color exacto hay una extensión muy buena para Google Chrome que os ayudara: Colorzilla

Actualización 29/03/2020

Aquí la petición concreta de aleiskar urbina:


/* Cambiar color: Mostrar mas (hace referencia a leer más texto) */

a.cli-privacy-readmore {
    color: #000;
}

a:hover.cli-privacy-readmore {
    color: #f00;
}

/* Fin */


/* Cambiar color enlace: Leer más (vincula al link: politica de cookies) */ 

a#CONSTANT_OPEN_URL.cli-plugin-main-link {
color: #000
}

a:hover#CONSTANT_OPEN_URL.cli-plugin-main-link {
color: #f00
}

/* Fin */

23-04-2020. Puedes ver en el siguiente vídeo cómo lo he hecho:

  • La práctica para el link ‘Mostrar más/Mostrar menos’ comienza en el tiempo 05:52
  • La práctica para el link ‘Leer más’ comienza en el tiempo 13:12

Para saber qué quieres cambiar yo me sirvo en este vídeo superior del navegador web Google Chrome y su rueda cromática:

  1. Te sitúas sobre aquel objeto que quieres cambiar de color y con el botón derecho del ratón haces clic sobre el mismo
  2. Se abre una ventana con varias opciones, la que te interesa se denomina ‘Inspeccionar’
  3. Si quieres saber el color exacto verás que haré uso en esta ocasión de una rueda de color propia de este navegador web

¡Saludos!