Permission: Vendor list-GDPR and/or Vendor list-U.S. Privacy
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.
For organizations who have implemented both GDPR TCF and U.S. Privacy campaigns on their property, you will only want your end-user to interact with the correct privacy manager based upon the region to which the end-user belongs (e.g. an end-user who is currently in the E.U. and provided consent for GDPR TCF should only be able to manage their consent for GDPR TCF on an ongoing basis while in the E.U.).
In this article, we will cover how to conditionally render either a GDPR TCF or U.S. Privacy privacy manager link/button on your property based upon the end-user's region.
- Configure Applies Scope field for GDPR TCF and U.S. Privacy vendor list
- Add privacy manager buttons/links to property
- Add function to change privacy manager button/link visibility
- Create call to
__tcfapi('addEventListener')to capture gdprApplies value - Example
Configure Applies Scope field for GDPR TCF and U.S. Privacy vendor list
By implementing both a GDPR TCF and U.S. Privacy campaign on a single property, you are associating that property with a GDPR TCF and U.S. Privacy vendor list, respectively.
For each of these vendor lists, configure the Applies Scope field. This field determines whether the specific regulatory regime (GDPR TCF or U.S. Privacy) is applicable to the end-user visiting your property based on the geographic location of that end-user.
Note: Using the Applies Scope field configured for each respective vendor list, Sourcepoint will store whether an end-user falls under each regulatory regime as a boolean value in the gdprApplies and ccpaApplies flags. We will use this boolean value to conditionally show a button/link to the correct privacy manager.
Add privacy manager buttons/links to property
Use the following examples to attach the GDPR TCF and U.S. Privacy privacy manager JavaScript code to an event handler on your property . Most organizations who implement the JavaScript code on their page will attach the function to the onclick event of a page element. Click here for more detailed instructions on how to add these buttons/links.
In the provided examples, the buttons are each wrapped in a div tag. The visibility of either div tag is set according to the end-user's region and dynamically set with functions created later in this article.
//GDPR TCF link
<div id="eu-consent-ui">
<p>EU - <a onclick="window._sp_.gdpr.loadPrivacyManagerModal('600545')" href="javascript:void(0);" class="w3-hover-text-green">Edit privacy settings</a></p>
</div>//GDPR TCF button
<div id="eu-consent-ui">
<button id="gdpr_link" onclick="window._sp_.gdpr.loadPrivacyManagerModal('600545')">Edit privacy setting</button>
</div>//U.S. Privacy link
<div id="us-consent-ui">
<p>US - <a onclick="window._sp_.ccpa.loadPrivacyManagerModal('638450')" href="javascript:void(0);" class="w3-hover-text-green">Do not sell my information</a></p>
</div>//U.S. Privacy button
<div id="us-consent-ui">
<button id="ccpa_link" onclick="window._sp_.ccpa.loadPrivacyManagerModal('638450')">Do not sell my information</button>
</div>Add function to change privacy manager button/link visibility
Once the GDPR TCF and U.S. Privacy buttons/links are implemented on your property, you will to create a function that sets the correct button/link to visible depending on the end-user's region.
The function outlined in this section utilizes the boolean value for gdprApplies and ccpaApplies. If the gdprApplies flag is true then the GDPR div tag visibility to set to true. If the gdprApplies flag is false, the end-user is not in a GDPR region.
A second test is made to check if the end-user is in a U.S. Privacy region and if the ccpaApplies flag is true then the div tag for the U.S. Privacy privacy manager is set to visible.
function showPrivacyManager(sp_gdpr) {
console.log("tcData.gdprApplies: " + sp_gdpr);
if(sp_gdpr) {
document.getElementById("eu-consent-ui").style.visibility="visible";
document.getElementById("us-consent-ui").style.visibility="hidden";
} else {
__uspapi('getUSPData',1,function(uspData,success) {
if(JSON.stringify(uspData).indexOf("---")===-1) {
document.getElementById("eu-consent-ui").style.visibility="hidden";
document.getElementById("us-consent-ui").style.visibility="visible";
}
})
}
}Create call to __tcfapi('addEventListener') to capture gdprApplies value
The last step is to create a __tcfapi('addEventListener') function to capture if an end-user is located in a region where GDPR applies by reading the gdprApplies value of the tcData object. This property is then passed to the display function defined in the section above.
Note: Documentation about TCF API event listeners can be found here.
The event listener is automatically called prior to the first layer message being shown or existing consent data being loaded:
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);
}
}
});
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>
<title>Visit Denmark</title>
<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(){for(var t,e,o=[],n=window,r=n;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))}();</script>
<script>(function () { var e = false; var c = window; var t = document; function r() { if (!c.frames["__uspapiLocator"]) { if (t.body) { var a = t.body; var e = t.createElement("iframe"); e.style.cssText = "display:none"; e.name = "__uspapiLocator"; a.appendChild(e) } else { setTimeout(r, 5) } } } r(); function p() { var a = arguments; __uspapi.a = __uspapi.a || []; if (!a.length) { return __uspapi.a } else if (a[0] === "ping") { a[2]({ gdprAppliesGlobally: e, cmpLoaded: false }, true) } else { __uspapi.a.push([].slice.apply(a)) } } function l(t) { var r = typeof t.data === "string"; try { var a = r ? JSON.parse(t.data) : t.data; if (a.__cmpCall) { var n = a.__cmpCall; c.__uspapi(n.command, n.parameter, function (a, e) { var c = { __cmpReturn: { returnValue: a, success: e, callId: n.callId } }; t.source.postMessage(r ? JSON.stringify(c) : c, "*") }) } } catch (a) { } } if (typeof __uspapi !== "function") { c.__uspapi = p; __uspapi.msgHandler = l; c.addEventListener("message", l, false) } })();</script>
<script>
window._sp_queue = [];
window._sp_ = {
config: {
accountId: 1732,
baseEndpoint: 'https://cdn.privacy-mgmt.com',
ccpa: {},
gdpr: {
includeTcfApi: true
},
joinHref: true,
events: {
onMessageChoiceSelect: function() {
console.log('[event] onMessageChoiceSelect', arguments);
},
onMessageReady: function() {
console.log('[event] onMessageReady', arguments);
},
onMessageChoiceError: function() {
console.log('[event] onMessageChoiceError', arguments);
},
onPrivacyManagerAction: function() {
console.log('[event] onPrivacyManagerAction', arguments);
},
onPMCancel: function() {
console.log('[event] onPMCancel', arguments);
},
onMessageReceiveData: function() {
console.log('[event] onMessageReceiveData', arguments);
},
onSPPMObjectReady: function() {
console.log('[event] onSPPMObjectReady', arguments);
},
onConsentReady: function () {
console.log('[event] onConsentReady', arguments);
},
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) {
console.log("tcData.gdprApplies: " + sp_gdpr);
if(sp_gdpr){
document.getElementById("eu-consent-ui").style.visibility="visible";
document.getElementById("us-consent-ui").style.visibility="hidden";
} else {
__uspapi('getUSPData',1,function(uspData,success) {
if(JSON.stringify(uspData).indexOf("---")===-1){
document.getElementById("eu-consent-ui").style.visibility="hidden";
document.getElementById("us-consent-ui").style.visibility="visible";
}
})
}
}
window.__tcfapi('addEventListener', 2, function (tcData, success) {
console.log('add event listener: '+tcData.listenerId);
if (success) {
if (tcData.eventStatus === 'tcloaded'||tcData.eventStatus === 'cmpuishown') {
showPrivacyManager(tcData.gdprApplies)
window.__tcfapi('removeEventListener', 2, function (success) {
if(success) {
console.log('removed event listener: '+tcData.listenerId);
}
}, tcData.listenerId);
}
}
});
</script>
</head>
<body>
<div id="us-consent-ui">
<p>US - <a onclick="window._sp_.ccpa.loadPrivacyManagerModal('638450')" href="javascript:void(0);" class="w3-hover-text-green">Do not sell my information</a></p>
</div>
<div id="eu-consent-ui">
<p>EU - <a onclick="window._sp_.gdpr.loadPrivacyManagerModal('600545')" href="javascript:void(0);" class="w3-hover-text-green">Edit privacy settings</a></p>
</div>
</body>
</html>