Web & AMP: Eventos

Web & AMP: Eventos

Eventos en Web normal / AMP

Eventos predefinidos por IAB

Una vez ha cargado el CMP, se crea el método __tcfapi, que sirve para recuperar la cadena de consentimiento, obtener el consentimiento de un propósito concreto, etc. La definición completa y todos los comandos estándar de la IAB disponibles se pueden encontrar en el siguiente enlace.

El CMP lanza una serie de eventos predefinidos por la IAB para detectar lo siguiente:
  1. Hay disponible una cadena de consentimiento previamente guardada (evento 'tcloaded')
  2. La interfaz del CMP se ha mostrado (evento 'cmpuishown')
  3. Se ha guardado una nueva cadena de consentimiento y está disponible (evento 'useractioncomplete')

Estos eventos se captan con el método __tcfapi con el comando 'addEventListener'.

Ejemplo:
  1. const consentSaved = (tcData, success) => {                                                                                                        
  2.   //Once the user saves the string
  3.   if(success && tcData.eventStatus === 'useractioncomplete') {
  4.     __tcfapi('removeEventListener', 2, (success) => {
  5.       if(success) {
  6.         console.log("Consent saved");
  7.       }

  9.     }, tcData.listenerId);

  11.   }
  12. }

  14. __tcfapi('addEventListener', 2, consentSaved);

IMPORTANTE: el método global __tcfapi debe existir antes de usarlo. Hay muchos modos de comprobar si existe. Uno de ellos es usando el evento de Sibbo 'sibbo-init'. Puedes encontrar un ejemplo en la siguiente sección.

Eventos personalizados de Sibbo

El CMP lanza una serie de eventos personalizados para detectar lo siguiente:
  1. 'sibbo-init' Este evento se envía en el elemento document cuando el CMP loader ha finalizado la inicialización y __tcfapi ahora está disponible
  2. 'sibbo-close' Este evento se envía en el elemento window cuando se cierra el CMP
  3. 'sibbo-tcs-saved' Este evento se envía en el elemento document cuando el CMP guarda el TCS.
  4. 'sibbo-main' Este evento se envía en el elemento document cuando el CMP muestra el banner inicial.
  5. 'sibbo-purposes' Este evento se envía en el elemento document cuando el CMP muestra propósitos basados ​​en la vista de consentimiento.
  6. 'sibbo-purposesLegInt' Este evento se envía en el elemento document cuando el CMP muestra propósitos basados ​​en la vista de interés legítimo.
  7. 'sibbo-vendors' Este evento se envía en el elemento document cuando el CMP muestra la vista de proveedores.
  8. 'sibbo-privacyPolicy' Este evento se envía en el elemento document cuando el CMP muestra la vista de la política de privacidad.
  9. 'sibbo-cookiesPolicy' Este evento se envía en el elemento document cuando el CMP muestra la vista de política de cookies
  10. 'sibbo-privacyCookiesPolicy' Este evento se envía en el elemento document cuando el CMP muestra la vista de política de privacidad y cookies.
  11. 'sibbo-termsAndConditions' Este evento se envía en el elemento document cuando el CMP muestra la vista de términos y condiciones.
  12. 'sibbo-additionalConsentProviders' Este evento se envía en el elemento document cuando el CMP muestra la vista de proveedores de consentimiento adicionales de Google.

Ejemplos:

Creamos un event listener para capturar 'sibbo-init' y entonces inicializar initCMP:
  1. document.addEventListener('sibbo-init', initCMP);

Creamos la función initCMP para escuchar los eventos predefinidos de la IAB:
  1. function initCMP() {

  3.        __tcfapi('addEventListener', 2, callbackUseractioncomplete);

  5.  }

  7. document.addEventListener('sibbo-init', initCMP);


Una vez un evento predefinido por la IAB es recibido, la función callbackUseractioncomplete es ejecutada, definimos esta función:
  1. const callbackUseractioncomplete = (tcData, success) => {

  3.             if(success && tcData.eventStatus === 'useractioncomplete') {

  5.                 console.log('useractioncomplete', tcData);

  7.                 // we eliminate the listener if we do not want it to fire anymore
  8.                 __tcfapi('removeEventListener', 2, (success) => {

  10.                     if(success) {

  12.                       // do something

  14.                     }

  16.                 }, tcData.listenerId);

  18.             }

  20.  }
  22. function initCMP() {

  24.        __tcfapi('addEventListener', 2, callbackUseractioncomplete);

  26.  }

  28. document.addEventListener('sibbo-init', initCMP);


En resumen:
  1. Escuchamos el evento 'sibbo-init'
  2. Al recibirlo podemos usar la función __tcfapi para escuchar eventos IAB.
  3. Al recibir un evento de la IAB, verificamos si el evento es 'useractioncomplete'
  4. Si es así tenemos el objeto tcData que, entre otras propiedades, contiene la cadena de consentimiento.

Eventos en Web Superfast

Eventos predefinidos por IAB

El CMP lanza una serie de eventos predefinidos por la IAB para detectar lo siguiente:
  1. Hay una cadena de consentimiento guardada anterior disponible (evento 'tcloaded')
  2. La interfaz del CMP se ha mostrado (evento 'cmpuishown')
  3. Se ha guardado una nueva cadena de consentimiento y está disponible (evento 'useractioncomplete')

Estos eventos se captan con el método __tcfapi con el comando 'addEventListener'.

Ejemplo:
  1. const consentSaved = (tcData, success) => {                                                                                                        
  2.   //Once the user saves the string
  3.   if(success && tcData.eventStatus === 'useractioncomplete') {
  4.     __tcfapi('removeEventListener', 2, (success) => {
  5.       if(success) {
  6.         console.log("Consent saved");
  7.       }

  9.     }, tcData.listenerId);

  11.   }
  12. }

  14. __tcfapi('addEventListener', 2, consentSaved);

IMPORTANTE: el método global __tcfapi debe existir antes de usarlo. Hay muchos modos de comprobar si existe. Uno de ellos es usando el evento de Sibbo 'sibbo-loader-init'. Puedes encontrar un ejemplo en la siguiente sección.

Eventos personalizados de Sibbo

El CMP lanza una serie de eventos personalizados para detectar lo siguiente:

  1. 'sibbo-loader-init' Este evento se envía en el elemento document cuando el CMP loader ha finalizado la inicialización y __tcfapi ahora está disponible
  2. 'sibbo-loader-visible' Este evento se envía en el elemento document cuando el cargador CMP loader muestra el banner inicial.
  3. 'sibbo-loader-not-visible' Este evento se envía en el elemento document cuando el CMP loader no muestra el banner inicial.
  1. 'sibbo-close' Este evento se envía en el elemento window cuando se cierra el CMP
  2. 'sibbo-tcs-saved' Este evento se envía en el elemento document cuando el CMP guarda el TCS.
  3. 'sibbo-main' Este evento se envía en el elemento document cuando el CMP muestra el banner inicial.
  4. 'sibbo-purposes' Este evento se envía en el elemento document cuando el CMP muestra propósitos basados ​​en la vista de consentimiento.
  5. 'sibbo-purposesLegInt' Este evento se envía en el elemento document cuando el CMP muestra propósitos basados ​​en la vista de interés legítimo.
  6. 'sibbo-vendors' Este evento se envía en el elemento document cuando el CMP muestra la vista de proveedores.
  7. 'sibbo-privacyPolicy' Este evento se envía en el elemento document cuando el CMP muestra la vista de la política de privacidad.
  8. 'sibbo-cookiesPolicy' Este evento se envía en el elemento document cuando el CMP muestra la vista de política de cookies
  9. 'sibbo-privacyCookiesPolicy' Este evento se envía en el elemento document cuando el CMP muestra la vista de política de privacidad y cookies.
  10. 'sibbo-termsAndConditions' Este evento se envía en el elemento document cuando el CMP muestra la vista de términos y condiciones.
  11. 'sibbo-additionalConsentProviders' Este evento se envía en el elemento document cuando el CMP muestra la vista de proveedores de consentimiento adicionales de Google.

Uso de los Eventos en WEB Superfast

En el caso de la implementación del CMP para Web Superfast es necesario escuchar el evento 'sibbo-loader-init' antes de poder usar los eventos 'cmpuishown', 'useractioncomplete' y 'sibbo-close'.

Creamos un escuchador de eventos para captar 'sibbo-init' y entonces ejecutar initCMP
  1. document.addEventListener('sibbo-loader-init', initCMP);

We create the initCMP function to listen for the IAB predefined events
  1. function initCMP() {

  3.        __tcfapi('addEventListener', 2, callbackUseractioncomplete);

  5.  }

  7. document.addEventListener('sibbo-loader-init', initCMP);



Once a predefined event is received by the IAB, the callbackUseractioncomplete function is executed, we define this function:
  1. const callbackUseractioncomplete = (tcData, success) => {

  3.             if(success && tcData.eventStatus === 'useractioncomplete') {

  5.                 console.log('useractioncomplete', tcData);

  7.                 // we eliminate the listener if we do not want it to fire anymore
  8.                 __tcfapi('removeEventListener', 2, (success) => {

  10.                     if(success) {

  12.                       // do something

  14.                     }

  16.                 }, tcData.listenerId);

  18.             }

  20.  }
  22. function initCMP() {

  24.        __tcfapi('addEventListener', 2, callbackUseractioncomplete);

  26.  }

  28. document.addEventListener('sibbo-loader-init', initCMP);



En resumen:
  1. Escuchamos el evento 'sibbo-loader-init'
  2. Al recibirlo podemos usar la función __tcfapi para escuchar eventos IAB.
  3. Al recibir un evento de la IAB, verificamos si el evento es 'useractioncomplete'
  4. Si es así tenemos el objeto tcData que, entre otras propiedades, contiene la cadena de consentimiento.