Web CMP

Implement a Notice on a website using Javascript, as described below.
If you want to deploy your Notice with the Google Tag Manager, have a look at this other page.
Getting the code of your notice
In the left menu, click on "Notices".
Find the line of the notice you want to implement.
A window appears with the resource URL and HTML script tag.
Resource URL: It's the link to the built notice stored into our CDN. 
HTML script Tag: This is the snippet you have to copy-paste into your website or GTM container in order to get a functional CMP.
If it's a new notice, it's should be displayed at the first line. If you can't see the resource URL and the HTML script tag, just refresh your page and it will be ok.
​
tl;dr;
As an example, we will use the following notice :https://cdn.appconsent.io/1/10/v5eCA1JV4/notice.js
Just replace it with the one you got from the administration interface. You learn how to get one at the following page.
A Notice integration looks like this. The HTML below is functional and you can copy/past into any service like playcode.io or jsfiddle.net  in order to do a quick check/test.
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Your Website</title>
  
  <!-- MANDATORY: Add the following snippet to handle asynchronous call -->  
  <script type="text/javascript">
    var gdprAppliesGlobally=!1;function addFrame(){if(!window.frames.__cmpLocator)if(document.body){var a=document.body,e=document.createElement("iframe");e.style="display:none",e.name="__cmpLocator",a.appendChild(e)}else setTimeout(addFrame,5)}function stubCMP(a,e,n){if(__cmp.a=__cmp.a||[],!a)return __cmp.a;"ping"===a?n({gdprAppliesGlobally:gdprAppliesGlobally,cmpLoaded:!1},!0):__cmp.a.push([a,e,n])}function cmpMsgHandler(d){var p="string"==typeof d.data,a=p?-1!==d.data.indexOf("__cmpCall")?JSON.parse(d.data):{}:d.data;if(a.__cmpCall){var c=a.__cmpCall;window.__cmp(c.command,c.parameter,function(a,e){var n={__cmpReturn:{returnValue:a,success:e,callId:c.callId}};d.source.postMessage(p?JSON.stringify(n):n,"*")})}}addFrame(),"function"!=typeof __cmp&&(window.__cmp=stubCMP,__cmp.msgHandler=cmpMsgHandler,window.addEventListener?window.addEventListener("message",cmpMsgHandler,!1):window.attachEvent("onmessage",cmpMsgHandler));
  </script>
  
  <!-- MANDATORY: notice.js script obtained through the administration interface -->  
  <script defer src="https://cdn.appconsent.io/1/10/v5eCA1JV4/notice.js"></script>
</head>
<body>
  <!-- ... -->
   
  <!-- MANDATORY: Trigger the Notice UI --> 
  <script type="text/javascript">
    __cmp('ac_showConsentToolIfNeeded', {}, function(){})
  </script>
</body>
</html>
Parts
An integration yields the following parts:
IAB default stub, to be installed directly on the page (directly copied from the official standard stub, along with production fix as referenced by this github issue and this one).
<script type="text/javascript">
    var gdprAppliesGlobally=!1;function addFrame(){if(!window.frames.__cmpLocator)if(document.body){var a=document.body,e=document.createElement("iframe");e.style="display:none",e.name="__cmpLocator",a.appendChild(e)}else setTimeout(addFrame,5)}function stubCMP(a,e,n){if(__cmp.a=__cmp.a||[],!a)return __cmp.a;"ping"===a?n({gdprAppliesGlobally:gdprAppliesGlobally,cmpLoaded:!1},!0):__cmp.a.push([a,e,n])}function cmpMsgHandler(d){var p="string"==typeof d.data,a=p?-1!==d.data.indexOf("__cmpCall")?JSON.parse(d.data):{}:d.data;if(a.__cmpCall){var c=a.__cmpCall;window.__cmp(c.command,c.parameter,function(a,e){var n={__cmpReturn:{returnValue:a,success:e,callId:c.callId}};d.source.postMessage(p?JSON.stringify(n):n,"*")})}}addFrame(),"function"!=typeof __cmp&&(window.__cmp=stubCMP,__cmp.msgHandler=cmpMsgHandler,window.addEventListener?window.addEventListener("message",cmpMsgHandler,!1):window.attachEvent("onmessage",cmpMsgHandler));
</script>
notice.js, provided through the administration interface, which injects the following globals in the page's scope: appConsent, acLib, __cmp, __cmpQ
bootstrap code, which make use of the CMP's call to display the UX:
<script type="text/javascript">
    __cmp('ac_showConsentToolIfNeeded', {}, function(){})
</script>
__cmp calls
The Notice exposes a global function __cmp that you can use to query it. The following standard IAB calls are supported:
​ping​
​getConsentData​
​getVendorConsents​
Specific non-IAB calls are also implemented:
ac_showConsentToolIfNeeded
Displays the Notice UI only if consent has not been collected yet.
__cmp('ac_showConsentToolIfNeeded', {}, function(status, isConsentGiven) {
    console.log('isConsentGiven ?', isConsentGiven);
});
ac_showConsentTool
Will display the Notice UI even if a consent has been already collected. It is useful for updating consent.
__cmp('ac_showConsentTool', {}, function(status, isConsentGiven) {
  console.log('isConsentGiven ?', isConsentGiven);
});
ac_acceptAll
You can use the following implementation to trigger all consent to true (generally linked to a CTA labeled: "accept all"). The function call don't trigger the UI.
This method will invoke a specific method that are going to process all triger to "true", forge the IAB consentString, fill the dataLayer TMS in a single one instruction. 
Your privacy representative ( CPO,DPO, Legal advisor)  have to be confortable with that. To be valid, a consent have to be unambiguous, in plain text and so on. We highly recommend you to connect the appConsent.acceptAll() method to an event that match the GDPR requirements.
__cmp('ac_acceptAll', {}, function() {});
For Safari and IE, do not forget to set the 1rst Party Listener, in order to stabilize the 3rd Party Cookie. 
Display the CMP using a url link
You can display the CMP using an url.
Just add the query string ac_cmd=showConsentTool at the end of the url.
For example https://www.sfbx.io?ac_cmd=showConsentTool​
Force langage according to the language selected by the user
The AppConsent CMP is configured to display the notice according to the browser's language, but sometimes one could want to override this behavior.
For example, if a website has multiple languages and you want to have the AppConsent CMP in the same language as the current page.
In thise case, you can use the `forceLocale` cmp call parameter to force the language, like this:
__cmp('ac_showConsentToolIfNeeded', {forceLocale: 'it'}, function(){})
Reading status for extra-purpose
To read the status of extra-purposes (for exemple geoloc purposes), you can use acLib.datas.purposes It will return the status of extra-purpose.
CONFIGURATION - Previous
Managing extra purposes and geolocation purposes
Google GTM
Last updated 3 months ago