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 should 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 given yet

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

"Settings" click on 1st layer

layer1:show-settings

Layer 2 closed

layer2:back-to-layer1

Custom settings confirmed by clicking "Yes"

layer2:opt-in:selected

"Accept all" clicked on layer 1

layer1:opt-in:all

"Accept all" clicked on layer 2

layer2:opt-in:all

"Reject all" clicked on layer 2

layer2:opt-out:all

CMP UI closed

cmpui:closed

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.

Example response:

cmpId: (...)
cmpId_: 302
cmpVersion: (...)
cmpVersion_: 2
consentLanguage: (...)
consentLanguage_: "EN"
consentScreen: (...)
consentScreen_: 0
created: Mon Jun 01 2020 14:53:58 GMT+0300 (Eastern European Summer Time) {}
gvl: (...)
isServiceSpecific: (...)
isServiceSpecific_: true
lastUpdated: Mon Jun 01 2020 14:53:58 GMT+0300 (Eastern European Summer Time) {}
numCustomPurposes: (...)
numCustomPurposes_: 2
policyVersion: (...)
policyVersion_: 2
publisherConsents: t {bitLength: 24, maxId_: 0, set_: Set(0)}
publisherCountryCode: (...)
publisherCountryCode_: "AA"
publisherCustomConsents: t {bitLength: 2, maxId_: 2, set_: Set(2)}
publisherCustomLegitimateInterests: t {bitLength: 2, maxId_: 2, set_: Set(2)}
publisherLegitimateInterests: t {bitLength: 24, maxId_: 0, set_: Set(0)}
publisherRestrictions: t {bitLength: 12, map: Map(0)}
purposeConsents: t {bitLength: 24, maxId_: 10, set_: Set(10)}
purposeLegitimateInterests: t {bitLength: 24, maxId_: 10, set_: Set(9)}
purposeOneTreatment: (...)
purposeOneTreatment_: false
specialFeatureOptins: t {bitLength: 12, maxId_: 2, set_: Set(2)}
supportOOB: (...)
supportOOB_: true
useNonStandardStacks: (...)
useNonStandardStacks_: false
vendorConsents: t {bitLength: 131, maxId_: 511, set_: Set(6)}
vendorLegitimateInterests: t {bitLength: 131, maxId_: 511, set_: Set(6)}
vendorListVersion: (...)
vendorListVersion_: 40
vendorsAllowed: t {bitLength: 0, maxId_: 0, set_: Set(0)}
vendorsDisclosed: t {bitLength: 0, maxId_: 0, set_: Set(0)}
version: (...)
version_: 2

This function can also be used to decode locally persisted and encoded consent data, by passing it as an argument to it. This is useful, when you want to compare the new consent data with older consent data.

Current state

Just for accessing the consents on various levels the following might be more useful :

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 event listener on GTM

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

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.

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