Info
Content

CMP API usage

Introduction

As an approved IAB Consent Management Platform, Clickio Consent Tool fully supports the standardized CMP Javascript API for user consent data retrieval.

Non-EU visitors and CMP API

By default, the non-EU version of the Consent Tool code (automatically served by our geo-aware CDN) does not include CMP API functionality (to minimize load traffic/time), but that is server-side configurable - feel free to contact support if you need it.

General information

The current version API documentation can be found here. Clickio CMP API implementation fully supports all the described functionality.

When implementing the CMP API integration, you should bear in mind that it loads asynchronously, so you can not directly call __tcfapi function to pass commands from your scripts. Avoid implementing any await cycles/timeouts, which create parasitic load or delays. Instead, you can use a simple CMP API stub, which gracefully handles all the calls for you, while the full code loads.

<script type="text/javascript">
!function(){"use strict";var t;(function(t){t.t=function(){for(var t,e,n="__tcfapiLocator",r=[],i=window;i;){try{if(i.frames[n]){t=i;break}}catch(t){}if(i===window.top)break;i=i.parent}t||(function t(){var e=i.document,r=!!i.frames[n];if(!r)if(e.body){var a=e.createElement("iframe");a.style.cssText="display:none",a.name=n,e.body.appendChild(a)}else setTimeout(t,5);return!r}(),i.__tcfapi=function(){for(var t=arguments.length,n=new Array(t),i=0;i<t;i++)n[i]=arguments[i];if(!n.length)return r;if("setGdprApplies"===n[0])n.length>3&&2===parseInt(n[1],10)&&"boolean"==typeof n[3]&&(e=n[3],"function"==typeof n[2]&&n[2]("set",!0));else if("ping"===n[0]){var a={gdprApplies:e,cmpLoaded:!1,cmpStatus:"stub"};"function"==typeof n[2]&&n[2](a)}else r.push(n)},i.addEventListener("message",(function(t){var e="string"==typeof t.data,n={};try{n=e?JSON.parse(t.data):t.data}catch(t){}var r=n.i;r&&window.__tcfapi(r.command,r.version,(function(n,i){var a={o:{returnValue:n,s:i,u:r.u}};e&&(a=JSON.stringify(a)),t&&t.source&&t.source.postMessage&&t.source.postMessage(a,"*")}),r.p)}),!1))}}(t={t:{}}),t.t)()}();
</script>

After installing this code on the page, you can then call the API as usual (getTCData dump example is shown below). It is recommended to install the code prior to any other related scripts in the page head.

window.__tcfapi('getTCData', null, function (consentData, consentDataSuccess) {
    console.groupCollapsed('getTCData called ('+consentDataSuccess+')');
    console.log(consentData);
    console.groupEnd();
});

The stub stores the request and replies as soon as the full code loads. PostMessage commands are also supported.

 

Back to top