Iubenda logo
Genera tus documentos

Documentación

Tabla de contenidos

Cómo configurar Privacy Controls and Cookie Solution (Guía avanzada)

 
❗️ Actualización del valor por defecto del parámetro invalidateConsentWithoutLog

A partir del 15-01-2023, el valor de invalidateConsentWithoutLog ha cambiado y ahora se establece en true. Esto significa que, si has activado el Registro de Preferencias de Cookies y Consentimientos, por defecto se solicita un nuevo consentimiento al usuario cada vez que no se encuentre registrado dicho consentimiento.

Aquí encontrarás un análisis en profundidad sobre:

¿Necesitas una introducción? Aprende cómo utilizar las funciones del generador, cómo cambiar el diseño y posición del banner y mucho más en nuestra Guía para principiantes de Privacy Controls and Cookie Solution.

Veamos un resumen rápido:

  • Se implementa insertando un simple fragmento de código/script en todas las páginas del sitio web en cuestión;
  • Muestra un aviso que contiene un texto estándar que es totalmente personalizable y un enlace a la política de cookies;
  • Tiene un diseño totalmente adaptable, optimizado para varias resoluciones y tamaños de dispositivo;
  • Nos aseguramos de que se pueda ver la política de cookies incluso antes de que el usuario proporcione su consentimiento;
  • Nos aseguramos de que el bloqueo de scripts funciona correctamente (consulta la guía de introducción al bloqueo de las cookies para obtener más información);
  • Registra las preferencias del usuario al continuar navegando, por ejemplo, a través del desplazamiento por la página;
  • Una vez que se ha recopilado el consentimiento, se activan asincrónicamente (es decir, sin recargar la página) todos los scripts que se bloquearon previamente;
  • Si el usuario ha otorgado previamente su consentimiento, el banner de cookies/de consentimiento no aparecerá y los scripts se ejecutarán automáticamente;
  • Personaliza fácilmente tu banner de cookies/de consentimiento con nuestro configurador. Edita la apariencia, los detalles y las funciones de la solución, todo con unos pocos clics.

Una vez generado tu banner de cookies/de consentimiento (Privacy Controls and Cookie Solution > Activar/Editar), obtendrás un fragmento de código similar a este:

<script type="text/javascript">
    var _iub = _iub || [];
    _iub.csConfiguration = {
        "lang": "en",
        "siteId": XXXXXX, //use your siteId
        "cookiePolicyId": YYYYYY, //use your cookiePolicyId
        "banner": {
            "position": "float-top-center",
            "acceptButtonDisplay": true,
            "customizeButtonDisplay": true
        }
    };
</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Para mostrar el banner de cookies/de consentimiento en tu sitio web, copia el código anterior (recuerda generar tu propio código en Privacy Controls and Cookie Solution > Activar/Editar) y pégalo antes del cierre de la etiqueta HEAD de tus páginas o utiliza uno de nuestros plugins para:

También tenemos guías de integración paso a paso en sitios web personalizados, Shopify, Webflow, Wix y Squarespace.

Si eres usuario de Drupal, puedes utilizar la clase PHP disponible a través de descarga directa o Packagist, y encuentra las instrucciones completas en la Guía de la clase PHP.

Además de mostrar un banner de cookies/de consentimiento, también tienes que bloquear las cookies antes de obtener el consentimiento:

Muchas Autoridades de Protección de Datos de la UE han reforzado sus requisitos y adaptado sus normativas sobre cookies y rastreadores con los requisitos del RGPD, especificamente debes registrar y almacenar una prueba de las preferencias de consentimiento de tus usuarios.

Haz clic aquí para obtener más información sobre cómo activar el Registro de Preferencias de Cookies y Consentimientos dentro de Privacy Controls and Cookie Solution.

 

Nota: todos los siguientes parámetros se tienen que incluir en _iub.csConfiguration {}.

1. Parámetros obligatorios

siteId: el código ID de tu web (aviso: este ID se utiliza para compartir las preferencias entre múltiples políticas de cookies en diferentes idiomas que son atribuibles al mismo sitio web/app).

cookiePolicyId: el código ID de tu política de cookies.

lang: este parámetro define el idioma en el que se muestra el contenido del banner (por ejemplo, “it” para italiano, “en” para inglés, “es” para español, etc.). Todas las localizaciones de idiomas disponibles dentro del generador también están disponibles para el contenido del banner.

2. Configuración

countryDetection (boolean, default false): te permite detectar automáticamente el país del usuario.

Para el RGPD

Establece este parámetro en true si gdprAppliesGlobally está en false para limitar el bloqueo previo y las solicitudes de consentimiento de cookies solo a usuarios de la UE (donde es un requisito legal), mientras que los scripts de cookies se ejecutan normalmente en las regiones donde todavía es posible hacerlo legalmente.

Si deshabilitas esta opción, recuerda establecer gdprApplies:false en todas las páginas donde no se solicita el consentimiento.

Para la CCPA

Para activar las protecciones de la CCPA solo para los usuarios a los que se aplica la CCPA, establece este parámetro en true si ccpaApplies está establecido en false.

Para la LGPD

Establece este parámetro en true si lgpdAppliesGlobally está en false para cumplir los requisitos de la LGPD solo a usuarios brasileños mientras que los scripts de cookies se ejecutan normalmente en las regiones donde todavía es posible hacerlo legalmente.

Si deshabilitas esta opción, recuerda que puedes establecer lgpdApplies:false en todas las páginas donde los requisitos de la LGPD no son relevantes.

2.1 RGPD

enableGdpr: (boolean, default true) si se establece como true, activarás/habilitarás la funcionalidad RGPD en Privacy Controls and Cookie Solution (sin aplicarla realmente).

gdprAppliesGlobally: (boolean, default true) si se establece como true, aplicarás las protecciones del RGPD a todos los usuarios. Establece este parámetro como false y countryDetection:true para solicitar el consentimiento tan solo a los usuarios de la UE. Recuerda que si estás ubicado en la UE, debes aplicar el RGPD a todos tus usuarios, incluyendo a aquellos ubicados fuera de la UE.

gdprApplies: (boolean, default true) si se establece como false, no aplicarás las protecciones del RGPD al usuario actual y no se le mostrará el banner de cookies/de consentimiento. Si has establecido countryDetection:false, deberías establecer gdprApplies:false en todas las páginas vistas en las que no se solicita el consentimiento. 

Botones (aceptar, personalizar, rechazar, cerrar)

Las opciones que se enumeran a continuación deben estar incluidas en el objeto banner {}:

acceptButtonDisplay (boolean, default false): determina si se muestra o no el botón “Aceptar”.

customizeButtonDisplay (boolean, default false): determina si se muestra o no el botón “Saber más y personalizar”.

rejectButtonDisplay (boolean, default false): determina si se muestra o no el botón “Rechazar”. Cuando se establece como true banner.closeButtonDisplay se establece a la fuerza como false. Consulta la demostración en CodePen.

closeButtonDisplay (boolean, default true): si se establece como false, no se mostrará el botón de cierre del banner

closeButtonRejects (boolean, default false): si se establece como true, cuando el usuario haga clic en el botón de cierre del banner, su consentimiento se considerará como denegado.

explicitWithdrawal (boolean, default false): si se establece como true, se incluirá la frase: “Usted es libre de otorgar, denegar o revocar su consentimiento en cualquier momento” al texto del banner.

Las categorías mostradas en el modal se detectan y pasan automáticamente de tu política de cookies de iubenda a Privacy Controls and Cookie Solution. Sin embargo, las categorías mostradas también se pueden personalizar utilizando el parámetro purposes a continuación.

Ejemplos:

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 scripts que instalan cookies antes de obtener el consentimiento con un atributo especial data-iub-purposes separado por comas. Consulta esta guía para obtener más instrucciones y ejemplos sobre el uso del etiquetado manual y el consentimiento por categoría.

purposes: (string, default null) las finalidades se agrupan en 5 categorías (Necesarios, Funcionalidad, Experiencia, Medición, Marketing), cada una de las cuales tiene un ID (1, 2, 3, 4, 5). De forma predeterminada, utilizamos las finalidades de la política de cookies de iubenda relacionadas con tu configuración, pero puedes personalizar qué categorías mostrar con purposes (por ejemplo, si utilizas tu propia política de cookies).

Estas son las finalidades incluidas en cada categoría:

  1. Necesarios (id 1). Finalidades incluidas:
    • Guardar y gestionar copias de seguridad
    • Infraestructura de alojamiento y backend
    • Gestión de páginas de aterrizaje (landing pages) e invitación
    • Servicios de plataforma y alojamiento
    • Protección contra SPAM
    • Optimización y distribución del tráfico
    • Supervisión de la infraestructura
    • Gestion de pagos
  2. Funcionalidad (id 2). Finalidades incluidas:
    • Contactar al Usuario
    • Interacción con plataformas de chat en vivo
    • Gestión de conferencias web y telefonía online
    • Gestión de solicitudes de ayuda 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 en línea
    • Gestión de fuentes 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
    • Gestión de la recopilación de datos y 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

Por ejemplo, si utilizas 5 categorías y no utilizas una política de cookies de iubenda, tendrás que especificar "purposes": "1, 2, 3, 4, 5", si no utilizas Medición (id 4) simplemente puedes especificar "purposes": "1, 2, 3, 5" y así sucesivamente.

Nota: para que este parámetro sea efectivo, se necesita que perPurposeConsent se establezca como true (consulta más arriba para obtener más detalles).

listPurposes (boolean, default false): si es true, muestra las finalidades en la primera capa del banner de cookies/de consentimiento (para que sea efectivo, perPurposeConsent se debe establecer en true). Esta opción debe estar dentro del objeto banner {}.

2.2 CCPA

enableCcpa: (boolean, default false) si se establece como true, activarás/habilitarás la funcionalidad de la CCPA en Privacy Controls and Cookie Solution (sin aplicarla realmente).

ccpaApplies: (boolean, default undefined) si se establece como true, aplicarás las protecciones de la CCPA al usuario actual.

ccpaNoticeDisplay: (boolean, default true) si se establece como false, no mostrarás un banner de cookies/de consentimiento para informar a los usuarios sobre la CCPA (tan solo es efectivo si no se aplica el RGPD).

ccpaAcknowledgeOnDisplay: (boolean, default false) si se establece ccpaNoticeDisplay: true, puedes especificar qué constituye reconocimiento del aviso: la simple carga del aviso (true) o la interacción explícita una vez que el aviso se haya cargado (false).

ccpaAcknowledgeOnLoad (boolean, default false): si se establece como true y ccpaAcknowledgeOnDisplay: false, el aviso se reconoce al cargar la página.

ccpaLspa: (boolean, default undefined) te permite especificar si la transacción debería realizarse según el Limited Service Provider Agreement (LSPA) de IAB.

Clases

iubenda-ccpa-opt-out: si añades esta clase a cualquier elemento de la página, al hacer clic en ese elemento se abrirá un cuadro de diálogo en el que el usuario puede confirmar su intención de ejercer su derecho de autoexclusión de la venta de su información personal (enlace “No vendan mi información personal”).

2.3 LGPD

enableLgpd (boolean, default false): si se establece como true, activarás/habilitarás la funcionalidad de la LGPD en Privacy Controls and Cookie Solution (sin aplicarla realmente).

lgpdAppliesGlobally (boolean, default true): si se establece como true, aplicarás las protecciones de la LGPD a todos los usuarios. Establece este parámetro como false y countryDetection:true para solicitar el consentimiento de la LGPD tan solo a los usuarios brasileños.

lgpdApplies (boolean, default undefined): si se establece como false, no aplicarás las protecciones de la LGPD al usuario actual y no se le mostrará el banner de cookies/de consentimiento. Este comportamiento se aplica independientemente de si el valor de lgpdAppliesGlobally (es true o si lgpdAppliesGlobally es false con countryDetection: true)

Ten en cuenta que todos los parámetros disponibles para el RGPD también pueden ser usados para la configuración de la LGPD.

Las principales redes publicitarias ahora requieren que los editores obtengan el consentimiento antes de mostrar anuncios personalizados. En esta guía te enseñaremos cómo puedes cumplir con este requisito con el Marco de Transparencia y Consentimiento de IAB y Privacy Controls and Cookie Solution.

enableTcf (boolean, default false) si se marca como true, los usuarios podrán gestionar sus preferencias de seguimiento publicitario según el Marco de Transparencia y Consentimiento de IAB.

googleAdditionalConsentMode (boolean, default false) si se marca como true, podrás obtener el consentimiento de los socios publicitarios de Google que no formen parte del Marco de Transparencia y Consentimiento, pero que estén en la lista de proveedores de tecnología publicitaria (ATP) de Google.

tcfPurposes:(object) el TCF v2.0 tiene 10 finalidades, cada una de ellas tiene un ID:

  1. Almacenar y/o acceder a información en un dispositivo
  2. Seleccionar anuncios básicos
  3. Crear un perfil de anuncios personalizados
  4. Seleccionar anuncios personalizados
  5. Crear un perfil de contenido personalizado
  6. Seleccionar contenido personalizado
  7. Medir el rendimiento de los anuncios
  8. Medir el rendimiento del contenido
  9. Aplicar la investigación de mercado para generar información sobre la audiencia
  10. Desarrollar y mejorar productos

Con el TCF v2.0, puedes:

  • limitar la base legal al consentimiento o al interés legítimo, así como a ambas;
  • elegir qué finalidades del TCF solicitar

A continuación, te indicamos como activarlo. Gracias a tcfPurposes, en el siguiente ejemplo vamos a:

  • desactivar la finalidad número 1 (“Almacenar y/o acceder a información en un dispositivo”, establece consent_not_needed, lo que solo es posible si nuestra legislación no requiere consentimiento para esta finalidad)*,
  • desactivar la finalidad  número 2 (“Seleccionar anuncios básicos”, marcado como false),
  • limitar la base legal exclusivamente al interés legítimo (li_only) para la finalidad número 4 (“Seleccionar anuncios personalizados”), y
  • limitar la base legal exclusivamente al consentimiento (consent_only) para la finalidad número 7 (“Medir el rendimiento de los anuncios”)
_iub.csConfiguration = {
    "lang": "en",
    "siteId": xxxxxx, //use your siteId
    "cookiePolicyId": yyyyyy, //use your cookiePolicyId
    "enableTcf": true,
    "tcfVersion": 2,
    ...
    "tcfPurposes": {
        "1": "consent_not_needed",
        "2": false,
        "4": "li_only",
        "7": "consent_only"
    },
    "tcfPublisherCC": "DE",
    "banner": {
        ...
    }
}

* Nota sobre PurposeOneTreatment: anteriormente, en algunos países no era obligatorio obtener el consentimiento del usuario para la finalidad número 1 (“Almacenar y/o acceder a información en un dispositivo”). En estos casos, se puede desactivar la solicitud del consentimiento para la finalidad número uno utilizando "1": "consent_not_needed". Sin embargo, como esta opción tan solo debería habilitarse si lo permite la legislación que se aplique en tu caso en concreto, y como en el momento de redactar este artículo, ningún país de la UE admite esta opción desde un punto de vista legal, te recomendamos encarecidamente no usarla.

askConsentIfCMPNotFound (boolean, default true): si se establece como true y no se cuenta la preferencia del Marco de IAB, Privacy Controls and Cookie Solution solicitará, de forma predeterminada, un nuevo consentimiento a los usuarios que ya hubieran proporcionado su consentimiento antes de que se activara el Marco. Establece esta opción como false para desactivar este comportamiento predeterminado.

newConsentAtVendorListUpdate (number, default undefined): número de días que hay que esperar para ejecutar una nueva solicitud de consentimiento después de que se actualice la vendorlist.json. Si se establece como undefined, los usuarios que ya hayan otorgado su consentimiento no volverán a ver el banner de cookies/de consentimiento y el consentimiento para nuevos proveedores se desactivará. Si se establece en 0, los usuarios recibirán una nueva solicitud de consentimiento cada vez que se actualice la lista de proveedores.

tcfPublisherCC (string, default null): código de país de dos letras expresado en la norma ISO 3166-1 que determina la legislación del país de referencia . Normalmente corresponde al código de país del país en el que está establecida la entidad comercial del editor. Puedes utilizar este parámetro para establecer el código de país del editor en la cadena de preferencias del TCF cuando la finalidad del TCF “1” se establece como “consent_not_needed

Clases

iubenda-advertising-preferences-link: al añadir esta clase a cualquier elemento de la página, al hacer clic en el elemento se ejecuta la apertura del modal de ajustes de seguimiento publicitario (permitiendo a los usuarios actualizar sus preferencias del TCF incluso después de haber cerrado el banner de cookies/de consentimiento).

Ten en cuenta que también puedes utilizar el enlace genérico iubenda-cs-preferences-link como alternativa a esta clase del TCF: el resultado será el mismo.

iubenda-vendor-list-link: añade esta clase a cualquier elemento de la página para permitir que los usuarios vuelvan a abrir la lista de proveedores del TCF.

3. Estilo y texto

3.1 Formato y posición

position (string, default “float-top-center”): define la posición del banner de cookies/de consentimiento. Valores disponibles: top, bottom, float-top-left, float-top-right, float-bottom-left, float-bottom-right, float-top-center, float-bottom-center y float-center.

backgroundOverlay (boolean, default false): establece este parámetro como true para añadir un efecto opaco de superposición de fondo al resto de la página cuando se muestre el banner de cookies/de consentimiento.

3.2 Tema

logo (string): URL (https recomendado) o equivalente a base64 de una imagen que se utilizará como logo del título del banner de cookies/de consentimiento. Utiliza un SVG blanco sobre fondo transparente para un mejor resultado.

brandTextColor (string, default “#000”): color del texto del título del modal/banner de cookies/de consentimiento.

brandBackgroundColor (string, default “#fff”): color de fondo del título del banner de cookies/de consentimiento.

Colores del banner

backgroundColor (string, default “#000”): color de fondo del banner.

textColor (string, default “#fff”): color del texto del banner.

Botones

acceptButtonColor (string, default “#0073ce”): color de fondo del botón “Aceptar”.

acceptButtonCaptionColor (string, default “#fff”): color del texto del botón “Aceptar”.

customizeButtonColor (string, default “#212121” para el tema oscuro, default “#dadada” para el tema claro): color de fondo del botón “Saber más y personalizar”.

customizeButtonCaptionColor (string, default “#fff” para el tema oscuro, default “#4d4d4d” para el tema claro): color del texto del botón “Saber más y personalizar”.

rejectButtonColor (string, default “#0073ce”): color de fondo del botón “Rechazar”.

rejectButtonCaptionColor (string, default “#fff”): color del texto del botón “Rechazar”.

continueWithoutAcceptingButtonColor (string, default “#fff”) – color de fondo del botón “Continuar sin aceptar”.

continueWithoutAcceptingButtonCaptionColor (string, default “#000”) – color del texto del botón “Continuar sin aceptar”.

Opciones avanzadas

applyStyles (boolean, default true): al establecer este parámetro en false, no se aplica el estilo/CSS predeterminado al banner. Este parámetro puede ser útil, por ejemplo, cuando quieres darle al banner un aspecto distinto al habitual.

El punto de partida debería ser, en todo caso, nuestro CSS, que puedes encontrar aquí. Vuelve a aplicar el mismo estilo excluido de esta opción, pero tiene la ventaja de ser editable una vez insertado en las páginas. Aquí tienes un ejemplo: Banner con CSS personalizado.

zIndex (number): es el zIndex del div del banner de cookies/de consentimiento. El valor predeterminado es 99999998.

3.3 Texto

Tamaño del texto

fontSize (string, default null): tamaño del texto del banner (incluyendo el botón de cierre). Si esta opción está activa, los valores posibles de las opciones banner.fontSizeCloseButton y banner.fontSizeBody no se tendrán en cuenta.

fontSizeCloseButton (string, default “20px”): tamaño del botón de cierre del banner.

fontSizeBody (string, default “14px”): tamaño del contenido del texto del banner.

Texto del banner

content (string): es el contenido textual dentro del banner de cookies/de consentimiento. Por ejemplo, para la versión en inglés el valor predeterminado es:

Nota informativa
Nosotros y terceros seleccionados utilizamos cookies o tecnologías similares con fines técnicos y, con su consentimiento, para otras finalidades según se especifica en la %{cookie_policy_link}.

Ten en cuenta que banner.content solo se puede utilizar para personalizar el texto del banner y te permite especificar un formato especial al texto con etiquetas HTML, pero si deseas modificar la estructura del banner (por ejemplo, agregar botones o diseños especiales), tienes que usar banner.html.

Shortcodes

Los shortcodes son palabras especiales que puedes utilizar dentro de banner.content y banner.html como un marcador de posición para otra cosa. Puedes utilizarlos cuando quieras personalizar el banner pero conservar los elementos de la interfaz de usuario que te permiten tener el comportamiento normal de Privacy Controls and Cookie Solution.

Los shortcodes disponibles para banner.content son:

  • %{cookie_policy_link} es reemplazado con un enlace a cookiePolicyUrl y con el título especificado en banner.cookiePolicyLinkCaption
  • %{advertising_preferences_link} es reemplazado con un enlace al widget del Marco de Transparencia y Consentimiento
  • %{vendor_list_link} es reemplazado por un enlace a la lista de proveedores del Marco de Transparencia y Consentimiento
  • %{privacy_policy} es reemplazado por un enlace a la política de privacidad (necesario para la CCPA)
  • %{do_not_sell} es reemplazado por un enlace a la autoexclusión de la venta según la CCPA

Aquí tienes un ejemplo de un banner de cookies/de consentimiento con HTML y contenido personalizado.

Notas

  • %{cookie_policy_link} es el shortcode donde se coloca el enlace de la política de cookies. Recuerda que, de forma predeterminada, la política de cookies vinculada en el banner es la política alojada en nuestros servidores. Para cambiar el comportamiento por defecto, tienes que modificar el parámetrocookiePolicyUrl (consulta esta sección de esta guía para obtener más información sobre cookiePolicyUrl).
  • El contenido del banner de cookies/de consentimiento se localizará en todos los idiomas disponibles en el generador (el idioma en el que se muestra el contenido del banner se define a través del parámetro lang).
  • Si has activado el Marco de Transparencia y Consentimiento, verás que el texto del banner es bastante largo:  esto es necesario para cumplir con los requisitos mínimos de IAB. Por lo tanto, consulta los requisitos de IAB antes de editar el contenido del banner.
  • Para asegurarte de que tu política de cookies se muestra correctamente, es necesario que la clase iubenda-cs-cookie-policy-lnk no se utilice en otro lugar de la misma página.

acceptButtonCaption (string, default “Accept”): texto del botón “Aceptar” del banner.

customizeButtonCaption (string, default “Saber más y personalizar”): el texto del botón “Saber más y personalizar” del banner.

rejectButtonCaption (string, default “Reject”): el texto del botón “Rechazar” del banner.

closeButtonCaption (string, default “x”): el texto del botón de cierre del banner (anteriormente innerHtmlCloseBtn).

continueWithoutAcceptingButtonCaption (string, default “false”) – el texto del botón Continuar sin aceptar.

Opciones avanzadas

html (string, default null): es el HTML predeterminado del banner, aunque se puede reemplazar este parámetro por uno personalizado.

Nota: algunos elementos son necesarios, en cualquier caso, para que el banner funcione correctamente. Destacan, en particular:

  • div.iubenda-cs-content (el contenedor principal)
  • a.iubenda-cs-cookie-policy-lnk (el enlace href configurado para vincular la política de cookies, es decir, https://www.iubenda.com/privacy-policy/123456/cookie-policy?an=no&s_ck=false)

Shortcodes

Los shortcodes son palabras especiales que puedes utilizar dentro de banner.content y banner.html como un marcador de posición para otra cosa. Puedes utilizarlos cuando quieras personalizar el banner pero conservar los elementos de la interfaz de usuario que te permiten tener el comportamiento normal de Privacy Controls and Cookie Solution.

Los shortcodes disponibles para banner.html:

%{banner_content} es reemplazado con el valor especificado en banner.content (o el contenido predeterminado del banner). Ten en cuenta que %{banner_content} es obligatorio si activas el TCF v2 (a no ser que hayamos aprobado tu texto personalizado).

Aquí tienes un ejemplo del banner de cookies/de consentimiento con HTML y contenido personalizado.

footer {} (object): las opciones que se enumeran a continuación deben estar incluidas en el objeto de footer {}.

btnCaption (string): texto del botón (colocado al final de la ventana “Preferencias de seguimiento”, consulta consentimiento por categoría) utilizado para guardar las preferencias de consentimiento. El valor predeterminado es “Guardar y continuar”.

i18next

i18n {} (object): puedes traducir/editar los textos de cualquier componente de Privacy Controls and Cookie Solution a través de la biblioteca JavaScript de i18n. Echa un vistazo a este archivo JSON para obtener una lista de todos los componentes/cadenas de carácteres que puedes editar y/o localizar.

Importante: si has activado el Marco de Transparencia y Consentimiento, para cumplir con los requisitos de configuración mínimos de IAB, tienes que utilizar, necesariamente, las traducciones oficiales (consulta la “List of translations for purpose descriptions v2.0”).

floatingPreferencesButtonDisplay (string, default false): define la posición del widget de privacidad (una función que permite a tus usuarios acceder y editar sus preferencias de seguimiento en cualquier momento después de haber establecido sus preferencias iniciales). Valores disponibles: false, true, top-left, top-right, bottom-left, bottom-right (de forma predeterminada se establece como true), anchored-center-left, anchored-center-right, anchored-top-left, anchored-top-right, anchored-bottom-left, anchored-bottom-right.

floatingPreferencesButtonCaption (string, default false): texto del botón del widget de privacidad.

floatingPreferencesButtonIcon (boolean, default true): icono del botón del widget de privacidad.

floatingPreferencesButtonHover (boolean, default false): muestra el texto del widget de privacidad flotando.

floatingPreferencesButtonRound (boolean, default false): añade el atributo iubenda-tp-circle al botón del widget de privacidad.

floatingPreferencesButtonZIndex (default 2147483647) – Añade esta opción para aplicar un zIndex personalizado al widget flotante de consentimiento. Esto podría ser útil si se producen algunos problemas de superposición.

floatingPreferencesButtonColor (string, default “#fff”): color de fondo del botón del widget de privacidad.

floatingPreferencesButtonCaptionColor (string, default “#000”) : color del texto del botón del widget de privacidad.

privacyPolicyUrl (string): te permite personalizar el enlace de la política de privacidad.

cookiePolicyUrl (string): esta es la URL del enlace de la política de cookies que se encuentra en el banner. Está disponible en la página de edición de tu política de privacidad, en la pestaña “integración”. Si no defines este parámetro, se referirá a la política de cookies generada por iubenda y alojada en nuestros servidores.

Alternativamente, puedes elegir alojar la política de cookies en una página de tu sitio web y, por lo tanto, rellenar este campo con la URL relacionada. Recuerda que si decides alojar la política de cookies en tu propia página, esta página no debería utilizar cookies, más allá de las cookies técnicas. Nota: este parámetro no será efectivo si estás utilizando un HTML personalizado para el banner (consulta la configuración banner.html a continuación).

cookiePolicyInOtherWindow (boolean, default false): si estableces este parámetro como true la política de privacidad y la política de cookies se abrirá en otra ventana en lugar de en la ventana modal de iubenda.

cookiePolicyLinkCaption (string) Texto ancla del enlace a la política de cookies (el valor predeterminado es “cookie policy”). Esta opción debe estar incluida en el objeto banner {}.

5. Opciones avanzadas

Las opciones que se enumeran a continuación deben estar incluidas en el objeto banner {}:

slideDown (boolean, default true): puedes establecer este parámetro como false para desactivar la animación del banner.

prependOnBody (boolean, default false): si este parámetro se establece como true, el código HTML del banner se inserta en el sitio web como el primer elemento del BODY. De forma predeterminada, “prependOnBody” se establece como false y el banner se coloca como el último elemento del BODY.

Tienes que establecer el parámetro prependOnBody como true cuando quieras, por ejemplo, colocar el banner encima del encabezamiento. De esta manera, el banner será el primer elemento de la página, y para mostrarlo por encima el encabezamiento, simplemente aplica un “padding-top” al siguiente elemento: #iubenda-cs-banner + * { padding-top: 180px; }

Ejemplo con el banner colocado encima del encabezamiento.

reloadOnConsent (boolean, default false): puedes establecer este parámetro como true si quieres que la página se vuelva a cargar después de la recopilación del consentimiento.

askConsentAtCookiePolicyUpdate (boolean, default false): puedes establecer este parámetro como true si quieres solicitar un nuevo consentimiento cuando se actualice la política de cookies.

enableRemoteConsent (boolean, default false): puedes establecer este parámetro como true para para permitir un registro del consentimiento entre sitios web (puede ser útil cuando el script se implementa en más de un sitio web de la misma red). En particular, si estableces este parámetro como true, nuestra solución crea una cookie técnica en iubenda.com (dominio) que se utiliza cuando no se encuentra la cookie en el dominio local.

invalidateConsentWithoutLog (boolean, string, date, default true): cuando es true, se solicitará un nuevo consentimiento siempre que no se haya registrado el consentimiento del usuario en el Registro de Preferencias de Cookies y Consentimientos. 
Si se establece una fecha (formato: “aaaa-mm-dd”) cuando el consentimiento obtenido antes de esta fecha no se encuentre en el Registro de Preferencias de Cookies y Consentimientos, se solicitará un nuevo consentimiento (p. ej. invalidateConsentWithoutLog: "2022-01-10“).

googleConsentMode (boolean, string, default null): cuando se establece en null, Privacy Controls and Cookie Solution detecta automáticamente si se debe habilitar el Google Consent Mode (si se encuentra una variable window.dataLayer o una función global gtag).
Si se establece en true, Privacy Controls and Cookie Solution siempre habilita el Google Consent Mode y define una variable global window.dataLayer si aún no está definida.
Si se establece en false, Privacy Controls and Cookie Solution siempre deshabilita el Google Consent Modee.
Establece este parámetro en template si estás utilizando la plantilla de iubenda usando Google Tag Manager y quieres integrar el código de Privacy Controls and Cookie Solution manualmente (como se explica en esta sección).

5.3 Desarrollo

inlineDelay (integer, milliseconds, default 500): el tiempo máximo entre las activaciones de los fragmentos etiquetados con la clase _iub_cs_activate-inline (el fragmento de código etiquetado de esta manera se activa secuencialmente). Al disminuir este valor reducirás el tiempo total de activación. Advertencia: el valor predeterminado se establece para que los fragmentos de código funcionen correctamente; reducirlo puede impedir la activación correcta de algún fragmento de código concreto. Te recomendamos verificar la activación del fragmento de código que se muestra en tu página si modificas estos ajustes.

rebuildIframe (boolean, default true): una vez que se haya registrado el consentimiento del usuario, el comportamiento predeterminado de Privacy Controls and Cookie Solution consiste en volver a generar (o reintegrar) los iframes modificados previamente. Al establecer este parámetro como false, se restauran los iframes bloqueados previamente después de la recopilación del consentimiento.

Callbacks

callback {} (object): este es el parámetro a través del cual puedes definir la callback que Privacy Controls and Cookie Solution de iubenda puede realizar ante la ocurrencia de un evento.

onReady (function): si el consentimiento del usuario todavía no se ha recopilado (por ejemplo, porque es su primera visita), se invoca la callback onReady tan pronto como se muestre el banner de cookies/de consentimiento. Por el contrario, si el usuario ya ha otorgado su consentimiento a la instalación de las cookies, se invoca esta callback tan pronto como se inicialice Privacy Controls and Cookie Solution de iubenda. El consentimiento otorgado o no se transmite como un argumento, que puede ser true o false.

onBannerShown (function): al utilizar esta función puedes ejecutar un script cuando se muestra el banner.

onBannerClosed (function): al utilizar esta función puedes ejecutar un script cuando se cierra el banner.

onCookiePolicyShown (function): se llama a esta función cuando se muestra la política de cookies (ya sea en una ventana modal o en una página separada).

onConsentGiven (function): se invoca esta callback si el usuario ha otorgado su consentimiento a la instalación de cookies, tanto al dar su consentimiento por primera vez como en todas sus visitas posteriores.

onConsentFirstGiven (function): se invoca la primera vez que el usuario presta su consentimiento y cada vez que actualiza sus preferencias (por ejemplo, al hacer clic en iubenda-cs-preferences-link y guardar sus nuevas preferencias). Se transmite una de las siguientes cadenas de caracteres como un argumento: documentScroll, documentMoved, bannerXClose, documentClicked o cookiePolicyClosed.

onConsentRejected (function): se invoca esta callback si el usuario ha rechazado la instalación de cookies.

onConsentFirstRejected (function): se invoca cuando se ha rechazado el consentimiento, la primera vez que el usuario expresa sus preferencias (no en cada página vista, como onConsentRejected) y cada vez que actualiza sus preferencias (por ejemplo, haciendo clic en iubenda-cs-preferences-link y guardando sus nuevas preferencias).

onPreferenceExpressed (function): se invoca cuando se expresa una preferencia, ya sea aceptada o rechazada.

onPreferenceFirstExpressed (function): se invoca la primera vez que el usuario expresa sus preferencias (no en cada página vista, como onPreferenceExpressed) y cada vez que actualiza sus preferencias (por ejemplo, al hacer clic en iubenda-cs-preferences-link y guardar sus nuevas preferencias).

onPreferenceExpressedOrNotNeeded (function): se invoca cuando se expresa una preferencia o cuando no se necesita, por ejemplo cuando:

  • gdprApplies:true y el usuario ha expresado su preferencia, o
  • gdprApplies:false, o
  • gdprAppliesGlobally:false, countryDetection:true y el usuario está ubicado fuera de la UE

onPreferenceNotNeeded (function): se invoca cuando no se necesita una preferencia, por ejemplo cuando:

  • gdprApplies:false, o
  • gdprAppliesGlobally:false, countryDetection:true y el usuario está ubicado fuera de la UE

onConsentRead (function): se invoca la primera vez que el usuario otorga su consentimiento y en cada carga posterior cuando se detecta el consentimiento. La callback onConsentGiven se convierte en un alias para onConsentRead y no se invoca esta última.

onStartupFailed (function): se invoca cuando Privacy Controls and Cookie Solution de iubenda falla en su fase de inicio. Se pasa un mensaje de error como un argumento.

onError (function): se invoca cuando Privacy Controls and Cookie Solution de iubenda experimenta un error. Se pasa un mensaje de error como un argumento.

onFatalError (function): se invoca cuando Privacy Controls and Cookie Solution de iubenda experimenta un error que no le permite seguir funcionando. Se pasa un mensaje de error como un argumento.

onActivationDone (function): se invoca cuando se completa la activación del fragmento de código.

onBeforePreload (function): se invoca cuando Privacy Controls and Cookie Solution se carga previamente, es decir, antes de que se carguen las cookies.

onCcpaAcknowledged (function): se invoca cuando se ha reconocido el aviso de la CCPA.

onCcpaFirstAcknowledged (function): se invoca la primera vez que se reconoce el aviso de la CCPA.

onCcpaOptOut (function): se invoca cuando el usuario se ha autoexcluido de la venta.

onCcpaFirstOptOut (function): se invoca la primera vez que el usuario se ha autoexcluido de la venta y cada vez que actualiza sus preferencias (por ejemplo, haciendo clic en iubenda-ccpa-opt-out y guardando sus nuevas preferencias).

on2ndLayerShown (function) – Se invoca cuando se muestra la segunda capa del banner.

onCookiePolicyShown (function) – Se invoca cuando se muestra la política de cookies (ya sea en una ventana modal o en una página aparte).

Consulta un ejemplo de configuración ↓

Debugging

skipSaveConsent (boolean, default false): al establecer este parámetro como true, el consentimiento no se guarda en una cookie de preferencia.

logLevel (string): define la verborrea del logger (valores disponibles: ‘debug’, ‘info’, ‘warn’, ‘error’, ‘fatal’; el valor predeterminado es ‘nolog’).

preferenceCookie {} (object): este es el parámetro a través del cual puedes personalizar la duración de la cookie de preferencia que iubenda instala en el navegador del usuario para registrar su consentimiento. En concreto, el objeto a definir es: expireAfter.

expireAfter (number, default 365): representa el número de días de vigencia del consentimiento otorgado por el usuario en un sitio web determinado. Nota: este valor se actualiza en cada visita posterior del usuario.

ccpaCookie {} (object): te permite personalizar la expiración de la cookie que almacena el reconocimiento del aviso. En concreto, el objeto a definir es expireAfter.

expireAfter (number, default 365): número de días de vigencia.

localConsentDomain (string, default null): el dominio en el que quieres guardar el consentimiento recopilado de los usuarios. Si no se establece, el consentimiento se guardará en una cookie en el dominio de la página actual (por ejemplo, al visitar www.example.com, el consentimiento se guardará en una cookie ubicada en el dominio example.com).

Si el comportamiento predeterminado no es apropiado, por ejemplo, si el sitio web está ubicado en el dominio www.paesaggiurbani.italia.it, se debe proporcionar el consentimiento para paesaggiurbani.italia.it (y no para italia.it). En ese caso debe establecer localConsentDomain en el valor ‘paesaggiurbani.italia.it’.

Nota: en una situación similar, si no se proporciona el parámetro, el banner podría seguir mostrándose al mismo usuario en cada visita/vista de página posterior.

localConsentDomainExact (boolean, default null) – Te permite especificar el dominio exacto en el que quieres guardar el consentimiento proporcionado por el usuario.

Nota: si están configuradas ambas opciones (localConsentDomain and localConsentDomainExact), sólo se tendrá en cuenta la opción localConsentDomainExact.

localConsentPath (string, default ‘/’): la ruta dentro del dominio local, en la que quieres guardar el consentimiento proporcionado por el usuario. De forma predeterminada, el consentimiento del usuario se guarda en el dominio local dentro de la cookie en la ruta ‘/’. De esta forma, la cookie está disponible independientemente de la página del dominio a la que se acceda.

Si, por ejemplo, no quieres que la cookie de preferencia configurada para www.example.com/percorso1 también se aplique a www.example.com/percorso2 (al navegar), y viceversa, tendrás que proporcionar el valor ‘ / percorso1 ‘para este parámetro en el primer caso y’ / percorso2 ‘en el segundo caso.

Otros parámetros

whitelabel (boolean, default true): establece este parámetro como false para mostrar la marca iubenda en la segunda capa.

invalidateConsentBefore (“YYYY-MM-DD”, milliseconds from epoch, default null): todos los consentimientos recopilados antes de esta fecha serán invalidados. Los consentimientos recopilados en esta fecha y en el futuro no se invalidarán.

maxCookieSize (number, default 4096): para evitar que los navegadores rechacen las cookies de más de 4096 caracteres, Privacy Controls and Cookie Solution permite dividir las cookies en varios fragmentos. Con maxCookieSize puedes configurar la longitud máxima de cada fragmento (consulta también maxCookieChunks).

maxCookieChunks:(number, default 5): con este parámetro puedes configurar el número máximo de fragmentos en los que se pueden dividir las cookies (consulta también maxCookieSize).

Nota: si la cookie que hay que guardar es más larga que maxCookieSize * maxCookieChunks (20480 caracteres con valores predeterminados), la cookie no se guarda.

timeoutLoadConfiguration (integer, milliseconds, default 30000): la cantidad de tiempo que hay que esperar para que la configuración remota indique que se ha agotado el tiempo de espera. Si tienes una red lenta, al incrementar este valor te asegurarás de que lPrivacy Controls and Cookie Solutionn consiga los recursos que necesita a tiempo.

startOnDomReady (boolean, default true): si se establece como true, el rendering del banner y/o la activación de los fragmentos de código bloqueados se ejecutará tan pronto como el estado del documento sea ‘cargado’ (es decir, cuando el DOM alcance el estado ‘cargado’). Si la opción se establece como false, Privacy Controls and Cookie Solution se iniciará cuando la página se haya cargado totalmente (es decir, cuando el estado del DOM sea ‘completado’ y todos los recursos incluidos en la página se hayan cargado).

Clases

iubenda-cs-close-btn: si añades esta clase a cualquier elemento de la página,  al hacer clic en dicho elemento se cierra el banner y se asume que se ha otorgado el consentimiento (de una forma equivalente a hacer clic en el botón X del banner).

Advertencia: las APD de algunos países europeos NO consideran válido tal mecanismo de consentimiento, por lo que te recomendamos analizar detenidamente dicha incorporación de conformidad con la ley que te resulte aplicable.

iubenda-cs-cookie-policy-lnk: al añadir esta clase a cualquier elemento de la página, si haces clic en ese elemento se permite que se muestre la política de cookies  (es equivalente a hacer clic en la política de cookies). Nota: para asegurar que la política de cookies se muestre correctamente, la clase  iubenda-cs-cookie-policy-lnk (asignada al enlace a la política de cookies en el banner) no debe usarse en otro lugar de la página.

iubenda-cs-preferences-link : añadir esta clase a cualquier elemento de la página permite que los usuarios actualicen sus preferencias de cookies incluso después de cerrar el banner de cookies/de consentimiento.

5.4 Ejemplos

Este es un ejemplo de una configuración con los parámetros opcionales:

<script type="text/javascript">
    var _iub = _iub || [];
    _iub.csConfiguration = {
        "lang": "en",
        "siteId": 896537, //use your siteId
        "cookiePolicyId": 8207462, //use your cookiePolicyId
        "enableRemoteConsent": "false",
        "banner": {
            "position": "top",
            "slideDown": "false",
            "content": "This website or its third-party tools use cookies. Please refer to the %{cookie_policy_link} if you want to learn more or withdraw your consent.",
            "cookiePolicyLinkCaption": "cookie policy",
            "backgroundColor": "#CCC",
            "textColor": "#000",
            "fontSize": "14px",
            "innerHtmlCloseBtn": "OK"
        },
        "callback": {
            "onPreferenceExpressed": function(preference) {
                console.log('onPreferenceExpressed', preference);
            }
        },
        "preferenceCookie": {
            "expireAfter": 180
        }
    };
</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Otros ejemplos de configuraciones posibles:

5.5 Marcador de posición personalizado para fragmentos de código bloqueados

Es posible que quieras mostrar un aviso personalizado que reemplace el contenido que no puedes mostrar hasta que se preste el consentimiento, o porque el consentimiento ha sido rechazado para esa finalidad, y por lo tanto, está bloqueado por Privacy Controls and Cookie Solution.

Para hacer esto, puedes crear un elemento <div>, con el aviso personalizado que quieres mostrar en lugar del contenido no disponible, y un script previamente bloqueado que elimina el <div>, una vez que se otorgue el consentimiento.

Example

<div id="content-before-consent">This will be removed as
soon as the user gives consent to purpose X</div>
      // Where X is the purpose for which consent needs to be given to
         run that script
<script type="text/plain" class="_iub_cs_activate" data-iub-purposes="X">
     // Where X is the purpose for which consent needs to be given to
        run that script
  ;(function() {
    var divToRemove = document.getElementById('content-before-consent');
    if (divToRemove && divToRemove.parentNode) {
      divToRemove.parentNode.removeChild(divToRemove);
    }
  })();
</script>

5.6 Activador inline

Es posible incluir la parte del código relativa a los scripts directamente en la página (inline); este código se conoce como el  activador inline. Los scripts se pueden activar a través del activador inline incluso si el recursos primario iubenda_cs.js no está disponible o tiene un error.

El activador inline no solo garantiza la activación de los scripts, sino que también puede tomar un permiso proporcionado (consulta la opción forceSafeActivation a continuación). No se puede utilizar para mostrar el banner, la política de cookies o gestionar la obtención del consentimiento.

Tan solo funciona como una capa adicional de protección en caso de errores, y no actúa como un sustituto del código principal de Privacy Controls and Cookie Solution de iubenda.

Ten en cuenta que el activador inline tan solo invocará el parámetro onActivationDone, ignorando al resto.

Hay dos opciones de configuración adicionales para el activador inline:

  • safeTimeout (milliseconds, default 0): tiempo que el activador inline espera antes de empezar a funcionar.
  • forceSafeActivation (boolean, default false): si se establece como true los scripts se activan independientemente del consentimiento otorgado. Si se establece como false, el activador inline tan solo activa los scripts si se ha otorgado el consentimiento (como se memorizó en la cookie de preferencia del dominio de la página de host.)

El activador inline está disponible en:

Marco de Transparencia y consentimiento de IAB

Si has activado la compatibilidad con el Marco de Transparencia y Consentimiento de IAB (TCF) para la personalización de las preferencias de seguimiento publicitario, puedes utilizar el activador inline tanto para safe.js como para safe-tcf-v2.js.

safe-tcf-v2.js está disponible en:

Ejemplos

El contenido de safe.js (y safe-tcf-v2.js) tiene que incluirse en la página después de las configuraciones iniciales y antes del código que carga iubenda_cs.js.

CURRENT

<script type="text/javascript">
    var _iub = _iub || [];
    _iub.csConfiguration = {
        "lang": "en",
        "siteId": XXXXXX, //use your siteId
        "cookiePolicyId": YYYYYY, //use your cookiePolicyId
        "banner": {
            "position": "float-top-center",
            "acceptButtonDisplay": true,
            "customizeButtonDisplay": true
        }
    };
    _iub.csConfiguration.safeTimeout = 500; //custom option
    _iub.csConfiguration.forceSafeActivation = false; //custom option
</script>
<!-- inline activator - safe.js (current channel) -->
<script type="text/javascript">
    //<![CDATA[
    //copy content from cdn.iubenda.com/cs/safe.js and paste here
    //]]>
</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Ejemplo de configuración con el TCF v2.0 de IAB activado:

<script type="text/javascript">
    var _iub = _iub || [];
    _iub.csConfiguration = {
        "lang": "en",
        "enableTcf": true,
        "siteId": XXXXXX, //use your siteId
        "cookiePolicyId": YYYYYY, //use your cookiePolicyId
        "banner": {
            "position": "float-top-center",
            "acceptButtonDisplay": true,
            "customizeButtonDisplay": true
        }
    };
</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/tcf/stub-v2.js"></script>
<!-- inline activator - safe.js (current channel) -->
<script type="text/javascript">
    //<![CDATA[
    //copy content from cdn.iubenda.com/cs/safe.js and paste here
    //]]>
</script>
<!-- inline activator - safe-tcf-v2.js (current channel) -->
<script type="text/javascript">
    //<![CDATA[
    //copy content from cdn.iubenda.com/cs/tcf/safe-tcf-v2.js and paste here
    //]]>
</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

BETA

<script type="text/javascript">
    var _iub = _iub || [];
    _iub.csConfiguration = {
        "lang": "en",
        "siteId": XXXXXX, //use your siteId
        "cookiePolicyId": YYYYYY, //use your cookiePolicyId
        "banner": {
            "position": "float-top-center",
            "acceptButtonDisplay": true,
            "customizeButtonDisplay": true
        }
    };
    _iub.csConfiguration.safeTimeout = 500; //custom option
    _iub.csConfiguration.forceSafeActivation = false; //custom option
</script>
<!-- inline activator - safe.js (beta channel) -->
<script type="text/javascript">
    //<![CDATA[
    //copy content from cdn.iubenda.com/cs/beta/safe.js and paste here
    //]]>
</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/beta/iubenda_cs.js" charset="UTF-8" async></script>

Ejemplo de configuración con el TCF v2.0 de IAB activado:

<script type="text/javascript">
    var _iub = _iub || [];
    _iub.csConfiguration = {
        "lang": "en",
        "enableTcf": true,
        "siteId": XXXXXX, //use your siteId
        "cookiePolicyId": YYYYYY, //use your cookiePolicyId
        "banner": {
            "position": "float-top-center",
            "acceptButtonDisplay": true,
            "customizeButtonDisplay": true
        }
    };
</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/tcf/beta/stub-v2.js"></script>
<!-- inline activator - safe.js (beta channel) -->
<script type="text/javascript">
    //<![CDATA[
    //copy content from cdn.iubenda.com/cs/beta/safe.js and paste here
    //]]>
</script>
<!-- inline activator - safe-tcf-v2.js (beta channel) -->
<script type="text/javascript">
    //<![CDATA[
    //copy content from cdn.iubenda.com/cs/tcf/beta/safe-tcf-v2.js and paste here
    //]]>
</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/beta/iubenda_cs.js" charset="UTF-8" async></script>

STABLE

<script type="text/javascript">
    var _iub = _iub || [];
    _iub.csConfiguration = {
        "lang": "en",
        "siteId": XXXXXX, //use your siteId
        "cookiePolicyId": YYYYYY, //use your cookiePolicyId
        "banner": {
            "position": "float-top-center",
            "acceptButtonDisplay": true,
            "customizeButtonDisplay": true
        }
    };
    _iub.csConfiguration.safeTimeout = 500; //custom option
    _iub.csConfiguration.forceSafeActivation = false; //custom option
</script>
<!-- inline activator - safe.js (stable channel) -->
<script type="text/javascript">
    //<![CDATA[
    //copy content from cdn.iubenda.com/cs/stable/safe.js and paste here
    //]]>
</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/stable/iubenda_cs.js" charset="UTF-8" async></script>

Ejemplo de configuración con el TCF v2.0 de IAB activado:

<script type="text/javascript">
    var _iub = _iub || [];
    _iub.csConfiguration = {
        "lang": "en",
        "enableTcf": true,
        "siteId": XXXXXX, //use your siteId
        "cookiePolicyId": YYYYYY, //use your cookiePolicyId
        "banner": {
            "position": "float-top-center",
            "acceptButtonDisplay": true,
            "customizeButtonDisplay": true
        }
    };
</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/tcf/stable/stub-v2.js"></script>
<!-- inline activator - safe.js (stable channel) -->
<script type="text/javascript">
    //<![CDATA[
    //copy content from cdn.iubenda.com/cs/stable/safe.js and paste here
    //]]>
</script>
<!-- inline activator - safe-tcf-v2.js (stable channel) -->
<script type="text/javascript">
    //<![CDATA[
    //copy content from cdn.iubenda.com/cs/tcf/stable/safe-tcf-v2.js and paste here
    //]]>
</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/stable/iubenda_cs.js" charset="UTF-8" async></script>

El código activador es una parte integral de Privacy Controls and Cookie Solution de iubenda y, como tal, se puede modificar para incluir nuevas funciones, actualizaciones y correcciones.

Para facilitar la gestión de la versión del activador en tu página, está disponible la variable _iub.csSafeActivatorVersion, que recuerda la versión de iubenda_cs.js de la que se extrajo el activador.

5.7 API

Privacy Controls and Cookie Solution de iubenda presenta una API JS para una fácil interacción con algunas de sus funciones principales.

Syntax: _iub.cs.api.METHOD_NAME

Los métodos disponibles son:

printErrors(): imprime los errores de Privacy Controls and Cookie Solution de iubenda en la consola del navegador.

showCP(): muestra la política de cookies (de forma similar a cuando haces clic en el enlace de la política de cookies en el banner o en otro enlace con la clase iubenda-cs-cookie-policy-lnk, como se describe aquí).

openPreferences(): permite a los usuarios actualizar sus preferencias de cookies incluso después de cerrar el banner de cookies/de consentimiento (de forma similar a cuando hacen clic en un elemento con la clase iubenda-cs-preferences-link).

resetCookies(): utiliza este método para restablecer las cookies de preferencia.

showTcfVendors(): vuelve a abrir la lista de proveedores del TCF (de forma similar a cuando los usuarios hacen clic en un elemento con la clase iubenda-vendor-list-link).

consentGiven():otorga el consentimiento. El método acepta los siguientes parámetros adicionales:

  • eventName (string), uno de los siguientes: documentClicked (default), documentScrolled, documentMoved, bannerXclose, cookiePolicyClosed; indica el tipo de acción a través de la cual se proporcionó el consentimiento.
  • force (boolean)true | false (default): si se establece como false, la CS de  iubenda se asegura de que se muestre el banner antes de aceptar el consentimiento; en cambio, si se establece como true, el consentimiento se recibe en cualquier caso. 

    Nota: la llamada a este método asume que el consentimiento proporcionado es totalmente equivalente al proporcionado a través de la interfaz de usuario, por ejemplo mediante desplazamiento por la página. Por lo tanto, se realizan todas las acciones posteriores al consentimiento proporcionado, incluida la actualización de la cookie de preferencias, la activación de los fragmentos de código previamente bloqueados y la invocación de las callbacks onConsentFirstGiven y onConsentRead. Para activar solo los fragmentos de código, existe un método activateSnippets().

activateSnippets(): activa los fragmentos de código previamente bloqueados. 
Nota: este método se puede invocar repetidamente; los fragmentos ya activados no se tendrán en cuenta. Por lo tanto, es útil en aquellas instalaciones en las que, tras la recopilación del consentimiento, el contenido previamente bloqueado que ahora debe activarse se agrega dinámicamente a la página (por ejemplo, carga diferida o desplazamiento infinito).

La opción runOnActivationDoneCallback (boolean, default false),  si se establece como true, ejecutará la callback onActivationDone una vez completada la activación del gradiente de código (consulta la callback onActivationDone).

isConsentGiven() (DOMElement, default window.document): retorna true si se proporcionó el consentimiento, de lo contrario retorna false.

Nota: no puedes utilizar esta función si has establecido banner.rejectButtonDisplay: true o perPurposeConsent: true. Además, si has activado el Marco de Transparencia y Consentimiento, tienes que añadir obligatoriamente el activador sincrónico (safe-tcf-v2.js).

setConsentOnScrollOnElement() (boolean): la llamada a este método define el elemento sobre el que se observará el desplazamiento por la página a la hora de analizar el consentimiento. Este método es útil cuando quieres aprovecharte de la opción consentOnScrollOnElement, pero el elemento DOM todavía no está disponible cuando se activa Privacy Controls and Cookie Solution. En este sentido, se puede usar la callback onBannerShow (ejemplo), que ocurre cuando se inicia la CS

storeConsent(): almacena el consentimiento en las cookies. Si, por ejemplo, quieres migrar consentimientos de un proveedor anterior,  podrías llamar a este método dentro de la callback onBeforePreload cuando el consentimiento ya lo ha dado en otra plataforma. Además, si eres un proveedor, puedes utilizar  storeConsent() para probar nuestra solución (consulta esta demostración en CodePen).

gdprApplies(): (boolean): retorna true si las protecciones del RGPD se aplican al usuario actual, de lo contrario retorna false.

ccpaApplies(): (boolean): retorna true si las protecciones de la CCPA se aplican al usuario actual, de lo contrario retorna false.

askCcpaOptOut(): aparece el cuadro de diálogo para solicitar la confirmación de la autoexclusión de la venta.

isCcpaAcknowledged(): retorna si se ha reconocido el aviso de la CCPA.

isCcpaOptedOut(): retorna si el usuario ha optado por la autoexclusión de la venta.

rejectAll(): rechaza todas las cookies.

Nota:  también puedes invocar a los métodos API de Privacy Controls and Cookie Solution desde un iframe.

Más información