Info
Content

CMP Events

In order to get notifications when certain events occur, you can use the following JavaScript Methods:

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

The CMP can call the following events:

Event

Description

init

CMP code is loaded and the stub code has been removed. At this stage the CMP has no information about the consent yet.

settings

CMP finished loading its settings. If a consent string existed already, the consent data can now be read from the CMP.

consentscreen

CMP shows the consent screen

consentscreenoff

CMP removes the consent screen

consentscreencustom

CMP shows the custom choices page

consent

CMP has gathered consent or a preexisting cookie was found. Consent data can now be read from the CMP.

consentapproved

Visitor gave positive consent to all vendors/purposes

consentrejected

Visitor rejected all vendors and purposes

consentcustom

Visitor gave custom consent (accepts and rejections)

liestablished

Consent screen is shown, legitimate interest has been established for this visitor.

vendorconsent

Visitor accepted an dynamic content item. Vendor ID of the accepted item can be found in subtype variable.

Event handler are defined as:

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

Warning: Do not use cmpobject anymore. The function is deprecated. Use API calls instead.

Example:

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

Please note that the IAB TCF v2 addEventListener command will react only on a subset of events.

Examples

Redirecting the visitor to a different website if no consent is given

Please note that this behavior is not recommended and might cause legal issues!

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

Showing a message if the visitor rejected

<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>

Pushing the page content down when consent layer opens

<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>
Back to top