Web & AMP: CMP Events

Web & AMP: CMP Events

Normal Web / AMP events

IAB predefined events

Once the CMP has been loaded, the global method __tcfapi is created, which is used to retrieve the consent string, get consent for a specific purpose, etc. The full definition and all available standard API commands can be found at the following link.

The CMP launches a series of events predefined by the IAB to detect the following:
  1. There is previous saved consent string available (event 'tcloaded')
  2. CMP user interface is shown (event 'cmpuishown')
  3. A new consent string has been saved and is available (event 'useractioncomplete')
These events are caught by the __tcfapi method with the 'addEventListener' command.

Example:
  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);
IMPORTANT: global method __tcfapi must exist before you can use it, there are many ways of checking this, one way is using Sibbo custom event 'sibbo-init'. Find an example in next section.

Sibbo custom events

The CMP launches a series of custom events to detect the following:
  1. 'sibbo-init' This event is dispatched in the document element when the CMP loader has finished the initialization and __tcfapi is now available
  2. 'sibbo-close' This event is dispatched in the window element when the CMP closes
  3. 'sibbo-tcs-saved' This event is dispatched in the document element when the CMP saves the TCS
  4. 'sibbo-main' This event is dispatched in the document element when the CMP shows initial banner
  5. 'sibbo-purposes' This event is dispatched in the document element when the CMP shows purposes based  on consent view
  6. 'sibbo-purposesLegInt' This event is dispatched in the document element when the CMP shows purposes based  on legitimate interest view
  7. 'sibbo-vendors' This event is dispatched in the document element when the CMP shows vendors view
  8. 'sibbo-privacyPolicy' This event is dispatched in the document element when the CMP shows privacy policy view
  9. 'sibbo-cookiesPolicy' This event is dispatched in the document element when the CMP shows cookies policy view
  10. 'sibbo-privacyCookiesPolicy' This event is dispatched in the document element when the CMP shows privacy and cookies policy view
  11. 'sibbo-termsAndConditions' This event is dispatched in the document element when the CMP shows terms and conditions view
  12. 'sibbo-additionalConsentProviders' This event is dispatched in the document element when the CMP shows Google's additional consent providers view



Example:

We create an event listener to catch 'sibbo-init' and then run initCMP
  1. document.addEventListener('sibbo-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-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-init', initCMP);


In summary:
  1. We listen for the 'sibbo-init' event
  2. Upon receiving it we can use the __tcfapi function to listen to IAB events
  3. When receiving an event from the IAB we check if the event is 'useractioncomplete'
  4. If so, we have the tcData object that, among other properties, contains the consent string.



Superfast WEB events

IAB predefined events

The CMP launches a series of events predefined by the IAB to detect the following:
  1. There is previous saved consent string available (event 'tcloaded')
  2. CMP user interface is shown (event 'cmpuishown')
  3. A new consent string has been saved and is available (event 'useractioncomplete')

These events are caught by the global method __tcfapi with the 'addEventListener' command.

Example:
  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);
IMPORTANT: global method __tcfapi must exist before you can use it, there are many ways of checking this, one way is using Sibbo custom event 'sibbo-loader-init'. Find an example in next section.

Sibbo Custom Events

The CMP launches a series of custom events to detect the following:
  1. 'sibbo-loader-init' This event is dispatched in the document element when the CMP loader has finished the initialization and __tcfapi is now available
  2. 'sibbo-loader-visible' This event is dispatched in the document element when the CMP loader shows the initial banner
  3. 'sibbo-loader-not-visible' This event is dispatched in the document element when the CMP loader does not show initial banner
  4. 'sibbo-close' This event is dispatched in the window element when the CMP closes
  5. 'sibbo-tcs-saved' This event is dispatched in the document element when the CMP saves the TCS
  1. 'sibbo-main' This event is dispatched in the document element when the CMP shows initial banner
  2. 'sibbo-purposes' This event is dispatched in the document element when the CMP shows purposes based  on consent view
  3. 'sibbo-purposesLegInt' This event is dispatched in the document element when the CMP shows purposes based  on legitimate interest view
  4. 'sibbo-vendors' This event is dispatched in the document element when the CMP shows vendors view
  5. 'sibbo-privacyPolicy' This event is dispatched in the document element when the CMP shows privacy policy view
  6. 'sibbo-cookiesPolicy' This event is dispatched in the document element when the CMP shows cookies policy view
  7. 'sibbo-privacyCookiesPolicy' This event is dispatched in the document element when the CMP shows privacy and cookies policy view
  8. 'sibbo-termsAndConditions' This event is dispatched in the document element when the CMP shows terms and conditions view
  9. 'sibbo-additionalConsentProviders' This event is dispatched in the document element when the CMP shows Google's additional consent providers view

Use of Events on WEB Superfast

In the case of the CMP implementation for Web Superfast it is necessary to listen to the 'sibbo-loader-init' event before being able to catch the IAB predefined 'tcloaded',  'cmpuishown' and 'useractioncomplete'.

We create an event listener to catch 'sibbo-loader-init' and then run 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);


In summary:
  1. We listen for the 'sibbo-loader-init' event
  2. Upon receiving it we can use the __tcfapi function to listen to IAB events
  3. When receiving an event from the IAB we check if the event is 'useractioncomplete'
  4. If so, we have the tcData object that, among other properties, contains the consent string.