Instalar Quantcast, el nuevo banner de cookies

Cómo instalar Quantcast como barra o banner de cookies

Ernesto BarrachinaDesarrollo web2 Comentarios

¿Y dices que ahora nos toca instalar Quantcast como banner de cookies? 😳

Pues como ocurre con todo lo relacionado con el Reglamento General de Protección de Datos (RGPD), existe mucho desconocimiento al respecto. Y esta nueva barra o banner de cookies que vemos cada vez más en internet, no podía ser una excepción.

Con el cumplimento de la RGPD hay mucho cachondeo. Si me dieran un euro por cada web que visito, que no cumple con la normativa o que ha falseado los textos para aparentar que la cumple; que por cierto «cantan a la legua», este año podría irme de vacaciones al Caribe… !dos veces!

El día que se pongan a recaudar, los propietarios de más de la mitad de las webs de internet lo van a flipar. En fin… ellos sabrán.

Pero bueno, como más vale prevenir que curar; y pretendo cumplir la RGPD en mi web a rajatabla (que para eso pago), he intentado informarme sobre el tema. Como no he visto demasiada información (para variar), creo oportuno explicarte cómo instalar Quantcast en una página web.

Con la información recabada, de momento no podría asegurarte que tu web necesite este tipo de banner, y tengo que confesar que, esta será la primera vez que haga un tutorial sin tener demasiada idea de lo que hablo 😆

Eso sí, aprender a configurar e instalar Quantcast SÍ vas a aprender 😀

En cuanto a la legislación, estaría muy agradecido de que alguien utilice los comentarios para ampliarnos la información legal.

¡Lo de las cookies lo hacemos mal!

Todo empezó a partir de un Newsletter que habréis recibido más de uno, en el que se nos informaba de que las reglas de las cookies han cambiado.

La historia es que el 1 de octubre de 2019, una sentencia del Tribunal de Justicia Europeo determinó que, el consentimiento otorgado por el usuario para que sus datos sean recopilados por otras webs mediante cookies, debe ser explícito.

¿Bueno y qué? Eso ya lo hacemos con el plugin de cookies ¿no?

Pues parece ser que con eso no basta 😳

La sentencia indica que para cumplir con la legislación europea, tenemos que añadir un banner, barra o pop-up de cookies donde se explique cómo usamos las cookies, y que permita el consentimiento expreso y su registro.

Si necesitas alguna aclaración al respecto, te lo explicará mucho mejor Kenia Echenique, en este post de LEXBlogger, al que te recomiendo que le eches un vistazo.

Tras leer el artículo y desde la ignorancia, a mi entender esto solo afecta a páginas web monetizadas con anuncios personalizados. De hecho, si piensas monetizar tu web con The Moneytizer, ¡este es tu banner de consentimiento!

No obstante, ante la pregunta directa a un profesional de la protección de datos, este me contestó que «afecta a todas las webs».

Así que, de momento he dejado en stand by mi web, pero he instalado el banner Quantcast en otra web que sí monetizo con ese tipo de anuncios.

Obtener una respuesta siempre será más fácil que llevar a cabo modificaciones en una página web. Tan solo hay que dejar pasar unas semanas «y ver qué pasa». Pero mientras no estaría de más que fuéramos investigando sobre los cambios que «igual» tenemos que hacer en nuestra web o blog.

Y este es el asunto del que trata este post: Qué es y cómo instalar Quantcast en una página web.

Qué es la barra o banner Quantcast

Quantcast no es un plugin. Bueno, sí pero no. Existe un plugin que no se ha probado con las últimas 3 versiones de WordPress, y con bastantes malas opiniones por cierto. Así que es como si no existiera.

Quantcast es un SAAS gratuito. O sea, un software como servicio (Software as a Service en inglés), que es una aplicación que tienes disponible, pero que se aloja en la empresa proveedora del servicio. Es un poco como cuando haces una llamada a una librería javascript o a las fuentes de Google Fonts.

El caso es que, solo descargando un script y pegándolo en el <head> de tu web, tienes instalado Quantcast como banner o barra de cookies.

Quantcast se encargará de que tu web cumpla la normativa RGPD a ese respecto y…

De que tu banner de cookies luzca así de chulo:

Ejemplo banner Quantcast

➡ Informe de para qué se usan las Cookies:

Quantcast indica para qué se usan las cookies en tu web

Y permita configurar los permisos para proveedores externos de forma independiente:

Al instalar Quantcast en tu web, el usuario puede filtrar las cookies de terceros

Como verás, Quantcast ofrece muchas más posibilidades que un plugin de cookies al uso, y muy posiblemente ahora te estarás preguntando ¿cómo se instala Quantcast?

Pues es muy fácil, pero primero hay que configurarlo.

Configurar Quantcast

Accede a su página web, y tras aceptar las cookies, ve rellenando los campos del formulario.

Está dividido en 3 partes.

  1. Una primera, donde te identificas, configuras tus preferencias e indicarás cómo vas a utilizar los datos del cliente.
  2. La segunda, donde le das el estilo al banner de Quantcast.
  3. La tercera, donde obtienes el código de Quantcast, que deberás pegar en tu web.

Si quieres que te diga la verdad, he marcado los campos por intuición. Creo que igual que con la APP de LEXBloger (que utilizo para mis webs), hasta que no te hagan una inspección no sabrás si lo has hecho bien o no. Pero, por si te sirve de referencia, te cuento cómo lo he configurado yo.

La finalidad de este post es implementar Quantcast en tu web. Así que lo más operativo será que veas unas imágenes con la configuración inicial de Quantcast (personalizado para esta web en la que aún no sé si instalarlo), en vez de estar explicando el paso a paso, y alargando el post hasta el infinito y más allá.

Así llegaremos antes a la parte importante 🙂

Personalizar cookies Quantcast

En esta primera parte te identificas, añades el logotipo (si quieres), defines a qué usuarios se les muestra el banner y unas cuantas cosas «importantes» más.

En la primera parte de la configuración de Quantcast te identificas y defines la configuración de las cookies

Personalizar el banner Quantcast

Ahora hay que darle estilo visual al banner. Puedes elegir entre banner o barra, los colores del texto, los botones… y Quantcast te ofrece una previsualización.

Clicando encima de los textos de la previsualización del banner, los puedes editar para adaptarlos a tu gusto y necesidades.

La barra de Quantcast se puede personalizar visualmente para adaptarla a tu web

Obtener el código para el banner Quantcast

Ahora solo tienes que copiar el código que te facilitan y pegarlo en el <head> de tu web, que es lo que nos interesa. Saber cómo hacerlo.

EL código que te facilita Quantcast es lo que tienes que pegar en tu web

Instalar Quantcast en una página web WordPress desde los archivos de código

Si una vez copiado el código que te facilita Quantcast desde su plataforma, lo pegas en un editor de código, verás que tiene dos partes:

  1. La primear de javascript, enmarcada por sus etiquetas <script type=’text/javascript’></script>.
  2. La segunda de CSS, limitada por las suyas <style></style>.

Personalmente, lo que he hecho ha sido quitar la parte de CSS y pegarla en el archivo style.css de mi tema hijo, del que tanto hablo en la Guía CSS de este mismo blog.

Aunque también puedes dejarlo junto si te quieres complicar la existencia 😉

.qc-cmp-button {
background-color: #f98200 !important;
border-color: #f98200 !important;
}
.qc-cmp-button:hover {
background-color: transparent !important;
border-color: #f98200 !important;
}
.qc-cmp-alt-action,
.qc-cmp-link {
color: #f98200 !important;
}
.qc-cmp-button.qc-cmp-secondary-button:hover {
border-color: transparent !important;
background-color: #f98200 !important;
}
.qc-cmp-button {
 color: #ffffff !important;
}
.qc-cmp-button.qc-cmp-secondary-button {
color: #f98200 !important;
}
... etc...

Si lo separas, cualquier retoque que necesite el banner, te resultará más cómodo de implementar 😉

Ahora que tenemos el código separado, es hora de pegar la parte de javascript dentro de la etiqueta <head> de tu web.

En este caso da igual que la web sea WordPress o no. Debes pegarlo en el mismo sitio.

Cuando tu web es un WordPress, puedes hacerlo a lo bruto, modificando el código del header.php cada vez que lo actualices 🙄

No obstante, creo que es más práctico pegarlo o en el header.php del tema hijo de WordPress, o enviarlo desde el archivo functions.php, que es como lo haremos ahora.

Para ello, vamos a crear un Action Hock que cargue el código antes de cerrar la etiqueta head.

Copia y pega esto en tu archivo functions.php:

add_action('wp_head', function(){
?>
   PEGA AQUÍ TU SCRIPT
<?php
});

El resultado se parecerá a esto:

add_action('wp_head', function(){
?>
  <script type="text/javascript" async=true>
   var elem = document.createElement('script');
   elem.src = 'https://quantcast.mgr.consensu.org/cmp.js';
   elem.async = true;
   elem.type = "text/javascript";
   .
   .
   Algo más de código que habrá por medio...
   .
   .
   .
   'UI Layout': 'banner',
   'No Option': false,
   });
   </script>
<?php
});

Si todo ha ido bien, al recargar la página verás el banner Quantcast instalado y perfectamente funcionando en tu página web.

Instalar Quantcast en WordPress desde las opciones del tema

Si tu plantilla WordPress permite la opción de añadir código javascrit y CSS personalizados, lo tienes más fácil aún 😀

Divide el script igual que en la opción anterior, y pega el javascript y el CSS respectivamente en el espacio que ofrece tu plantilla.

Si tu plantilla tiene esa opción, puedes instalar la barra de Quantcast desde las opciones de tema

Solo he tenido la oportunidad de probar el tema The7, pero entiendo que funcionará igual de bien en todos. Y si no, no tienes más que probar y ver qué ocurre 😛

Ajustes finales tras instalar Quantcast

Si te pasa como a mí, que después de todo el proceso, y una vez implementado el banner en la web, te das cuenta de que hay una falta de ortografía ¡no hace falta que empieces de nuevo!

Tener el código a mano te permite retocar algunas cosas 😎

El CSS está claro que se puede modificar normalmente, y seguramente querrás retocar alguna cosita para la versión responsive del banner.

Cuando lo que necesites sea modificar algo del texto, busca en el script este fragmento (he quitado lo que no se debe tocar) y modifica cualquier texto marcado en color naranja, con mucho cuidado de no comerte ni las comillas ni las comas.

  • ‘Initial Screen Title Text’: ‘Esta web usa cookies‘,
  • ‘Initial Screen Reject Button Text’: ‘NO ACEPTO‘,
  • ‘Initial Screen Accept Button Text’: ‘ACEPTO‘,
  • ‘Initial Screen Purpose Link Text’: ‘Cookies‘,
  • ‘Purpose Screen Title Text’: ‘Tu privacidad es importante para nosotros‘,
  • ‘Purpose Screen Body Text’: ‘Puede establecer sus preferencias  …  usamos sus datos.‘,
  • ‘Purpose Screen Vendor Link Text’: ‘Terceros‘,
  • ‘Purpose Screen Cancel Button Text’: ‘Cancelar‘,
  • ‘Purpose Screen Save and Exit Button Text’: ‘Guardar y salir‘,
  • ‘Vendor Screen Title Text’: ‘Tu privacidad es importante para nosotros‘,
  • ‘Vendor Screen Body Text’: ‘Puede configurar las preferencias  …  dicho procesamiento.‘,
  • ‘Vendor Screen Accept All Button Text’: ‘ACEPTAR TODO‘,
  • ‘Vendor Screen Reject All Button Text’: ‘RECHAZAR TODO‘,
  • ‘Vendor Screen Purposes Link Text’: ‘Volver a los propósitos‘,
  • ‘Vendor Screen Cancel Button Text’: ‘Cancelar‘,
  • ‘Vendor Screen Save and Exit Button Text’: ‘Guardar y salir‘,
  • ‘Initial Screen Body Text’: ‘Nosotros y nuestros socios  …  opciones en cualquier momento.‘,
  • ‘Publisher Name’: ‘Tu nombre o el de tu empresa‘,
  • ‘Publisher Logo’: ‘La URL de tu logotipo‘,
  • ‘Post Consent Page’: ‘La URL a la que se redirige el usuario si no da su consentimiento‘,

Un detalle importante es que tendrás que sustituir las tildes, las letras Ñ y los signos ¡ y ¿, por los correspondientes caracteres en código HTML, para que se muestren correctamente en el navegador.

Ya sabes, &aacute; para la á, &ntilde; para la ñ… y si no, te dejo el enlace 🙂

Con esto habremos instalado y configurado a nuestro gusto la barra de cookies de Quantcast. Si es obligatorio o no para todas las webs, lo sabremos con el tiempo o por los comentarios de los más puestos en el tema.

Si te ha gustado comparte

Más sobre el autor

Ernesto Barrachina

Aunque soy escultor y modelista de profesión, a los 40 decidí adaptar mis herramientas de trabajo. Un teclado y un ratón han sustituido a la arcilla, la silicona o al poliéster. Ahora me dedico al diseño web Valencia y el desarrollo de tu página web o de la imagen de tu marca pueden ser nuestro próximo proyecto.

¿Necesitas un Diseño Web Valencia?

Anterior »

2 Comentarios en “Instalar Quantcast, el nuevo banner de cookies”

    1. Hola Raul!!!

      Menudo orgullo tenerte por aquí.

      Lo dicho. Yo lo pondría en cuarentena hasta que alguien capacitado confirme que es necesario para todas las webs, y no solo para las que monetizan.

      Muchas gracias y espero verte más por aquí 🙂

Deja un comentario

INFORMACIÓN BÁSICA SOBRE LA PROTECCIÓN DE TUS DATOS

Todos las datos marcados con asterisco (*) son obligatrorios. Si no los indicas no podrás comentar en el blog.

Responsable de la web: Ernesto Barrachina Rubio (EBWEB) +Info

Finalidad de los datos: Gestionar los comentarios que realizas en este blog. +Info

Legitimación: Consentimiento del interesado. +Info

Destinatarios: No se comunican los datos a nadie más. +Info

Plazo de conservación de los datos: Hasta que no se solicite su supresión por el interesado.

Los datos que me facilitas estarán ubicados en los servidores de Dinahosting (proveedor de hosting de EBWEB) fuera de la UE en Otros. Dinahosting está ubicado en la UE, con los niveles de protección adecuados según Comisión de la UE. Ver política de privacidad de Dinahosting.

Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en ebweb@ebweb.es así como el derecho a presentar una reclamación ante una autoridad de control.

Puedes consultar la información adicional y detallada sobre Protección de Datos en mi página web: https://ebweb.es, así como consultar mi política de privacidad.

Tu comentario quedará pendiente de moderación. Vuelve en dos o tres días para ver la respuesta y tu comentario publicados.

Muchas gracias por comentar ☺