In this article we will cover the IAB __tcfapi() function with the addEventListener command. Your organization can use these commands in Javascript to perform automatic actions in response to specific events, for example when an end-user updates their consent status. Click here to find more information about the TCF API commands from the IAB.
the addEventListener command
The addEventListener command registers a listener for a callback function with the CMP. The listener's callback function is triggered when the end-user consent status changes. The listener is given an ID for later removal.
Your organization can respond to specific events or actions made by the end-user with your own custom functions using the addEventListener command.
addEventListener command
__tcfapi('addEventListener', 2, (tcdata, success) => { console.log('the updated consent data object is: ' + JSON.stringify(tcdata)); });the removeEventListener command
To remove an event listener you call the __tcfapi() function using the removeEventListener command. An additional parameter is required, the listener id created with the addEventListener command.
removeEventListener command
__tcfapi('removeEventListener', 2, (success) => { console.log('removed event listener: ' + tcdata.listenerId); }, tcdata.listenerId);Example implementation
Your organization can call the addEventListener & removeEventListener command through the browser console or Javascript code on a webpage.
Once your organization's website has loaded enter this command directly into the browser tools console window and press enter.
In this example an event listener is created through addEventListener. Opening the privacy manager and making changes to the end-user consent (updating the tcdata object) will display the updated tcdata object automatically.
__tcfapi('addEventListener', 2, (tcdata, success) => { console.log('the updated consent data object is: ' + JSON.stringify(tcdata)); });Your organization could also use javascript code similar to the following example to help you utilize the addEventListener and removeEventListener.
In this example an event listener is created through addEventListener after the CMP is shown. Opening the privacy manager and make changes to end-user consent (updating the tcdata object) will call function show_tcdata to display the updated tcdata object automatically.
When the page is reloaded the tcdata object is loaded. At the same time the event listener is removed through removeEventListener. Opening the privacy manager and make changes to the consent will not call function show_tcdata, the updated tcdata object will not be shown.
<html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
!function(t){var e={};function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(r,o,function(e){return t[e]}.bind(null,o));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=3)}([function(t,e,n){var r=n(2);t.exports=!r((function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a}))},function(t,e){t.exports=function(t){return"object"==typeof t?null!==t:"function"==typeof t}},function(t,e){t.exports=function(t){try{return!!t()}catch(t){return!0}}},function(t,e,n){n(4),function(){if("function"!=typeof window.__tcfapi){var t,e=[],n=window,r=n.document;!n.__tcfapi&&function t(){var e=!!n.frames.__tcfapiLocator;if(!e)if(r.body){var o=r.createElement("iframe");o.style.cssText="display:none",o.name="__tcfapiLocator",r.body.appendChild(o)}else setTimeout(t,5);return!e}()&&(n.__tcfapi=function(){for(var n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];if(!r.length)return e;if("setGdprApplies"===r[0])r.length>3&&2===parseInt(r[1],10)&&"boolean"==typeof r[3]&&(t=r[3],"function"==typeof r[2]&&r[2]("set",!0));else if("ping"===r[0]){var i={gdprApplies:t,cmpLoaded:!1,apiVersion:"2.0"};"function"==typeof r[2]&&r[2](i,!0)}else e.push(r)},n.addEventListener("message",(function(t){var e="string"==typeof t.data,r={};try{r=e?JSON.parse(t.data):t.data}catch(t){}var o=r.__tcfapiCall;o&&n.__tcfapi(o.command,o.parameter,o.version,(function(n,r){var i={__tcfapiReturn:{returnValue:n,success:r,callId:o.callId}};e&&(i=JSON.stringify(i)),t.source.postMessage(i,"*")}))}),!1))}}()},function(t,e,n){var r=n(0),o=n(5).f,i=Function.prototype,c=i.toString,u=/^s*function ([^ (]*)/;r&&!("name"in i)&&o(i,"name",{configurable:!0,get:function(){try{return c.call(this).match(u)[1]}catch(t){return""}}})},function(t,e,n){var r=n(0),o=n(6),i=n(10),c=n(11),u=Object.defineProperty;e.f=r?u:function(t,e,n){if(i(t),e=c(e,!0),i(n),o)try{return u(t,e,n)}catch(t){}if("get"in n||"set"in n)throw TypeError("Accessors not supported");return"value"in n&&(t[e]=n.value),t}},function(t,e,n){var r=n(0),o=n(2),i=n(7);t.exports=!r&&!o((function(){return 7!=Object.defineProperty(i("div"),"a",{get:function(){return 7}}).a}))},function(t,e,n){var r=n(8),o=n(1),i=r.document,c=o(i)&&o(i.createElement);t.exports=function(t){return c?i.createElement(t):{}}},function(t,e,n){(function(e){var n=function(t){return t&&t.Math==Math&&t};t.exports=n("object"==typeof globalThis&&globalThis)||n("object"==typeof window&&window)||n("object"==typeof self&&self)||n("object"==typeof e&&e)||Function("return this")()}).call(this,n(9))},function(t,e){var n;n=function(){return this}();try{n=n||new Function("return this")()}catch(t){"object"==typeof window&&(n=window)}t.exports=n},function(t,e,n){var r=n(1);t.exports=function(t){if(!r(t))throw TypeError(String(t)+" is not an object");return t}},function(t,e,n){var r=n(1);t.exports=function(t,e){if(!r(t))return t;var n,o;if(e&&"function"==typeof(n=t.toString)&&!r(o=n.call(t)))return o;if("function"==typeof(n=t.valueOf)&&!r(o=n.call(t)))return o;if(!e&&"function"==typeof(n=t.toString)&&!r(o=n.call(t)))return o;throw TypeError("Can't convert object to primitive value")}}]);
</script>
<script>
window._sp_queue = [];
window._sp_ = {
config: {
accountId: 1732,
propertyHref: 'https://www.visitdenmark.com/',
baseEndpoint: 'https://cdn.privacy-mgmt.com',
ccpa: { },
gdpr: { },
events: {
onMessageReady: function (message_type) {},
onMessageChoiceSelect: function (message_type, choice_id, choice_type_id) {},
onPrivacyManagerAction: function (message_type, pmData) {},
onMessageChoiceError: function (message_type, err) {},
onConsentReady: function (message_type, consentUUID, euconsent) {},
onPMCancel: function (message_type) {},
onMessageReceiveData: function (message_type, data) {},
onSPPMObjectReady: function () {},
onError: function (message_type, errorCode, errorObject, userReset) {}
}
}
}
function show_tcdata(success, tcdata) {
// your custom code here
console.log('update to the tcdata object through message or privacy manager');
console.log('the value of success is ' + success);
console.log("tcdata eventStatus is " + tcdata.eventStatus);
console.log('the value of tcdata is ' + JSON.stringify(tcdata));
}
__tcfapi('addEventListener', 2, function(tcdata, success) {
if(success) {
show_tcdata(success, tcdata);
if (tcdata.eventStatus === 'useractioncomplete') {
// call code when user has made an action
show_tcdata(success, tcdata);
} else if (tcdata.eventStatus === 'tcloaded') {
// remove event listener when consent string has loaded
__tcfapi('removeEventListener', 2, (success) => {
console.log('removed event listener: ' + tcdata.listenerId);
}, tcdata.listenerId);
} else if (tcdata.eventStatus === 'cmpuishown') {
// call code when cmp message is shown
}
}
});
</script>
<script src="https://cdn.privacy-mgmt.com/unified/wrapperMessagingWithoutDetection.js" async=""></script>
<!-- Set the link for privacy manager here -->
<footer>
<p>Edit <a onclick="window._sp_.gdpr.loadPrivacyManagerModal(547186, 'purposes')" href="javascript:void(0);">Privacy Settings</a></p>
</footer>
</html>