Permission: Vendor list - GDPR
Sourcepoint provides a JavaScript code that can be implemented on your property that allows end-users to directly manage their consent preferences on an ongoing basis without having to re-encounter your organization's first layer message. This code is implemented on-page as a link or button.
Your organization may want to only show this link or button on your property if the end-user is based in a particular location that you have defined. In this article, we will cover how to leverage the gdprApplies field to render your privacy manager link/button to end-users in specific locations.
- gdprApplies field of
tcDataobject - Add privacy manager link/button to property
- Create function to change element's display style
- Create call to
__tcfapi('addEventListener')to capture gdprApplies value - Complete example
gdprApplies field of the tcData object
The gdprApplies field of the tcData object determines whether GDPR regulations are applicable to the end-user visiting your property based on the geographic location of that end-user. gdprApplies is configured in the vendor list associated for the property.
From the GDPR TCF vendor list of the property, navigate to the Applies Scope field and configure the locations that should be included (or excluded).
While on your property, use the developer console of your browser to check the gdprApplies status for the vendor list by accessing the tcData object via the addEventListener command.
The value of gdprApplies will be used in this article to determine whether GDPR applies to the end-user and conditionally display the button/link to the them.
Add privacy manager link/button to property
Use the directions found in this article to add your privacy manager's JavaScript code onto the property.
It is important that you set the element's display to none so that the button/link is not visible to the end-user. The display will dynamically change with functions we will create later in the article based on the gdprApplies value. See the example below:
<button id="gdpr_link" style="display: none;" onclick="window._sp_.loadPrivacyManagerModal(123456)">Manage Settings</button>
Create function to change element's display style
With your privacy manager link/button implemented on your property, we need to create a function that changes the element's style from display:none to a visible style (e.g. display:block or display:inline-block).
We will pass a boolean value to the function. Please see the example below:
function showPrivacyManager(sp_gdpr){
if(sp_gdpr){
document.getElementById("gdpr_link").style.display="inline-block";
}
}
Create call to __tcfapi('addEventListener') to capture gdprApplies value
Finally, the last step is to create a __tcfapi('addEventListener') function to capture whether or not the site visitor is located in a region where GDPR applies by checking the gdprApplies value of the tcData object. This property is then passed to the display function defined above.
window.__tcfapi('addEventListener', 2, function (tcData, success) {
console.log("tcData.gdprApplies: " + tcData.gdprApplies);
if (success) {
if (tcData.eventStatus === 'tcloaded'||tcData.eventStatus === 'cmpuishown') {
console.log(tcData.publisherCC);
showPrivacyManager(tcData.gdprApplies) // triggers 2x
window.__tcfapi('removeEventListener', 2, function (success) {
if(success) {
console.log('removed: '+tcData.listenerId);
}
}, tcData.listenerId);
}
}
});
Complete example
Please find a complete example of the steps outlined in this section:
//Example only. Please use implementation code snippet generated in Sourcepoint portal as stub file may have changed.
<html>
<head>
<script>
function _typeof(t){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}!function(){var t=function(){var t,e,o=[],n=window,r=n;for(;r;){try{if(r.frames.__tcfapiLocator){t=r;break}}catch(t){}if(r===n.top)break;r=n.parent}t||(!function t(){var e=n.document,o=!!n.frames.__tcfapiLocator;if(!o)if(e.body){var r=e.createElement("iframe");r.style.cssText="display:none",r.name="__tcfapiLocator",e.body.appendChild(r)}else setTimeout(t,5);return!o}(),n.__tcfapi=function(){for(var t=arguments.length,n=new Array(t),r=0;r<t;r++)n[r]=arguments[r];if(!n.length)return o;"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)):"ping"===n[0]?"function"==typeof n[2]&&n[2]({gdprApplies:e,cmpLoaded:!1,cmpStatus:"stub"}):o.push(n)},n.addEventListener("message",(function(t){var e="string"==typeof t.data,o={};if(e)try{o=JSON.parse(t.data)}catch(t){}else o=t.data;var n="object"===_typeof(o)?o.__tcfapiCall:null;n&&window.__tcfapi(n.command,n.version,(function(o,r){var a={__tcfapiReturn:{returnValue:o,success:r,callId:n.callId}};t&&t.source&&t.source.postMessage&&t.source.postMessage(e?JSON.stringify(a):a,"*")}),n.parameter)}),!1))};"undefined"!=typeof module?module.exports=t:t()}();
</script>
<script>
window._sp_queue = [];
window._sp_ = {
config: {
accountId: 22,
baseEndpoint: 'https://cdn.privacy-mgmt.com',
consentLanguage: "en",
gdpr: {},
propertyHref: 'https://gdprapplies.com',
events: {
onMessageReady: function () {
console.log('[event] onMessageReady', arguments);
},
onMessageChoiceSelect: function () {
console.log('[event] onMessageChoiceSelect', arguments);
},
onPrivacyManagerAction: function () {
console.log('[event] onPrivacyManagerAction', arguments);
},
onMessageChoiceError: function () {
console.log('[event] onMessageChoiceError', arguments);
},
onConsentReady: function () {
console.log('[event] onConsentReady', arguments);
},
onPMCancel: function () {
console.log('[event] onPMCancel', arguments);
},
onMessageReceiveData: function () {
console.log('[event] onMessageReceiveData', arguments);
},
onSPPMObjectReady: function () {
console.log('onSPPMObjectReady')
},
onError: function () {
console.log('[event] onError', arguments);
}
}
}
}
</script>
<script src="https://cdn.privacy-mgmt.com/unified/wrapperMessagingWithoutDetection.js" async></script>
<script type="text/javascript">
function showPrivacyManager(sp_gdpr) {
if(sp_gdpr) {
document.getElementById("gdpr_link").style.display="inline-block";
}
}
window.__tcfapi('addEventListener', 2, function (tcData, success) {
console.log("tcData.gdprApplies: " + tcData.gdprApplies);
if (success) {
if (tcData.eventStatus === 'tcloaded'||tcData.eventStatus === 'cmpuishown') {
console.log(tcData.publisherCC);
showPrivacyManager(tcData.gdprApplies) // triggers 2x
window.__tcfapi('removeEventListener', 2, function (success) {
if(success) {
console.log('removed: '+tcData.listenerId); // triggers 1x
}
}, tcData.listenerId);
}
}
});
</script>
</head>
<body>
<button id="gdpr_link" style="display:none" onclick="window._sp_.gdpr.loadPrivacyManagerModal(234567)">GDPR Privacy Manager</button>
</body>
</html>
Comments
0 comments