Démarrer rapidement avec AppConsent

Découvrez comment créer une notice de consentement et comment l’implémenter sur votre site internet.

Dans ce pas à pas, nous vous expliquons comment réaliser une notice basique en utilisant le cadre de collecte du TCF, le Transparency & Consent Framework de l’IAB, puis comment l’implémenter sur votre site internet.

3 étapes clefs : 1- Créer une source 2- Créer une notice 3- Insérer votre notice sur votre site Pour découvrir d’autres paramétrages plus avancés, par exemple, la façon d’ajouter vos propres partenaires (appelés extra vendors) nous vous invitons à parcourir le sommaire de notre documentation.

1 - Créer une source

  • Dans AppConsent, depuis le menu latéral, cliquez sur Sources, puis “Add a source”.

  • Choisissez “Website” dans le champ Type.

  • Renseignez le nom de domaine de votre site internet dans le champ Target URL

  • Choisissez vos finalités de collecte dans le champ Stacks (Les stacks sont des piles définies à partir des 12 finalités de l’IAB. Si vous laissez ce champ vide, les 12 finalités de l’IAB seront affichées.)

Conseil : laissez les autres champs pour le moment, vous pourrez y revenir plus tard.

2- Créer une notice

  • Depuis le menu latéral, cliquez sur Notices, puis “Add notice”.

1) General settings

  • Sélectionnez dans le champs Source, la source précédemment créée.

2) Configuration

  • Concentrez-vous sur le switch “Use banner”, il est activé. Cela concerne la présence d’une page d’introduction avant la page détaillée des finalités de collecte. Dans le champ Display Layout, vous avez le choix entre 2 formats pour votre page d’introduction. Par défaut, c’est un bandeau en bas de votre site. Si vous préférez une fenêtre centrale, sélectionnez “Middle modale display”. Si vous souhaitez afficher dès le départ le détail de la collecte, désactiver le switch “Use banner”

Bottom full width banner
Middle modale display
  • Choisissez l’ordre des boutons dans le champ CTAs available in Banner. Cela concerne la page d’introduction.

Point Conformité (CNIL) : depuis le 1er avril 2021, la CNIL Française exige la présence d’un bouton pour “refuser” le recueil.

3) Text translation

  • Sélectionnez la ou les langues que vous souhaitez dans le champ Languages to be included in the notice. Dans le champ Select the default language, définissez une langue par défaut au cas où il n’est pas possible de déterminer la langue d’un utilisateur.

Conseil : en cliquant dans le dernier champ, vous avez la possibilité de voir les textes de la notice. Pour le moment, nous vous conseillons de laisser les textes par défaut, et d'y revenir plus tard quand vous aurez visualisé votre notice. Dans une prochaine version d’AppConsent, nous allons améliorer la façon de modifier les textes.

C’est terminé la notice pour votre site est créée dans AppConsent. Il est temps d’intégrer quelques morceaux de code sur votre site internet. Après cela, votre notice sera affichée sur votre site et le recueil des consentements pourra commencer.

3 - Intégrer votre notice sur votre site

  • Ouvrez le code source HTML de votre site internet.

  • Collez ce morceau de code (appelé IAB stub) dans la section <head> de toutes vos 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 -->
  • Collez ce morceau de code (appelé eventListener) dans la section <head> de toutes vos 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 -->
  • Collez ce morceau de code (appelé loader) à la fin de la section <body>.

<script src="https://cdn.appconsent.io/loader.js" defer async></script>
<script type="text/javascript">
__tcfapi('init', 2, function() {}, {
appKey: 'PUT YOUR APPKEY',
})
__tcfapi('show', 2, function() {}, {
lazy: true,
})
</script>
  • Dans AppConsent, depuis Notices, cliquez sur la ligne de la notice que vous souhaitez intégrer. L’AppKey (une suite de chiffres et de lettres) va s’afficher, copiez l’Appkey. Collez cet AppKey dans votre code source à l’endroit indiqué "PUT YOUR APPKEY" dans le morceau de code loader que vous venez d’insérer.

C’est terminé, votre notice est à présent affichée et fonctionnelle sur votre site internet.

Pour aller plus loin :