Skip to main content

AppConsent Quick start for a web notice

Find out how to create a consent notice and how to implement it on your website.


note

In this step-by-step guide, we explain how to create a basic notice using the IAB Transparency & Consent Framework (TCF) 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 website URL field

  • Choose your IAB vendors in the dedicated field

    IAB vendors

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.

Purposes and Features

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

​Source field

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.

​Display layout field

​Web notice Classic template banner​

 Web notice Classic template modal window

Choose the order of the buttons in the Buttons available in banner field. This is for the introduction page.

info

Compliance point (CNIL): since April 1st 2021, the French CNIL requires the presence of a button to refuse the data collection.

Buttons avalaible in Banner​

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.

​Text translation

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 EVENTLISTENER -->
<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 EVENTLISTENER -->
  • 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, console.log, {
appKey: 'YOUR_APP_KEY'
// targetCountries: ['FR', 'UK', 'US'],
// forceGDPRApplies: true,
})
</script>

<script type="text/javascript">
__tcfapi('show', 2, console.log, {
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.

Notice AppKey

It's finished, your notice is now displayed and functional on your website.

To go further