AppConsent CMP
Rechercher…
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 le menu latéral, cliquez sur Sources, puis sur "Créer une source".
  • Choisissez "Site web" dans le champ Type
  • Entrez le nom de domaine de votre site dans le champ URL du site web
  • Choisissez vos partenaires IAB dans le champ dédié
Conseil : grâce à la sélection de vos partenaires, nous faisons apparaître leurs finalités IAB dans le champ dédié ci-dessous. Vous pouvez toujours modifier cette liste de finalités et de fonctionnalités à votre convenance.
  • Dans le champ Finalités et fonctionnalités, vous pouvez modifier la sélection automatique en fonction de vos besoins.
Vous pouvez supprimer certaines finalités. Notez qu'en le faisant, il est possible que cela supprime automatiquement les partenaires associés, si ces derniers ne sont présents que sous cette finalité. Vous ne pouvez pas ajouter une finalité IAB si vous n'avez pas sélectionné les partenaires IAB associés précédemment. Vous pouvez également transformer certaines finalités en un groupe nommé "Stack" si vous en avez besoin. Si vous savez quels stacks peuvent correspondre à votre collecte de données, nous vous recommandons d'en sélectionner un ou plusieurs, votre notice de consentement sera plus concise.
Enregistrer la source
Conseil : Laissez les autres champs, pour l'instant, 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.
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!
  • Collez ce morceau de code (appelé eventListener) dans la section <head> de toutes vos 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!
  • Collez ce morceau de code (appelé loader) à la fin de la section <body>.
1
<script src="https://cdn.appconsent.io/loader.js" defer async></script>
2
<script type="text/javascript">
3
__tcfapi('init', 2, function() {}, {
4
appKey: 'PUT YOUR APPKEY',
5
})
6
__tcfapi('show', 2, function() {}, {
7
lazy: true,
8
})
9
</script>
Copied!
  • 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 :
Dernière mise à jour 3mo ago