¿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.
Más cosas interesantes
¡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:
➡ Informe de para qué se usan las Cookies:
➡ Y permita configurar los permisos para proveedores externos de forma independiente:
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.
Hace unos meses que Quantcast ha cambiado su funcionamiento. Ya no se personaliza tan fácilmente, y en mi opinión no cumple con la normativa RGPD. Así que «por el momento», no voy a actualizar este post a la última versión de Quantcast.
Configurar Quantcast
Accede a su página web, y tras aceptar las cookies, ve rellenando los campos del formulario.
Está dividido en 3 partes.
- Una primera, donde te identificas, configuras tus preferencias e indicarás cómo vas a utilizar los datos del cliente.
- La segunda, donde le das el estilo al banner de Quantcast.
- 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.
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.
[ACTUALIZACIÓN] Cómo mostrar el botón MÁS OPCIONES
Tras una pregunta en las redes, veo importante indicar que si seguimos estas instrucciones a rajatabla, el banner de cookies mostrará los botones NO ACEPTO y ACEPTO.
Sin embargo, existe otra opción. La de mostrar el botón MÁS OPCIONES, con lo que el usuario no tendrá tan a mano la pasibilidad de rechazar las cookies.
Aunque la seguirá teniendo, y estaremos cumpliendo la normativa igualmente 😎
Para sustituir el botón NO ACEPTO por el de MÁS OPCIONES, solo hay que NO marcar el chekc de Mostrar botón de rechazo. Quantcast añadirá el botón MÁS OPCIONES por defecto.
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.
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:
- La primear de javascript, enmarcada por sus etiquetas <script type=’text/javascript’></script>.
- 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.
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, á para la á, ñ 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
About the Author
27 Comentarios en “Instalar Quantcast, el nuevo banner de cookies”
Hola, Ernesto:
Lo primero, gracias por el post y por el blog.
Tengo una duda: ¿qué pongo en el campo «URL a la que se dirigirá si no da su consentimiento» en el caso de que yo quiera que la navegación continúe normal (aunque sin cookies)? Porque entonces no puede poner una URL única. ¿Se deja en blanco, se pone algún comodín?
Gracias.
Hola Xavier,
si quieres que el usuario continúe navegando por tu página web ignora ese campo.
Hola! Cuando entro en la página de QuantCast me aparece todo en inglés (mi ordenador estaba configurado en inglés, pero lo he cambiado de nuevo al español e ídem, y le he pedido a un amiga que pruebe desde su ordenador en castellano y también le aparece todo en la lengua de Shakespeare), y además las secciones a la hora de configurarlo no son como las que tu muestras en tu post. ¿Puede ser que esté yo haciendo algo mal? ¿O que hayan cambiado la web de QuantCast desde que tu hiciste el tutorial (mil gracias por ello, por cierto)? A mi no me aparecen los tres pasos de «Personaliza tu solución», «Personaliza tu interfaz de usuario» y «Obtener código». Hay una única página con «General settings» (donde tengo que indicar si quiero que la regulación sea para «GDPR» o «CCPA» ¿?), «Consent scope», y «Your consent configuration y Google Vendors». Gracias por tu atención
Hola Yoshi,
el motivo de que te pase eso es que Quantcast lanzó una nueva versión a principios de año. No he podido ponerme con la actualización del post por problemas relacionados con el bicho.
Cuando tenga un rato lo intentaré poner al día.
Mil gracias por la respuesta. Me quedo más tranquilo sabiendo que no es que yo esté haciendo algo mal.
Respecto a lo del «bicho», espero los tuyos y tu estéis bien.
Iré volviendo a entrar al blog por si puedes actualizar en algún momento este post, y para leer otras cosas que veo has publicado que tienen buena pinta, como lo de los CSS (siempre quise saber del tema pero siempre también me dio un poco de respeto).
Un saludo
Muy bien Yoshi, aunque yo iría buscando otra opción solo por si acaso 😉
Saludos. Finalmente encontré en un tutorial de YouTube el enlace al script ya generado (lo subieron precisamente por eso de que a través de la web de Quantcast no se puede obtener), lo he podido instalar (como se me escapan métodos más complejos, he usado el plugin «Head, Footer and Post Injections» de Stefano Lissa para insertarlo en el header) y lo tengo ya funcionando. Lo único que me sorprende es que aunque vaya a «Más opciones» y marque lo de que no quiero aceptar cookies algunas, luego miro en el navegador y se me han instalado alguna cookie. ¿Es eso normal? Gracias y disculpa las molestias
Claro que es normal Yoshi,
ese es uno de los motivos de la NO actualización del post, porque no cumple la normativa.
El script es fácil de conseguir. Lo que ocurre es que en el mejor de los casos solo bloquea las cookies de sus proveedores, pero no las de Analytics (por ejemplo).
Genial como siempre crak!!
Muchas garcias Jordi,
antes de la actualización de Quantcast era un poquito más útil, pero a ver si encuentro un rato largo y lo actualizo 😉
Muchas gracias por la vista!!!
No encuentro la manera de canviar el texto que sale por defecto.
«Nosotros y nuestros socios utilizamos tecnologías, como las cookies, y procesamos datos personales, como las direcciones IP y los identificadores de cookies, para personalizar los anuncios y el contenido según sus intereses, medir el rendimiento de los anuncios y el…»
Lo he canviado en el script y me continua saliendo lo mismo.
Puede ser?
Hola Albert,
¿puede que tengas un complemento de caché que debas vaciar?
Me parece guay y queda muy bonito PERO, desde mi ignorancia, he comprobado las cookies que se cargan tras rechazar todo y son las mismas que si aceptas, es más, se cargan nada más abrir la página…
Si no he hecho nada mal NO funcionan las opciones, con lo que no cumples….
Hola Miguel,
tienes «casi» toda la razón. En caso de tener publicidad NO carga todas las cookies antes de aceptar.
Si tienes una página web sabrás lo importante que es saber si recibes visitas o no. Hasta aquí puedo leer 😉
Podrías especificar un poco como adaptar el banner para que sea responsive?
En la versión de escritorio ningún problema, pero en el móbil si aprieto en «más opciones», las letras me tapan los botones de arriba.
Gracias!
Hola Jordi,
No he tenido que tocar nada para que sea responsive (que yo recuerde). Aún así, he revisado mi archivo de estilo, y no tengo ninguna indicación.
Lo debería hacer todo solito.
Es que cuando le doy al botón Más opciones, estando desde un dispositivo móvil, la frase «Tu privacidad es importante para nosotros», es decir, el título, me aparece encima de los botones de la parte de arriba de la ventanita, los de Rechazar todo o Aceptar todo.
¿Alguna solución?
Hola de nuevo Jordi,
He accedido a tu web y no veo el banner de Quantcast por ningún lado. Así que no puedo ver en directo el problema.
No obstante, he visitado otras webs «que sé con certeza que han tomado este post como referencia para implementar el banner de cookies», y todos funcionan perfectamente.
Una solución sería ajustar el CSS de la versión responsive, para recolocar los elementos. Pero antes, revisaría si has seguido bien los pasos o, que ese comportamiento no sea causado por el propio tema Enfold.
Si, yo también estoy revisando otras webs y en todas funciona correctamente.
Supongo que será cosa de mi tema Enfold.
No lo ves en la web porque lo estoy probando con un subdominio que tengo, antes de implementarlo en la web principal.
De todas formas, muchas gracias por tu ayuda.
Creo que he seguido todos lo pasos bien, pero voy a volver a probarlo a ver.
Hola Jordi,
como ya te he comentado, no puedo ver el problema en directo y, por tanto, no puedo diagnosticar ni resolver. Tal vez lo mejor es que te pongas en contacto con tu diseñador web.
He conseguido que el título aparezca más abajo con un «margin», el problema ahora viene cuando hago scroll, que las letras tapan esos botones.
Por lo que he estado viendo, en chrome me aparece el «border-bottom» que hay, debajo del logo y los dos botones, pero en safari y en dispositivos mobiles, el border-bottom este, me aparece debajo del logo solo, encima de los botones, entonces el scroll me lo hace encima de los botones.
Teneis alguna idea de como solucionarlo?
Genial el post. Más claro agua!!!
Mucha gente está aún liada con lo de las cookies y casi nadie cumple a rajatabla la ley.
Con este banner de Quantcast ya estoy mucho más tranquilo.
¿Para cuándo la customización de la pestaña de privacidad? A veces mata un poco el footer.
Muchas gracias por el post.
Muchas gracias Francisco 😀
La verdad es que para mi gusto hay demasiadas webs que no «intentan» cumplir la normativa.
Como verás, ya he actualizado el post para que se pueda elegir entre el botón RECHAZAR o MÁS OPCIONES.
¡Si no llega a ser por ti no hubiera caído en el detalle!
Lo otro que comentas… todo llegará 😉
¡Gran artículo Ernesto!
Es de agradecer el grado de detalle con el que facilitas la información para instalar Quantcast en nuestras web. 😉
Un saludo.
Mercedes G Zafra
Muchas gracias a ti por la visita y el comentario Mercedes.
Todo un honor tenerte por aquí 😉
Realmente la instalación de este nuevo banner es super fácil, pero como a mí me surgieron dudas, pensé que sería útil crear un tutorial 😉
Un post increíble Ernesto.
Me ha encantado, esta genial… voy a ponerlo en mi web.
Mil gracias!!
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í 🙂