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

   Permission: Vendor list - CCPA

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 ccpaApplies field to render your privacy manager link/button to end-users in specific locations. 


ccpaApplies field

The ccpaApplies flag determines whether CCPA regulations are applicable to the end-user visiting your property based on the geographic location of that end-user. ccpaApplies is configured in the vendor list associated for the property. 

From the CCPA 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_3.57.38_PM.png

The value of ccpaApplies will be used in this article to determine whether CCPA 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 ccpaApplies value. See the example below:

<button id="ccpa_link" style="display:none" onclick="window._sp_.ccpa.loadPrivacyManagerModal(null, 123456)">CCPA Privacy Manager</button>

Create function to change element's display style

Finally, the last step is to create a function that will read the value of the ccpaApplies flag and use it to possibly change the display setting of your button or link. In the example below, if ccpaApplies is true then the function will change the element's style from display:none to display:block.

<script type="text/javascript">
    __uspapi('getUSPData',1,function(uspData,success){console.log('uspData: ' + JSON.stringify(uspData)+ 'success: ' + success);
        if(JSON.stringify(uspData).indexOf("---")===-1){
            document.getElementById("ccpa_link").style.display = "block";
        }
    });
</script>

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 () { 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: 12345, baseEndpoint: 'https://cdn.privacy-mgmt.com', ccpa: { }, 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"> __uspapi('getUSPData',1,function(uspData,success){console.log('uspData: ' + JSON.stringify(uspData)+ 'success: ' + success); if(JSON.stringify(uspData).indexOf("---")===-1) { document.getElementById("ccpa_link").style.display = "block"; } }); </script> </head> <body> <p>CCPA Test</p> <button id="ccpa_link" style="display:none" onclick="window._sp_.ccpa.loadPrivacyManagerModal(null, 123456)">CCPA Privacy Manager</button> </body> </html>
Was this article helpful?
0 out of 0 found this helpful