Comment bloquer les codes et cookies tiers si aucun consentement n'est donné ?

Blocage automatique vs blocage manuel

ConsentManager propose un blocage manuel et automatique des codes et des cookies. Bien que le blocage automatique soit plus facile à mettre en place, nous recommandons, pour des raisons de conformité, d'utiliser le blocage manuel !

Voici une comparaison des deux méthodes de blocage :

Blocage automatique

  • Facile à installer, un seul code dans la balise <head>
  • Peut poser des problèmes de conformité
  • Fonctionne en mode synchrone, ce qui ralentit la vitesse du site web
  • Peut causer des problèmes avec les fonctionnalités normales du site web (par exemple, en bloquant les mauvais scripts)

Pour en savoir plus sur le blocage automatique des codes et des cookies, cliquez ici.

Blocage manuel

  • Plus difficile à installer, tous les scripts/iframes doivent être ajustés
  • Très sûr/conforme s'il est correctement installé
  • Fonctionne de manière asynchrone, la vitesse du site web n'est pas affectée
  • Peu susceptible de causer des problèmes avec les fonctionnalités normales du site web (par exemple, ne bloque que les scripts que vous choisissez de bloquer)

Nous recommandons d'utiliser le blocage manuel afin d'éviter tout problème de conformité !

Blocage manuel des codes et des cookies

Le CMP peut retarder le chargement des publicités sur votre site web jusqu'à ce que le consentement soit donné. Pour activer cette fonctionnalité, vous devez modifier les codes créatifs existants sur votre site web.

Veuillez noter que le blocage / le chargement différé ne fonctionne qu'avec les codes de script asynchrones et les codes Iframe, et non avec les codes de script synchrones.

Codes iframe

Si vous souhaitez reporter un code iframe, veuillez suivre les étapes suivantes :

  1. Modifiez l' src="…" attribut de l'iframe en data-cmp-src="…"
  2. Ajoutez un nouvel src="about:blank" attribut à l'iframe
  3. Si un class="…" existe, ajoutez cmplazyload à la valeur. Si la classe n'existe pas, ajoutez l'attribut en incluant la valeur class="cmplazyload"
  4. Ajoutez un nouvel attribut data-cmp-vendor="x" et/ou data-cmp-purpose="x" afin de ne déclencher le code que si le consentement pour ce fournisseur et cette finalité est donné. Voir les informations ci-dessous.

Exemple de code avant modification :

<iframe width="300" height="250" noresize="noresize" scrolling="no" 
        frameborder="0" marginheight="0" marginwidth="0"
        src="http://adserver.de/?x=1&y=2"
        ALLOWTRANSPARENCY="true"></iframe>

Exemple de code après modification :

<iframe width="300" height="250" noresize="noresize" scrolling="no"        
        frameborder="0" marginheight="0" marginwidth="0"        
        class="cmplazyload"        
        src="about:blank"     
        data-cmp-vendor="123"
        data-cmp-src="http://adserver.de/?x=1&y=2"        
        ALLOWTRANSPARENCY="true"></iframe>

Codes de script asynchrones

Si vous souhaitez différer le chargement d'un script asynchrone, veuillez suivre les étapes suivantes :

  1. Si un src="..." existe, modifiez l' src="…" attribut du script en data-cmp-src="…"
  2. Si un type="..." existe, remplacez sa valeur par text/plain, sinon ajoutez l'attribut avec cette valeur type="text/plain".
  3. Si un class="…" existe, ajoutez cmplazyload à la valeur. Si la classe n'existe pas, ajoutez l'attribut en incluant la valeur class="cmplazyload"
  4. Ajoutez un nouvel attribut data-cmp-vendor="x" et/ou data-cmp-purpose="x" afin de ne déclencher le code que si le consentement pour ce fournisseur et cette finalité est donné. Voir les informations ci-dessous.

Exemple de code 1 avant modification :

<script async
        type="text/javascript"
        src="https://adserver.de/banner.php"></script>

Exemple de code 1 après modification :

<script async 
        type="text/plain"
        data-cmp-src="https://adserver.de/banner.php"
        class="cmplazyload"
        data-cmp-vendor="123" 
        ></script>

Exemple de code 2 avant modification :

<script type="text/javascript">
  console.log("do something here");
</script>

Exemple de code 2 après modification :

<script type="text/plain" class="cmplazyload" data-cmp-vendor="123">
  console.log("do something here");
</script>

Masquer les autres éléments de la page

Le mécanisme de blocage décrit ci-dessus peut être utilisé avec pratiquement tous les éléments HTML qui chargent des données tierces :

  • image
  • vidéo
  • source
  • objet
  • intégrer
  • lien (Remarque : utilisez data-cmp-href au lieu de data-cmp-src)

Attributs supplémentaires

Les attributs supplémentaires suivants peuvent être ajoutés aux codes script/iframe afin d'aligner davantage l'affichage sur certains résultats de consentement :

Attribut

Description

data-cmp-hide="1"

Si présent, le CMP masquera l'iframe si le consentement n'est pas donné et l'affichera si le consentement est donné

data-cmp-vendor="xxx"

CMP n'activera ce script/iframe que si le consentement pour le fournisseur xxx est donné. Plusieurs fournisseurs peuvent être combinés à l'aide d'une virgule, par exemple data-cmp-vendor="xxx,yyy,zzz"

Peut également contenir la valeur * afin d'indiquer que tous les fournisseurs sont concernés.

data-cmp-purpose="xxx"

CMP n'activera ce script/iframe que si le consentement pour la finalité xxx est donné. Plusieurs finalités peuvent être combinées à l'aide d'une virgule, par exemple data-cmp-purpose="xxx,yyy,zzz"

Peut également contenir la valeur * afin d’indiquer que toutes les finalités s’appliquent.

data-cmp-preview="WxH"

Le CMP affichera un élément d’aperçu (voir le blocage de contenu dynamique) à cet emplacement. WxH doit être remplacé par la largeur et la hauteur (par exemple 300×400) de la couche d’aperçu.

data-cmp-preview-connect="xxx"

Indique au CMP de débloquer tous les autres éléments de classe xxx une fois que cet élément est débloqué.

data-cmp-preview-headline="..."

Vous permet d'ajuster le texte du titre de l'aperçu.

data-cmp-preview-text="..."

Permet de modifier le texte de l'aperçu.

data-cmp-preview-btn="..."

Permet de modifier le texte du bouton de l'aperçu.

data-cmp-preview-checkbox="..."

Permet de modifier le texte de la case à cocher de l'aperçu. Si la valeur est une chaîne vide, la case à cocher ne s'affichera pas.

data-cmp-preview-image="https://..."

Permet de modifier l'image de l'aperçu.

data-cmp-haspreview="0 / 1"

Désactive la superposition de contenu dynamique (valeur par défaut = 0).

data-cmp-preview-bgcolor="#000"

 

Permet de modifier la couleur d'arrière-plan de l'aperçu (par défaut = noir)

data-cmp-preview-mode="0 / 1"

Définit le mode de l'aperçu :

 – 0 (par défaut) : l'aperçu n'est affiché que si aucun consentement n'a été donné pour ce fournisseur

 – 1 : l'aperçu s'affiche toujours (même si le fournisseur a obtenu le consentement)

data-cmp-ab="1"

La CMP n'utilisera pas le blocage automatique avec cet élément.

data-cmp-ab="2"

Le CMP n'utilisera pas le blocage automatique avec cet élément et tous les éléments créés par celui-ci.

data-cmp-block="X"

Bloque l'élément en fonction de la valeur de x:

contentpass: Bloque l'élément si l'utilisateur s'est connecté via ContentPass

purmodel: Bloque l'élément si l'utilisateur s'est connecté via le modèle de client

textblocking: Bloque l'élément si l'utilisateur n'a pas accepté le(s) fournisseur(s) ou le(s) objectif(s)

Remarque : si data-cmp-vendor="..." et data-cmp-purpose="..." ne sont pas présents, le système vérifiera si au moins un objectif a été accepté. Si c'est le cas, le code sera activé.

Vous trouverez les identifiants de toutes les finalités dans le menu « Finalités » :

Vous trouverez les identifiants de tous les fournisseurs dans le menu Fournisseurs/Liste blanche :

 

We do our best to keep this purely informative documentation up to date. However, if you notice that any of these guides need a little touch-up, let us know!