You may want to display the link to the Sourcepoint Privacy Manager based on the location of the site visitor. In this case you can use the __tcfapi('addEventListener') function to determine whether GDPR applies to the user and conditionally display the link to the user.
The first step in the process is to create a link to the privacy manager using an element's onclick event and setting that element's display to none. This will mean that the link will not be available to the user initially. See the example element below.
<button id="gdpr_link" style="display:none" onclick="window._sp_.loadPrivacyManagerModal(135789)">Manage Settings</button>​
The next step is to create a function to change the elements style from display:none
to a visible style such as display:block
or display:inline-block
. We will pass a true or false (boolean) value to the function. Below is an example of a function that will accomplish this.
function showPrivacyManager(sp_gdpr){if(sp_gdpr){document.getElementById("gdpr_link").style.display="inline-block";}}​
The last step is create a __tcfapi('addEventListener')
function to capture whether or not the site visitor is located in a region where GDPR applies by check the gdprApplies property of the tcData object. This property is then passed to the 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 2xwindow.__tcfapi('removeEventListener', 2, function (success) {if(success) {console.log('removed: '+tcData.listenerId);}}, tcData.listenerId);}}});
Below is a working example HTML page that encompasses all of the pieces defined above. To use this example with your own account, you would change the accountId
parameter and either remove or change the propertyHref
parameter.
<!DOCTYPE html><html><head><title></title></head><body>​<script type="text/javascript">// GDPR Stub Function!function () { var e = function () { var e, t = "__tcfapiLocator", a = [], n = window; for (; n;) { try { if (n.frames[t]) { e = n; break } } catch (e) { } if (n === window.top) break; n = n.parent } e || (!function e() { var a = n.document, r = !!n.frames[t]; if (!r) if (a.body) { var i = a.createElement("iframe"); i.style.cssText = "display:none", i.name = t, a.body.appendChild(i) } else setTimeout(e, 5); return !r }(), n.__tcfapi = function () { for (var e, t = arguments.length, n = new Array(t), r = 0; r < t; r++)n[r] = arguments[r]; if (!n.length) return a; if ("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)); else if ("ping" === n[0]) { var i = { gdprApplies: e, cmpLoaded: !1, cmpStatus: "stub" }; "function" == typeof n[2] && n[2](i) } else a.push(n) }, n.addEventListener("message", (function (e) { var t = "string" == typeof e.data, a = {}; try { a = t ? JSON.parse(e.data) : e.data } catch (e) { } var n = a.__tcfapiCall; n && window.__tcfapi(n.command, n.version, (function (a, r) { var i = { __tcfapiReturn: { returnValue: a, success: r, callId: n.callId } }; t && (i = JSON.stringify(i)), e.source.postMessage(i, "*") }), n.parameter) }), !1)) }; "undefined" != typeof module ? module.exports = e : e() }();</script><script>window._sp_ = {config: {accountId: 1319,baseEndpoint: 'https://cdn.privacy-mgmt.com',propertyHref: 'https://www.property3.com'}}</script><script src="https://cdn.privacy-mgmt.com/wrapperMessagingWithoutDetection.js"></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 2xwindow.__tcfapi('removeEventListener', 2, function (success) {if(success) {console.log('removed: '+tcData.listenerId); // triggers 1x}}, tcData.listenerId);}}});</script>​<button id="gdpr_link" style="display:none" onclick="window._sp_.loadPrivacyManagerModal(135789)">Manage Settings</button>​</body></html>
​