Book a demo
Start for free

Bloqueo previo de las cookies: etiquetado manual (con ejemplos prácticos)

Privacy Controls and Cookie Solution de iubenda te permite gestionar todos los aspectos del cumplimiento de la ley de cookies: mostrar un cookie banner para notificar a tus usuarios, tener una política de cookies activa, tener pruebas de las preferencias de los usuarios y bloquear de forma preventiva los scripts antes de que el usuario otorgue su consentimiento.

💡 Simplifica tu proceso de bloqueo de cookies con el bloqueo automático

¿Sabías que existe una opción más sencilla para el bloqueo previo de cookies y rastreadores? Nuestra función de bloqueo automático automatiza el proceso, lo que te permite ahorrar tiempo y esfuerzo.

Si prefieres etiquetar manualmente tus scripts que instalan o pueden instalar cookies, puedes seguir la guía que aparece a continuación para obtener instrucciones paso a paso y ejemplos prácticos. Sin embargo, te recomendamos encarecidamente que consideres la función de bloqueo automático para optimizar el proceso.

👉 Haz clic aquí para obtener más información sobre el bloqueo automático de cookies y sobre cómo simplificar tu proceso de bloqueo de cookies

Cómo instalar Privacy Controls and Cookie Solution de iubenda

Si quieres consultar una guía de instalación, lee nuestra guía dedicada o nuestra introducción a Privacy Controls and Cookie Solution. Para WordPress, consulta nuestro artículo dedicado para WordPress, que te enseñará cómo utilizar el plugin de Privacy Controls and Cookie Solution de iubenda para WordPress para automatizar el bloqueo de scripts.

¿Qué scripts que instalan cookies deberían bloquearse?

Depende de la jurisdicción aplicable a tu sitio web. En Europa, estás obligado legalmente a bloquear los scripts de cookies hasta que hayas obtenido el consentimiento del usuario. Sin embargo, pese a que todas las cookies deben estar bloqueadas, existen algunas excepciones: son las llamadas cookies estrictamente necesarias.

En el caso de Italia, estas son las categorías de cookies exentas:

Sobre Google Analytics

En Italia, la condición para que Google Analytics sea elegible para la opción “no se necesita consentimiento previo” es la anonimización de las direcciones IP.  Sin embargo, en Francia, Google Analytics no parece ser elegible pare ninguna excepción al requisito de consentimiento, y si bien se recomienda el uso de Matomo/Piwik, es la anonimización de la dirección IP del usuario lo que permite que el análisis se lleve a cabo de forma desagregada.

Consent Mode de Google

Para ayudar a los anunciantes a gestionar las cookies con fines estadísticos y publicitarios, Google ha creado Consent Mode, una función que te permite evitar el bloqueo previo para Google Analytics y Google Ads (incluyendo el Seguimiento de Conversiones y Remarketing de Google Ads).

Consulta cómo implementarlo con Privacy Controls and Cookie Solution.

Es importante destacar que, cuando se aplica el RGPD, el uso previsto influye en si se requiere o no el consentimiento, ya que incluso los datos estadísticos pueden incluirse en actividades de “elaboración de perfiles” o “seguimiento”, según cómo se usen los datos.

Para proceder:

Sobre otras herramientas que garantizan la no-utilización de cookies

Si otras herramientas de terceros garantizan que no utilizan cookies, quizás al proporcionar opciones de configuración específicas, también pueden considerarse exentas del requisito de bloqueo previo.

Este es el caso de YouTube, que proporciona una función específica para evitar que se rastree al usuario a través de las cookies.

Utilizar Google Tag Manager para simplificar radicalmente la aplicación de las regulaciones de cookies

Google Tag Manager es una herramienta gratuita que te ayuda a simplificar la aplicación de las regulaciones de cookies. Es compatible con Privacy Controls and Cookie Solution de iubenda. Puedes consultar nuestra guía de Google Tag Manager aquí.

Google Tag Manager te permite evitar etiquetar los scripts como se describe a continuación, aunque esto se limita a una determinada categoría de scripts: scripts que no son posicionales/no definen una posición. Por lo tanto, no gestiona los scripts de inserción, como los relacionados con banners publicitarios, widgets de vídeo de YouTube, botones “Me gusta” de Facebook, etc. Aunque este método no es infalible, te recomendamos encarecidamente que lo utilices.

Cómo implementar el bloqueo de scripts para los scripts que puedan instalar cookies

Modificaciones a los scripts

Para todos los demás scripts que instalen o que puedan instalar cookies, tienes que continuar añadiendo cambios en el código para implementar la capacidad de bloqueo.

Para activar el bloqueo de los scripts que puedan instalar cookies, tienes que cambiar estos scripts, de forma que Privacy Controls and Cookie Solution de iubenda pueda prevenir que se ejecuten cuando todavía no se haya obtenido el consentimiento.

Para hacerlo, tendrás que aplicar la clase _iub_cs_activate a las etiquetas SCRIPT. Finalmente, cambiamos el atributo type de text/javascript a text/plain.

[git:pre_js-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/_iub_cs_activate.js]

El src puede permanecer inalterado, pero es recomendable reemplazarlo con data-suppressedsrc (no disponible en el canal current/beta/stable heredado) o con suppressedsrc. Reemplazar el src es necesario en algunos casos, ya que el navegador, aunque el script esté bloqueado, puede descargar y/o interpretar el recurso y, en consecuencia, instalar cookies.

[git:pre_js-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/safemode/tag-options/suppressedsrc.html]

Nota: para la reactivación de scripts, Privacy Controls and Cookie Solution de iubenda gestiona la reactivación del src controlando los atributos descritos previamente en el siguiente orden: data-suppressedsrc (no disponible en el canal current/beta/stable heredado), suppressedsrc y src (si se mantiene inalterado).

Para activar la etiqueta inline de Javascript, en su lugar debes aplicar la clase_iub_cs_activate-inline.

[git:pre_js-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/_iub_cs_activate-inline.js]

Nota: la clase _iub_cs_activate-inline tiene que aplicarse a todos los objetos document.write o document.writeln.

Módulos JavaScript

Gracias a los atributos personalizados suppressedtype y data-iub-type, Privacy Controls and Cookie Solution también puede bloquear/activar scripts que no sean text/javascript (por ejemplo, module):

<script type="module">
   console.log('this is a module, e.g. "this" is undefined:', this);
</script>

Para bloquearlo:

<script suppressedtype="module" type="text/plain" class="_iub_cs_activate">
   console.log('this is a module, e.g. "this" is undefined:', this);
</script>

o (alternativa equivalente):

<script data-iub-type="module" type="text/plain" class="_iub_cs_activate">
   console.log('this is a module, e.g. "this" is undefined:', this);
</script>

Etiquetado manual y consentimiento por categoría

Si has activado la función consentimiento por categoría, tendrás que especificar las categorías de los scripts/iframes con un atributo especial separado por comas, data-iub-purposes, por ejemplo data-iub-purposes="2" o data-iub-purposes="2, 3" (es raro, pero un solo activador puede servir para diferentes finalidades).

Recuerda que las finalidades se agrupan en 5 categorías (Necesarios, Funcionalidad, Experiencia, Medición, Marketing), cada una con un ID (1, 2, 3, 4, 5):

  1. Necesarios (ID 1). Finalidades incluidas:
    • Creación y gestión de copias de seguridad
    • Almacenamiento e infraestructura de backend
    • Gestión de páginas de aterrizaje y de invitación
    • Servicios de plataforma y hosting
    • Protección contra SPAM
    • Optimización y distribución del tráfico
    • Monitoreo de infraestructura
    • Gestionar pagos
  2. Funcionalidad (ID 2). Finalidades incluidas:
    • Contactar con el usuario
    • Interacción con plataformas de chat en directo
    • Gestión de conferencias web y telefonía online
    • Gestión de solicitudes de soporte y contacto
    • Interacción con plataformas de apoyo y comentarios
    • Gestión de etiquetas
    • Registro y autenticación
    • Gestión de la base de datos de usuarios
  3. Experiencia (ID 3). Finalidades incluidas:
    • Comentarios de contenido
    • Interacción con plataformas de recopilación de datos y otros terceros
    • Visualización de contenido de plataformas externas
    • Interacción con plataformas y redes sociales externas
    • Interacción con plataformas de encuestas online
    • Gestión del feed RSS
    • Funciones sociales
  4. Medición (ID 4). Finalidades incluidas:
    • Estadísticas
    • Pruebas beta
    • Pruebas de rendimiento y funciones del contenido (pruebas A/B)
    • Mapeo de calor y grabación de sesiones
    • Gestionar la recopilación de datos y las encuestas en línea
  5. Marketing (ID 5). Finalidades incluidas:
    • Publicidad
    • Infraestructura de servicios publicitarios
    • Afiliación comercial
    • Administrar contactos y enviar mensajes
    • Remarketing y segmentación por comportamiento

Tomemos el botón de seguimiento de Twitter, por ejemplo:

<a href="https://twitter.com/iubenda" class="twitter-follow-button" data-show-count="false">Follow @iubenda</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Dado que el botón de seguimiento de Twitter es parte de la finalidad “Interacción con redes sociales y plataformas externas” incluida en la categoría “Mejora de la experiencia” (3), el código se convertirá en:

<a href="https://twitter.com/iubenda" class="twitter-follow-button" data-show-count="false">Follow @iubenda</a>
<script async type="text/plain" class="_iub_cs_activate" data-iub-purposes="3" data-suppressedsrc="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Con la excepción de las cookies estrictamente necesarias (que no necesitan que se obtenga el consentimiento), tienes que añadir el atributo data-iub-purposes a todos tus scripts si utilizas el consentimiento por categoría para que Privacy Controls and Cookie Solution pueda identificar correctamente los scripts para su publicación. Cuando se activa la función consentimiento por categoría, los scripts/iframes sin el atributo data-iub-purposes o con al menos una finalidad rechazada permanecerá bloqueada, así que asegúrate de añadirlo en cada caso.

Callback

Alternativamente, en el caso de que las cookies se activen mediante partes del código Javascript, es posible proceder a través de una callback a la instancia csConfiguration.

[file:pre_html-code@https://raw.githubusercontent.com/iubenda/cookie-law-solution-codesnippets/master/callback/onConsentRead.html]

Nota: onConsentGiven, especificado anteriormente, todavía está disponible por razones de compatibilidad con versiones anteriores; en cualquier caso, onConsentRead anulará su valor si se utiliza este último.

Modificaciones de los scripts, iframe e img para la gestión de la dependencia

En algunos casos, para volver a activar correctamente una etiqueta bloqueada, es necesario esperar a que una variable o un objeto javascript esté disponible. Para gestionar adecuadamente las dependencias, encontrarás el atributo data-iub-cs-wait-for (no disponible en el canal current/beta/stable heredado).

[git:pre_html-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/safemode/tag_options/iub_cs_wait_for.html]

Etiquetas img e iframe

Varias etiquetas img e iframe también podrían instalar cookies. En estos casos es necesario añadir la clase _iub_cs_activate (al igual que para las etiquetas script descritas anteriormente), asignar el valor original de la etiqueta src a un nuevo atributo llamado data-suppressedsrc (no disponible en el canal current/beta/stable heredado) o suppressedsrc y asignar el valor "about:blank" a src (consulta el ejemplo a continuación para ver estas reglas). 

<iframe id="player" class="_iub_cs_activate" width="640" height="390" frameborder="0" suppressedsrc="https://www.youtube.com/embed/erVv_Gm7CC4" src="about:blank"></iframe>

Nota: el valor data:text/html;base64,PGh0bWw+PGJvZHk+U3VwcHJlc3NlZDwvYm9keT48L2h0bWw+, previamente indicado en esta guía (es la versión codificada en base64 de: Suppressed, que posteriormente se mostrará por la mayoría de los navegadores antes del consentimiento en lugar de la salida real del script) no afecta el bloqueo correcto y la activación subsecuente de la etiqueta, pero su uso puede resultar en errores al mostrar algunas vistas web en Android.

En esta dirección encontrarás una herramienta de codificación para generar otra versión en base64 de cualquier otra cadena.

Etiquetas noscript

En la actualidad la etiqueta noscript que puede instalar cookies en los casos en los que el usuario haya desactivado JavaScript en su navegador, se encuentra en fase de implementación. Para estar preparado para estos casos, te sugerimos eliminar las etiquetas noscript del documento o utilizar soluciones de backend, que después de descubrir la presencia de la cookie _iub_cs-local, podrían incluir o excluir selectivamente las etiquetas noscript de los documentos.

Ejemplos prácticos

A continuación, puedes encontrar ejemplos de scripts de uso común y orientación sobre cómo modificarlos para cumplir con la ley de cookies.

Marketing 4wD

Antes

Después:

1. Define la callBack para onConsentGiven en la instancia _iub.csConfiguration

[file:pre_html-code@https://gist.githubusercontent.com/s2imon/bd683a02635b39eced38/raw]

2. Incluye el script completo que carga el banner en un div con “display:none” – Ejemplo

AddThis

Botón:

AddToAny

AdRoll

Altervista

Altervista y sus proveedores publicitarios se unen y apoyan el Marco de Transparencia y Consentimiento. Más información en la Wiki de Altervista.

Amazon

Banner

Login

Bing Tracker

Booking (afiliado)

CodePen

Criteo

  • Antes
  • Después – El recurso URL primero se integra completamente con el código de bloque y luego se inserta en la propiedad src de la etiqueta script.

Customerly

Disqus

Elevio

Facebook

Pixel

Like button
Like box
Page plugin

Foursquare

Freshchat

Nota: los fragmentos de código deben bloquearse en un orden específico si hay más Ads Conversion por página

  • El primer fragmento de código debe bloquearse con la clase _iub_cs_activate-inline
  • Todos los fragmentos de código posteriores deben bloquearse con la clase _iub_cs_activate

Al hacerlo, el primer fragmento de código de conversión será:

[file:pre_html-code@https://raw.githubusercontent.com/iubenda/cookie-law-solution-codesnippets/master/adwords_after_iub.js]

Mientras que los fragmentos de código de conversión posteriores se convertirán en:

[file:pre_html-code@https://raw.githubusercontent.com/iubenda/cookie-law-solution-codesnippets/master/adword_after_iub_standard_block.html]

Se pueden bloquear todos los fragmentos de código de la página con la clase _iub_cs_activate. Ejemplo:

[file:pre_html-code@https://raw.githubusercontent.com/iubenda/cookie-law-solution-codesnippets/master/adword_after_iub_standard_block.html]

Google AdSense

Google Analytics

Lo siguiente solo se implementa cuando se utilizan las funciones de Google Analytics que permiten el seguimiento de un usuario único. En todos los demás casos, es recomendable anonimizar la dirección IP.

gtag.js

Google Calendar

Google Maps (iframe)

Google Publisher Tag

Nota: si muestras anuncios personalizados utilizando los servicios de Google, debes asegurarte de obtener el consentimiento explícito para la personalización de anuncios antes de mostrar anuncios personalizados para usuarios finales basados en el EAA. Puedes encontrar más información aquí.

Google Track (con etiqueta img)

Headway

Intercom

Kissmetrics

MediaMond

Mixpanel

MyLiveChat

OpenX banner

Nota: si hay muchos banners deOpenX en la página, puedes acelerar la activación utilizando la opción inlineDelay (para obtener más información, consulta la guía de instalación y personalización de iubenda). Te recomendamos evitar valores menores de 200 milisegundos.

Optimizely

PayPal (botón Comprar ahora)

ShareThis

Smart Adserver

Nota: utiliza etiquetas asíncronas (AJAX).

head

body

SoundCloud

Spotify

Escuchar

Seguir

Stripe

TradeTracker

TripAdvisor

Widget de la insignia

Antes:

[git:pre_html-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/tripadisor_badge_before.html]

Después:

1. Añade a la configuración básica del script de iubenda el reloadOnConsent como se muestra a continuación:

[git:pre_html-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/reload_on_consent.html]

2. Define isConsentGiven para controlar las cookies:

[git:pre_html-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/is_consent_given.html]

3. Reemplaza el elemento original de TripAdvisor con este recurso:

[git:pre_html-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/trip_advisor/tripadvisor_badge_after.html]

Widget de lectura de reseñas

Antes:

[git:pre_html-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/tripadisor_badge_before.html]

Después:

1. Añade a la configuración básica del script de iubenda el reloadOnConsent como se muestra a continuación:

[git:pre_html-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/reload_on_consent.html]

2. Define isConsentGiven para controlar las cookies:

[git:pre_html-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/is_consent_given.html]

3. Reemplaza el elemento original de TripAdvisor con este recurso:

[git:pre_html-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/trip_advisor/tripadvisor_badge_after.html]

Widget para escribir una reseña

Antes:

[git:pre_html-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/tripadisor_badge_before.html]

Después:

1. Añade a la configuración básica del script de iubenda el reloadOnConsent como se muestra a continuación:

[git:pre_html-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/reload_on_consent.html]

2. Define isConsentGiven para controlar las cookies:

[git:pre_html-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/is_consent_given.html]

3. Reemplaza el elemento original de TripAdvisor con este recurso:

[git:pre_html-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/trip_advisor/tripadvisor_writereview_after.html]

Twitter

Botón seguir

Botón compartir

Tweet incrustado

UserVoice

Vimeo

Viralize

YouTube

Lo siguiente se aplica solo en los casos en que no utilices la opción que te permite incluir vídeos de YouTube sin instalar cookies a los visitantes del sitio.

Más información