Integration

Gravito CMP emits “gravito:tcfv2:client” events. Events indicate the UI actions and points when the user has given or denied the consents and rest of the tags can either trigger or not.

The event types are:

Action	eventType	Trigger
CMP loaded	cmploaded	Will be fired every time cmp loads, irrespective of whether the UI is shown or not.
Consents not set	consent-not-set	Will be fired when the user has not given his consents. i.e. Cookie does not exist.
Consents given previously	opt-in:previously	Will be fired when user has provided consents using cmp in their previous sessions. i.e. cookie exists
CMP UI resurfaced	opt-in:previously:outdated	Will be fired when publisher decides to resurface the CMP even when cookie exists.
“3rd party vendors” click on 1st layer	layer1:show-vendors	User clicks on “vendors” or “partners” link on 1st layer of CMP
“Settings” click on 1st layer	layer1:show-settings	User clicks on “settings” button on the 1st layer of CMP
Layer 2 closed	layer2:back-to-layer1	User clicks on “close” or “x” on 2nd layer of CMP
Custom settings confirmed by clicking “Accept selected”	layer2:opt-in:selected	User clicks on “Accept selected” on 2nd layer of CMP
“Accept all” clicked on layer 1	layer1:opt-in:all	User clicks on “Accept all” button on 1st layer
“Accept all” clicked on layer 2	layer2:opt-in:all	User clicks on “Accept all” button on 2nd layer
“Reject all” clicked on layer 2	layer2:opt-out:all	User clicks on “Reject all” button on 2nd layer
CMP UI closed	cmpui:closed	CMP UI closes because of user actions
Parent site visible without CMP UI	layer2:back-to-site

Now you could set e.g. TMS to trigger further activities after it receives event with types “layer?:opt-in:all” or “layer2:opt-in:selected”. The latter option might require further processing of the settings.

You can access the data stored to TCF consent string by calling

window.gravitoCMP.consentHandler.decode()

If the end user has provided consents to gravito CMP then this function will return the decoded consent data, in case consents have not been provided then this function will return a null value.

Current state

Just for accessing the consents on various levels :

window.gravitoCMP.currentState

Example of listening events and currentState object

(function() { 
    document.addEventListener('gravito:tcfv2:client', function (event) { 
        console.log(event); 
        if(gravitoCMP.currentState) {
        	console.log(gravitoCMP.currentState.customPurposes); 
        	console.log(gravitoCMP.currentState.nonTCFVendors);
        }
    }, true); 
})();

Setting up an event listener on Google Tag Manager

You need to define following:

1. Custom HTML, call it e.g. “CMP events”
2. Variable, call it e.g. “CMP event proxy”
3. Variable, call it e.g. “consentLevel”
4. Trigger, call it e.g. “CMP opt-in event”

1) You can set up simple event listener on GTM with following code as custom tag:

<script>
(function() { 
    document.addEventListener('gravito:tcfv2:client', {{CMP event proxy}}, true); 
})();
</script>

2) Define new variable CMP event proxy, type being javascript:

function() {
  return function(event) {
    
    var consentLevel = 0;
    if(event.detail.purposeConsents[0] == 1) { consentLevel = 1; }
    
    window.dataLayer.push({
      event: 'custom.event.cmp.' + event.detail.eventType,
      'custom.gtm.originalEvent': event,
      'consentLevel':consentLevel
    });
  };
}

This tracks only purpose 1 (store and access data on the device) having consent enabled. If you need more granularity to triggers you can add more checks that append to consentLevel:

function() {
  return function(event) {
    
    // consider this simplified/descriptive example, there are more efficient ways to implement the same
    var consentLevel = "";

    for(i=0;i<event.detail.purposeConsents.length;i++) { 

  	  if(event.detail.purposeConsents[i]=="1") { consentLevel = consentLevel+"a"; } 
  	  if(event.detail.purposeConsents[i]=="2") { consentLevel = consentLevel+"b"; }
  	  if(event.detail.purposeConsents[i]=="3") { consentLevel = consentLevel+"c"; } 
  	  if(event.detail.purposeConsents[i]=="4") { consentLevel = consentLevel+"d"; }
  	  if(event.detail.purposeConsents[i]=="5") { consentLevel = consentLevel+"e"; } 
  	  if(event.detail.purposeConsents[i]=="6") { consentLevel = consentLevel+"f"; }
  	  if(event.detail.purposeConsents[i]=="7") { consentLevel = consentLevel+"g"; } 
  	  if(event.detail.purposeConsents[i]=="8") { consentLevel = consentLevel+"h"; }
  	  if(event.detail.purposeConsents[i]=="9") { consentLevel = consentLevel+"i"; } 
  	  if(event.detail.purposeConsents[i]=="10") { consentLevel = consentLevel+"j"; }
  	
	  }
        
    // optional : checks non-tcf consents
    if(window.gravitoCMP.currentState.nonTCFVendors[0]) { if(window.gravitoCMP.currentState.nonTCFVendors[0].consent === true) { consentLevel=consentLevel+"k"; }}
    if(window.gravitoCMP.currentState.nonTCFVendors[1]) { if(window.gravitoCMP.currentState.nonTCFVendors[1].consent === true) { consentLevel=consentLevel+"l"; }}
    if(window.gravitoCMP.currentState.nonTCFVendors[2]) { if(window.gravitoCMP.currentState.nonTCFVendors[2].consent === true) { consentLevel=consentLevel+"m"; }}
    // ... add as many you have on your setup ... //
    
    window.dataLayer.push({
      event: 'custom.event.cmp.' + event.detail.eventType,
      'custom.gtm.originalEvent': event,
      'consentLevel':consentLevel
    });
  };
}

Code blocks above are pushing the event data to dataLayer for GA and other tags to consume.

3) Define new variable “consentLevel”, type being datalayer variable, with default value 0 (simple case above) or without default value (more complex case with consentLevel with abc… values)

4) Trigger for calling other tags after consent has been given

• Create new trigger,
• Choose “Custom event” as type
• Define event name as “cmp.*opt-in”, enable regex matching
• Choose “some custom events”
• Define the rule to look for “consentLevel” variable and value to be greater than 0 (simple case) OR
• Define the rule to look for “consentLevel” variable and value to contain “a”, “b” or whatever consent you need to use to trigger tags

Testing and debugging. Easiest way to test that your setup works it should is to set up custom HTML tag with console logging or similar and set the triggere to “Marketing consent” or whatever you have named your triggers.

Resurfacing the CMP 2nd layer

CMP automatically binds to elements with class that is defined within the configuration for managing the CMP settings. Alternavitely the 2nd layer of CMP can be resurfaces by following:

window.gravitoCMP.openPreferences()