Integration

Gravito CMP emits “gravito:cmp:b2b” (up to version 1.0.x) or “gravito:cmp:light” (version 2.0.1 onwards) 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 should not.

The event types are:

ActioneventTypeDescription
CMP loadedcmploaded:nocookieCMP is loading and does not find cookie set
CMP is shown with first, initial layerlayer1:visibleCMP surfaces and shows the 1st layer
Layer 2 is closedlayer2:closedUser closes the layer 2 by clicking on close action
Custom settings acceptedlayer2:opt-in:selectedUser accepts the settings made on layer 2
“Accept all” clicked on layer 1layer1:opt-in:allUser clicks on “Accept all” button on layer 1
“Accept all” clicked on layer 2layer2:opt-in:allUser clicks on “Accept all” button on layer 2
“Reject all” clicked on layer 2layer2:opt-out:allUser clicks on “Reject all” button on layer 2
CMP has collected consents previouslyopt-in:previouslyConsents are stored to cookie (and backend in some cases) and CMP is not surfacing this time

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.

Setting up event listened 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:

Version 1.0.x:

(function() { 
    document.addEventListener('gravito:cmp:b2b', {{CMP event proxy}}, true); 
})();

Version 2.0.x onwards:

(function() { 
    document.addEventListener('gravito:cmp:light', {{CMP event proxy}}, true); 
})();

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

Note! There is version inconsistency, version 2 branch was changing variable naming but the data model was not changed, the change occurs in version 2.0.2, all versions prior to that needs to stick to following example.

Versions 1.0.x:

function() {
  return function(event) {
    
    var consentLevel = "";
    if(typeof gravitoData.B2B.length!="undefined") {
      if(JSON.parse(gravitoData.B2B).Model[0].consent == true) { consentLevel=consentLevel+"a"; }
      if(JSON.parse(gravitoData.B2B).Model[1].consent == true) { consentLevel=consentLevel+"b"; }
      if(JSON.parse(gravitoData.B2B).Model[2].consent == true) { consentLevel=consentLevel+"c"; }
      if(JSON.parse(gravitoData.B2B).Model[3].consent == true) { consentLevel=consentLevel+"d"; }
    }
    
    window.dataLayer.push({
      event: 'custom.event.cmp.' + event.detail.eventType,
      'custom.gtm.originalEvent': event,
      'consentLevel':consentLevel
    });
  };
}

Version 2.0.0 onwards:

function() {
  return function(event) {
    
    var consentLevel = "";
    if(typeof gravitoData.lightCMP.length!="undefined") {
      if(JSON.parse(gravitoData.lightCMP).Model[0].consent == true) { consentLevel=consentLevel+"a"; }
      if(JSON.parse(gravitoData.lightCMP).Model[1].consent == true) { consentLevel=consentLevel+"b"; }
      if(JSON.parse(gravitoData.lightCMP).Model[2].consent == true) { consentLevel=consentLevel+"c"; }
      if(JSON.parse(gravitoData.lightCMP).Model[3].consent == true) { consentLevel=consentLevel+"d"; }
    }
    
    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, leave withot default value.

4) Define a trigger for calling other tags after consent has been given

  • Create new trigger, call it e.g. “marketing consent”
  • 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 and depending on the overall CMP setup you might look for variable values to contain string “d” or some other more complex mixture depending on if you want the trigger to require multiple consents:
    • Analytics consent, consentLevel contains “c”
    • Marketing consent, consentLevel contains “d”
    • etc.

After defining those you can use this newly created trigger to load tags that you want to keep from triggering before consent is given. Add more granularity with consent levels and multiple triggers as you like.

5) 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.

How to resurface CMP?

Two options, CMP binds automatically to element ID defined in config (“settingBtnId”). Alternatively the CMP can be summoned by calling:

Version 1.0.x:

window.gravitoB2BCMP.openPreferences();

Version 2.0.x onwards:

window.gravitoLightCMP.openPreferences();

Consent triggered loading of GTM


var gtmId = "GTM-XXXXXX";
var cmpConsentToAllowGtm = 1;
document.addEventListener('gravito:cmp:light', function(event) {

	//Catch only opt-in events (CMP can be submitting others as well)
	if(event.detail.eventType.match(/opt-in/)) { 
	
		// Check if consent for mandatory cookies is given
		if(JSON.parse(gravitoData.lightCMP).Model[cmpConsentToAllowGtm].consent == true) {
			
			var gtmScript = document.createElement("script");
			gtmScript.innerHTML = "(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','" + gtmId + "');function gtag(){dataLayer.push(arguments);}";
			document.head.appendChild(gtmScript);
			
		}
		
	}
});

Send CMP events to Gravito CDP

Add following to your CMP deployment script or call it some other way (or hook into existing listener):

document.addEventListener("gravito:cmp:light", function (event) {
   gravito.sendEvent("CMP", "cmpEvent=CMP " + event.detail.eventType);
});

Sending CMP events to first party endpoint

With Gravito First-party enabled ligthCMP you can capture the events emitted by CMP. whenever user performs any action on the consents CMP will emit some event which can be catched by First-party and can be used to generate reports regarding acceptance ratio.

To Enable this fetaure you should first Register your first-party domain with Gravito.

Add “catchCMPEvents”: true in settings sections of your config.Also make sure you have other First-party settings. Your settings section should look something as below.

settings: {
    type: "Light",
    useGCM: false,
    useGravitoBackend: true,
    backendUrl: "",
    useDynamicBackendUrl: true,
    profileType: "micro",
    catchCMPEvents: true,
  },
Available from : SDK v1.0.12