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 "Add a source".

  • Choose "Website" in the Type field.

  • Enter the domain name of your website in the Target URL field

  • Choose your collection purposes in the Stacks field (Stacks are defined from the 12 IAB purposes. If you leave this field empty, all 12 IAB purposes will be displayed).

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".

1) General Settings

  • Select in the Source field, the source previously created

2) Configuration

  • Focus on the "Use banner" switch, it is enabled. This refers to the presence of an introduction page before the detailed collection purposes page. 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". If you want to display the collection details from the start, desactivate the "Use banner" switch.

  • Choose the order of the buttons in the CTAs 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.

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.

<!-- MANDATORY: BEGIN IAB STUB -->
<script type="text/javascript">
"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()}();
</script>
<!-- MANDATORY: END IAB STUB -->
  • Paste this piece of code (called eventListener) into the <head> section of all your pages.

<!-- ADD EVENTILISTNER -->
<script type="text/javascript">
(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)
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"})});
</script>
<!-- END EVENTILISTNER -->
  • Paste this piece of code (called a loader) at the end of the <body> section

<script src="https://cdn.appconsent.io/loader.js" defer async></script>
<script type="text/javascript">
__tcfapi('init', 2, function() {}, {
appKey: 'YOUR APPKEY',
})
__tcfapi('show', 2, function() {}, {
lazy: true,
})
</script>
  • 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 :