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
1
window.gravitoCMP.consentHandler.decode()
Copied!
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:
1
cmpId: (...)
2
cmpId_: 302
3
cmpVersion: (...)
4
cmpVersion_: 2
5
consentLanguage: (...)
6
consentLanguage_: "EN"
7
consentScreen: (...)
8
consentScreen_: 0
9
created: Mon Jun 01 2020 14:53:58 GMT+0300 (Eastern European Summer Time) {}
10
gvl: (...)
11
isServiceSpecific: (...)
12
isServiceSpecific_: true
13
lastUpdated: Mon Jun 01 2020 14:53:58 GMT+0300 (Eastern European Summer Time) {}
14
numCustomPurposes: (...)
15
numCustomPurposes_: 2
16
policyVersion: (...)
17
policyVersion_: 2
18
publisherConsents: t {bitLength: 24, maxId_: 0, set_: Set(0)}
19
publisherCountryCode: (...)
20
publisherCountryCode_: "AA"
21
publisherCustomConsents: t {bitLength: 2, maxId_: 2, set_: Set(2)}
22
publisherCustomLegitimateInterests: t {bitLength: 2, maxId_: 2, set_: Set(2)}
23
publisherLegitimateInterests: t {bitLength: 24, maxId_: 0, set_: Set(0)}
24
publisherRestrictions: t {bitLength: 12, map: Map(0)}
25
purposeConsents: t {bitLength: 24, maxId_: 10, set_: Set(10)}
26
purposeLegitimateInterests: t {bitLength: 24, maxId_: 10, set_: Set(9)}
27
purposeOneTreatment: (...)
28
purposeOneTreatment_: false
29
specialFeatureOptins: t {bitLength: 12, maxId_: 2, set_: Set(2)}
30
supportOOB: (...)
31
supportOOB_: true
32
useNonStandardStacks: (...)
33
useNonStandardStacks_: false
34
vendorConsents: t {bitLength: 131, maxId_: 511, set_: Set(6)}
35
vendorLegitimateInterests: t {bitLength: 131, maxId_: 511, set_: Set(6)}
36
vendorListVersion: (...)
37
vendorListVersion_: 40
38
vendorsAllowed: t {bitLength: 0, maxId_: 0, set_: Set(0)}
39
vendorsDisclosed: t {bitLength: 0, maxId_: 0, set_: Set(0)}
40
version: (...)
41
version_: 2
Copied!
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 :
1
window.gravitoCMP.currentState
Copied!
Example of listening events and currentState object
1
(function() {
2
document.addEventListener('gravito:tcfv2:client', function (event) {
3
console.log(event);
4
if(gravitoCMP.currentState) {
5
console.log(gravitoCMP.currentState.customPurposes);
6
console.log(gravitoCMP.currentState.nonTCFVendors);
7
}
8
}, true);
9
})();
Copied!

Setting up event listener on GTM

You need to define following:
  1. 1.
    Custom HTML, call it e.g. "CMP events"
  2. 2.
    Variable, call it e.g. "CMP event proxy"
  3. 3.
    Variable, call it e.g. "consentLevel"
  4. 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:
1
<script>
2
(function() {
3
document.addEventListener('gravito:tcfv2:client', {{CMP event proxy}}, true);
4
})();
5
</script>
Copied!
2) Define new variable CMP event proxy, type being javascript:
1
function() {
2
return function(event) {
3
4
var consentLevel = 0;
5
if(event.detail.purposeConsents[0] == 1) { consentLevel = 1; }
6
7
window.dataLayer.push({
8
event: 'custom.event.cmp.' + event.detail.eventType,
9
'custom.gtm.originalEvent': event,
10
'consentLevel':consentLevel
11
});
12
};
13
}
Copied!
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:
1
function() {
2
return function(event) {
3
4
// consider this simplified/descriptive example, there are more efficient ways to implement the same
5
var consentLevel = "";
6
7
for(i=0;i<event.detail.purposeConsents.length;i++) {
8
9
if(event.detail.purposeConsents[i]=="1") { consentLevel = consentLevel+"a"; }
10
if(event.detail.purposeConsents[i]=="2") { consentLevel = consentLevel+"b"; }
11
if(event.detail.purposeConsents[i]=="3") { consentLevel = consentLevel+"c"; }
12
if(event.detail.purposeConsents[i]=="4") { consentLevel = consentLevel+"d"; }
13
if(event.detail.purposeConsents[i]=="5") { consentLevel = consentLevel+"e"; }
14
if(event.detail.purposeConsents[i]=="6") { consentLevel = consentLevel+"f"; }
15
if(event.detail.purposeConsents[i]=="7") { consentLevel = consentLevel+"g"; }
16
if(event.detail.purposeConsents[i]=="8") { consentLevel = consentLevel+"h"; }
17
if(event.detail.purposeConsents[i]=="9") { consentLevel = consentLevel+"i"; }
18
if(event.detail.purposeConsents[i]=="10") { consentLevel = consentLevel+"j"; }
19
20
}
21
22
// optional : checks non-tcf consents
23
if(window.gravitoCMP.currentState.nonTCFVendors[0]) { if(window.gravitoCMP.currentState.nonTCFVendors[0].consent === true) { consentLevel=consentLevel+"k"; }}
24
if(window.gravitoCMP.currentState.nonTCFVendors[1]) { if(window.gravitoCMP.currentState.nonTCFVendors[1].consent === true) { consentLevel=consentLevel+"l"; }}
25
if(window.gravitoCMP.currentState.nonTCFVendors[2]) { if(window.gravitoCMP.currentState.nonTCFVendors[2].consent === true) { consentLevel=consentLevel+"m"; }}
26
// ... add as many you have on your setup ... //
27
28
window.dataLayer.push({
29
event: 'custom.event.cmp.' + event.detail.eventType,
30
'custom.gtm.originalEvent': event,
31
'consentLevel':consentLevel
32
});
33
};
34
}
Copied!
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:
1
window.gravitoCMP.openPreferences()
Copied!
Last modified 5mo ago