Eventos de CMP

Para recibir notificaciones cuando se produzcan determinados eventos, puedes utilizar los siguientes métodos de JavaScript:

  • __cmp("addEventListener",["eventname",callableFunction,capture],null)
  • __cmp("removeEventListener",["eventname",callableFunction,capture],null)
  • __tcfapi("addEventListener",2, callableFunction)
  • __tcfapi("removeEventListener",2, callableFunction, listenerId)

El CMP puede invocar los siguientes eventos:

Evento

Descripción

init

Se ha cargado el código CMP y se ha eliminado el código provisional. En esta fase, el CMP aún no dispone de información sobre el consentimiento.

settings

El CMP ha terminado de cargar su configuración. Si ya existía una cadena de consentimiento, ahora se pueden leer los datos de consentimiento desde el CMP.

consentscreen

El CMP muestra la pantalla de consentimiento

consentscreenoff

El CMP elimina la pantalla de consentimiento

consentscreencustom

El CMP muestra la página de opciones personalizadas

consent

El CMP ha obtenido el consentimiento o se ha encontrado una cookie preexistente. Ahora se pueden leer los datos de consentimiento desde el CMP.

consentapproved

El visitante ha dado su consentimiento a todos los proveedores/fines

consentrejected

El visitante ha rechazado todos los proveedores y fines

consentcustom

El visitante ha dado su consentimiento personalizado (aceptaciones y rechazos)

liestablished

Se muestra la pantalla de consentimiento; se ha establecido un interés legítimo para este visitante.

vendorconsent

El visitante ha aceptado un elemento de contenido dinámico. El ID del proveedor del elemento aceptado se puede encontrar en la variable de subtipo.

gpp

Varios eventos para el estándar IAB GPP

tcfv2

Varios eventos para el estándar IAB TCF

loadShowing

Una vez finalizada la carga (véase el evento settings) y el sistema ha decidido mostrar la capa de consentimiento.

loadNotShowing

Una vez finalizada la carga (véase el evento settings) y el sistema ha decidido no mostrar la capa de contenido.

Los controladores de eventos se definen como:

var handler = function (eventname, cmpobject, subtype){…} 

Advertencia: Ya no utilices cmpobject . La función está obsoleta. Utiliza llamadas a la API en su lugar.

Ejemplo:

<script>
  function getInfos(e,o)
  {     
    var result = __cmp('getCMPData');
    /*... do something with result ...*/
  }
  __cmp("addEventListener",["consent",getInfos,false],null);
</script>

Ten en cuenta que el comando addEventListener de IAB TCF v2 solo reaccionará ante un subconjunto de eventos.

Ejemplos

Redirigir al visitante a un sitio web diferente si no se da el consentimiento

Ten en cuenta que este comportamiento no es recomendable y podría acarrear problemas legales.

<script>
  function getInfos(e,o)
  { 
    location.href = "https://www.mywebsite.com/alternative-content.html";
  }
  __cmp("addEventListener",["consentrejected",getInfos,false],null);
</script>

Mostrar un mensaje si el visitante lo ha rechazado

<div id="mymessage" style="display:none; position:fixed; left:calc(50% - 300px); top:calc(50% - 200px); width:600px; height:400px; background-color: #fff0c7; padding: 20px; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);"><b>Please consider</b><br>Our website is mainly financed by online advertising. Without consent we will not be able to show you tailored ads and our ad revenue will be much lower. As we respect your choice we like to ask you, if you maybe like to donate 1 EUR instead? This will help us keep the quality of our service up.<br>
<br>
  <a href="donate.html"><b>Donate 1 EUR now!</b></a><br>
<br>
  <a href="#" onclick="document.getElementById('mymessage').style.display = 'none';">No, thanks!</a>
</div>
<script>
  function getInfos(e,o){ document.getElementById('mymessage').style.display = 'block';}
  __cmp("addEventListener",["consentrejected",getInfos,false],null);
</script>

Desplazar el contenido de la página hacia abajo cuando se abre la ventana de consentimiento

<script>
 var iscmpopen = false;

 function handleSize()
 {
  if(iscmpopen)
  {
   document.body.style.paddingTop = document.getElementById('cmpbox').offsetHeight + 'px';
  }
  else
  {
   document.body.style.paddingTop = 'inherit';
  }
 }

 function pushDown(e, o)
 {
  iscmpopen = true;
  handleSize();
 }

 function pushUp(e, o)
 {
  iscmpopen = false;
  handleSize();
 }

 window.addEventListener('resize', handleSize, false);
 window.addEventListener('load', handleSize, false);

 __cmp('addEventListener', ['consentscreen', pushDown, false], null);
 __cmp('addEventListener', ['consentscreenoff', pushUp, false], null);
</script>

We do our best to keep this purely informative documentation up to date. However, if you notice that any of these guides need a little touch-up, let us know!