Display privacy manager link based on end-user location (GDPR TCF)

  Admin access or Domain access to property (property group) with feature access to vendor list management

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. 

Please find a complete example of the steps outlined in this article below:

Complete example
//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', gdpr: { consentLanguage: "en" }, propertyHref: 'https://gdprapplies.com', events: { onMessageReady: function (message_type) { console.log('onMessageReady', message_type) }, onMessageChoiceSelect: function (message_type, choice_id, choice_type_id) { console.log('onMessageChoiceSelect message_type: ', message_type); console.log('onMessageChoiceSelect choice_id: ', choice_id); console.log('onMessageChoiceSelect choice_type_id: ', choice_type_id); }, onPrivacyManagerAction: function (message_type, pmData) { console.log('onPrivacyManagerAction message_type:', message_type); console.log('onPrivacyManagerAction', pmData) }, onMessageChoiceError: function (message_type, err) { console.log('onMessageChoiceError', message_type); console.log('onMessageChoiceError', err) }, onConsentReady: function (message_type, consentUUID, euconsent) { console.log('onConsentReady', message_type); console.log('consentUUID', consentUUID) console.log('euconsent', euconsent) }, onPMCancel: function (message_type) { console.log('onPMCancel', message_type) }, onMessageReceiveData: function (message_type, data) { console.log('onMessageReceiveData', message_type); console.log('onMessageReceiveData', data) console.log(JSON.stringify(data)); }, onSPPMObjectReady: function () { console.log('onSPPMObjectReady') }, onError: function (message_type, errorCode, errorObject, userReset){ console.log('errorCode: ', message_type); console.log('errorCode: ' + errorCode); console.log(errorObject); console.log('userReset: ' + userReset); }, } } } </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>

gdprApplies field of the tcData object

gdprApplies 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).

Screen_Shot_2021-11-05_at_4.20.34_PM.png

While on your property, use the developer console of your browser to check the gdprApplies status for the vendor list by using the getTCData command.

Screen_Shot_2021-09-08_at_2.21.25_PM.png

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);        
        }
    }
});
Was this article helpful?
0 out of 0 found this helpful