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 des partenaires non-IAB (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 “Ajouter une source”.

  • Choisissez “Site web” dans le champ Type.

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

  • Choisissez vos finalités de collecte dans le champ Regroupement de finalités (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 “Ajouter une notice”.

2-1 - Paramètres généraux

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

2-2 - Configuration

Concentrez-vous sur le switch “Utiliser le bandeau”, 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 Mise en page de l'écran vous avez le choix entre 2 formats pour votre page d’introduction. Par défaut, c’est un bandeau en bas de votre site. Vous pouvez également choisir une fenêtre modale au centre de l'écran. Si vous souhaitez afficher dès le départ le détail de la collecte, désactiver le switch “Utiliser le bandeau".

Choisissez l’ordre des boutons dans le champ "Boutons disponibles dans le bandeau" . 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.

2-3 - Traduction du texte

Sélectionnez la ou les langues que vous souhaitez dans le champ Langues à inclure dans le notice. Dans le champ Sélectionner la langue par défaut, 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é "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 :