AppConsent Quick start for a web notice
Find out how to create a consent notice and how to implement it on your website.
In this step-by-step guide, we explain how to create a basic notice using the TCF collection framework, the IAB Transparency & Consent Framework and then how to implement it on your website. 3 main steps: 1- Create a source 2- Create a notice 3- Insert your notice on your site To discover other more advanced settings, for example, how to add your own partners (called extra vendors), we invite you to browse the summary of our documentation.

1 - Create a source

  • From the side menu, click on Sources, then "Create source".
Create source
  • Choose "Website" in the Type field.
  • Enter the domain name of your website in the Target URL field
  • Choose your IAB vendors in the dedicated field
Tip: Thanks to your vendors selection, we make their IAB purposes appear in the dedicated field below. You still can edit this purposes & features list at your convenience.
  • In Purposes and Features field, you can modify the automatic selection according to your needs. If you can delete some purposes, note that by doing so you will automatically delete the associated vendors, as long as the vendors were only present for that goal. You cannot add a purpose if you did not select the associated vendors above. You can also transform some purposes into a group named "Stack" if you need. If you know which stacks can match your data collection, we recommend you to select one or several stacks, your consent notice will be shorter.
Save the source
Tip: Leave the other fields, for now, you can come back to them later.

2 - Create a notice

  • From the side menu, click on Notices, then "Add notice".
Add notice

2- 1 - General Settings

  • Select in the Source field, the source previously created

2- 2 - Configuration

In the Display Layout field, you have the choice between 2 layouts for your introduction page. By default, it is a banner at the bottom of your site. If you prefer a central window, select "Middle modal display".
Configuration
  • Choose the order of the buttons in the Buttons available in banner field. This is for the introduction page.
Compliance point (CNIL): since April 1st 2021, the French CNIL requires the presence of a button to "refuse" the data collection.
Configuration

2- 3 Text translation

  • Select the language(s) you want in the Languages to be included in the notice field. In the Select the default language field, set a default language in case it is not possible to determine the language of a user.
Tip: By clicking in the last field, you have the possibility to see the texts of the record. For the moment, we advise you to leave the default texts, and to come back to them later when you will have visualized your notice. In the next version of AppConsent, we will improve the way to modify the texts.
That's it, your website's manual is created in AppConsent. Now it's time to integrate some pieces of code on your website. After that, your notice will be displayed on your website and the consent collection can start.

3 - Integrate your notice on your site

  • Open the HTML source code of your website.
  • Paste this piece of code (called IAB stub) into the <head> section of all your pages.
1
<!-- MANDATORY: BEGIN IAB STUB -->
2
<script type="text/javascript">
3
"use strict";!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 s=a.createElement("iframe");s.style.cssText="display:none",s.name=t,a.body.appendChild(s)}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 s={gdprApplies:e,cmpLoaded:!1,cmpStatus:"stub"};"function"==typeof n[2]&&n[2](s)}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 s={__tcfapiReturn:{returnValue:a,success:r,callId:n.callId}};t&&(s=JSON.stringify(s)),e&&e.source&&e.source.postMessage&&e.source.postMessage(s,"*")}),n.parameter)}),!1))};"undefined"!=typeof module?module.exports=e:e()}();
4
</script>
5
<!-- MANDATORY: END IAB STUB -->
Copied!
  • Paste this piece of code (called eventListener) into the <head> section of all your pages.
1
<!-- ADD EVENTILISTNER -->
2
<script type="text/javascript">
3
(adsbygoogle=window.adsbygoogle||[]).pauseAdRequests=1,window.dataLayer=window.dataLayer||[],__tcfapi("addEventListener",2,function(e,n){if(n&&e.gdprApplies&&("tcloaded"===e.eventStatus||"useractioncomplete"===e.eventStatus)){if((adsbygoogle=window.adsbygoogle||[]).pauseAdRequests=0,e.purpose.consents)
4
for(var s in window.dataLayer.push({AppConsent_IAB_PURPOSES:e.purpose.consents}),e.purpose.consents)e.purpose.consents[s]&&window.dataLayer.push({event:"appconsent_ctrl_"+s});var o,a;e.acExtraPurposes&&(o={},e.acExtraPurposes.forEach(function(e){o[e]=!0}),window.dataLayer.push({AppConsent_EXTRA_PURPOSES:o})),e.acExtraVendors&&(a={},e.acExtraVendors.forEach(function(e){a[e]=!0}),window.dataLayer.push({AppConsent_EXTRA_VENDORS:a})),e.purpose.consents&&e.vendor.consents&&("object"==typeof sfbxguardian&&e.purpose.consents[1]&&window.sfbxguardian.unblock(),"function"==typeof gtag&&(e.purpose.consents[1]&&e.vendor.consents[755]?gtag("consent","update",{analytics_storage:e.purpose.consents[7]||e.purpose.consents[9]?"granted":"denied",ad_storage:e.purpose.consents[3]?"granted":"denied "}):gtag("consent","update",{analytics_storage:"denied",ad_storage:"denied"})))}window.dataLayer.push({event:"appconsent_loaded"})});
5
</script>
6
<!-- END EVENTILISTNER -->
Copied!
  • Paste this piece of code (called a loader) at the end of the <body> section
1
<script src="https://cdn.appconsent.io/loader.js" defer async></script>
2
<script type="text/javascript">
3
__tcfapi('init', 2, function() {}, {
4
appKey: 'YOUR APPKEY',
5
})
6
__tcfapi('show', 2, function() {}, {
7
lazy: true,
8
})
9
</script>
Copied!
  • In AppConsent, from Notices, click on the line of the notice you want to integrate, the AppKey (a sequence of numbers and letters) will be displayed, copy the Appkey. Paste this AppKey in your source code at the place indicated in the piece of code loader that you have just inserted.
It's finished, your notice is now displayed and functional on your website.
To go further :
Last modified 20d ago