En complément de l’affichage du bandeau cookies, vous devez bloquer les cookies jusqu’à l’obtention du consentement. Plusieurs options s’offrent à vous, à commencer par le balisage manuel.
Il s’agit d’apporter de légères modifications au code des scripts susceptibles d’installer des cookies de façon à permettre à Privacy Controls and Cookie Solution d’empêcher l’exécution de ces scripts tant que l’utilisateur n’a pas donné son consentement.
L’outil Privacy Controls and Cookie Solution de iubenda vous permet de vous conformer à toutes les obligations qui vous incombent en vertu de la Loi cookies : l’affichage d’un bandeau cookies contenant les informations à communiquer à vos utilisateurs, la mise en place d’une politique relative aux cookies pour leur permettre d’obtenir plus d’informations, le blocage des scripts jusqu’à l’obtention du consentement de l’utilisateur, ainsi que l’enregistrement des preuves des préférences des utilisateurs.
Saviez-vous qu’il existe une option plus simple pour le blocage préalable des cookies et traqueurs? Notre fonction de blocage automatique automatise le processus, vous permettant d’économiser du temps et des efforts.
Si vous préférez baliser manuellement vos scripts qui installent ou peuvent installer des cookies, vous pouvez toujours suivre le guide ci-dessous pour des instructions pas à pas et des exemples pratiques. Cependant, nous vous recommandons fortement d’envisager la fonction de blocage automatique pour une approche plus simple.
👉 Cliquez ici pour en savoir plus sur le blocage automatique et comment cela peut simplifier votre processus de blocage des cookies
Si vous cherchez un guide d’installation, consultez notre introduction à Privacy Controls and Cookie Solution. Si vous avez un site WordPress, lisez notre article consacré à WordPress pour apprendre à automatiser le blocage des scripts à l’aide du module Privacy Controls and Cookie Solution de iubenda pour WordPress.
Cela dépend de la législation applicable à votre site. En Europe, vous êtes légalement tenu de bloquer les scripts qui installent des cookies jusqu’à l’obtention du consentement de l’utilisateur. Vous devez bloquer tous les cookies, sauf les cookies strictement nécessaires, qui bénéficient d’une exemption.
En Italie, la catégorie des cookies exemptés inclut :
En Italie, pour que Google Analytics puisse bénéficier de l’exemption de l’obligation de consentement préalable, les adresses IP doivent être anonymisées. Toutefois, en France, Google Analytics ne semble pouvoir bénéficier d’aucune exemption, et bien que l’utilisation de Matomo/Piwik soit recommandée, c’est l’anonymisation de l’adresse IP de l’utilisateur qui permet d’effectuer une analyse de données désagrégées.
Pour aider les annonceurs à gérer les cookies à des fins d’analyse et de publicité, Google propose désormais le Mode consentement, une fonctionnalité qui vous permet d’éviter le blocage préalable pour Google Analytics et Google Ads (y compris le Remarketing et le Suivi des conversions de Google Ads).
Découvrez comment l’utiliser avec Privacy Controls and Cookie Solution.
Rappelons toutefois que lorsque le RGPD s’applique, l’utilisation prévue entre en ligne de compte pour déterminer si le consentement est ou non exigé, car même des données statistiques peuvent relever du « profilage » ou du « suivi » selon l’utilisation qui en est faite.
Voici la marche à suivre :
Si d’autres outils tiers garantissent l’absence d’utilisation de cookies, par exemple en vous proposant des options de configuration spécifiques, ces outils peuvent eux aussi être considérés comme exemptés de l’obligation de blocage préalable.
C’est notamment le cas de YouTube, qui propose une fonctionnalité spécifique visant à empêcher le suivi de l’utilisateur par le biais de cookies.
Google Tag Manager est un outil gratuit qui simplifie votre mise en conformité avec les règles en matière de cookies. Il est compatible avec Privacy Controls and Cookie Solution de iubenda. Vous pouvez consulter notre guide consacré à Google Tag Manager en cliquant ici.
Google Tag Manager vous évite d’avoir à baliser les scripts de la façon décrite ci-dessous, du moins pour une certaine catégorie de scripts (soit les scripts qui ne définissent pas la position d’un élément). Par conséquent, il ne gère pas les scripts intégrés, comme les scripts relatifs aux bannières publicitaires, aux widgets vidéo YouTube ou aux boutons de réaction sur Facebook. Bien que cette méthode ne soit pas un remède universel, nous vous recommandons fortement de l’utiliser.
Pour tous les autres scripts qui installent ou qui peuvent installer des cookies, vous devez apporter des modifications au code pour pouvoir mettre en œuvre le blocage.
Pour activer le blocage des scripts susceptibles d’installer des cookies, vous devez modifier ces scripts de façon à permettre à Privacy Controls and Cookie Solution de iubenda d’empêcher leur exécution tant que l’utilisateur n’a pas donné son consentement.
Voici la marche à suivre :
_iub_cs_activate
aux balises script
ettext/javascript
par text/plain
.<script class="_iub_cs_activate" type="text/plain" src="code-source.js"> …. </script>
Le remplacement de l’attribut src
est facultatif, mais nous vous conseillons de le remplacer par data-suppressedsrc
ou suppressedsrc
. Dans certains cas, ce remplacement de src
est nécessaire, car même lorsqu’un script est bloqué, il arrive que le navigateur puisse télécharger ou interpréter la ressource et donc installer des cookies.
// use of data-suppressedsrc <script data-suppressedsrc="LINK-TO-SOURCE.js" class="_iub_cs_activate" type="text/plain"> </script> // OR suppressedsrc <script suppressedsrc="LINK-TO-SOURCE.js" class="_iub_cs_activate" type="text/plain"> </script>
Remarque : lors de la réactivation des scripts, Privacy Controls and Cookie Solution de iubenda réactive l’attribut src
en contrôlant les attributs mentionnés ci-dessus dans l’ordre suivant : data-suppressedsrc
, suppressedsrc
puis src
(s’il n’a pas été modifié).
En revanche, pour activer la balise inline JavaScript, vous devez ajouter la classe _iub_cs_activate-inline
.
<script class="_iub_cs_activate-inline" type="text/plain"> …. </script>
Remarque : vous devez ajouter la classe _iub_cs_activate-inline
à tous les objets document.write
ou document.writeln
.
Grâce aux attributs personnalisés suppressedtype
et data-iub-type
, Privacy Controls and Cookie Solution peut aussi bloquer ou activer des scripts dont le type n’est pas text/javascript
(p.ex. les scripts de type module
) :
<script type="module">
console.log('this is a module, e.g. "this" is undefined:', this);
</script>
Pour le bloquer :
<script suppressedtype="module" type="text/plain" class="_iub_cs_activate">
console.log('this is a module, e.g. "this" is undefined:', this);
</script>
ou (alternative équivalente) :
<script data-iub-type="module" type="text/plain" class="_iub_cs_activate">
console.log('this is a module, e.g. "this" is undefined:', this);
</script>
Si vous avez activé la fonctionnalité de consentement par catégorie, vous devrez utiliser l’attribut spécial data-iub-purposes
pour lister les catégories de scripts ou d’iframes à bloquer, p.ex. data-iub-purposes="2"
. S’il y en a plusieurs, ces catégories devront être séparées par des virgules, p.ex. data-iub-purposes="2, 3"
. Ce dernier cas de figure est rare, mais un même activateur peut remplir plusieurs rôles.
Gardez à l’esprit que les finalités sont réparties dans cinq catégories dont chacune a un identifiant : Nécessaires (1), Fonctionnalité (2), Expérience (3), Mesure (4), Marketing (5) :
1
). Finalités incluses :
2
). Finalités incluses :
3
). Finalités incluses :
4
). Finalités incluses :
5
). Finalités incluses :
Prenons pour exemple le bouton « Suivre » de Twitter :
<a href="https://twitter.com/iubenda" class="twitter-follow-button" data-show-count="false">Follow @iubenda</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Ce bouton relève de la finalité « Interaction avec les réseaux sociaux et les plateformes externes » comprise dans la catégorie « Amélioration de l’expérience » (identifiant 3
). C’est pourquoi le code deviendra :
<a href="https://twitter.com/iubenda" class="twitter-follow-button" data-show-count="false">Follow @iubenda</a>
<script async type="text/plain" class="_iub_cs_activate" data-iub-purposes="3" data-suppressedsrc="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Lorsque vous utilisez le consentement par catégorie, vous devez ajouter l’attribut data-iub-purposes
à tous vos scripts qui installent des cookies — sauf les cookies strictement nécessaires (pour lesquels vous n’avez pas besoin de consentement) — afin de permettre à Privacy Controls and Cookie Solution d’identifier correctement les scripts à réactiver. Lorsque la fonctionnalité de consentement par catégorie est activée, les scripts et iframes auxquels vous n’avez pas ajouté l’attribut data-iub-purposes
ou dont l’utilisateur a rejeté au moins une finalité resteront bloqués. Pensez donc à l’ajouter dans chaque cas.
Autrement, lorsque des cookies sont activés par des portions de code JavaScript, il est possible de passer par des fonctions de rappel dans l’instance csConfiguration
.
// onConsentGiven is still active but deprecated: if both are declarated only onConsentRead will be executed. _iub.csConfiguration = { callback: { onConsentRead: function(){ yourFunctionForRegisterCookie() ;} } }
Remarque : la fonction de rappel onConsentGiven
utilisée dans l’exemple ci-dessus est toujours disponible pour des raisons de compatibilité avec les versions précédentes. Sa valeur sera toutefois écrasée par celle de onConsentRead
si vous utilisez cette dernière.
Dans certains cas, pour réactiver correctement une balise bloquée, il faut attendre qu’une variable ou un objet JavaScript soit disponible. Pour bien gérer les dépendances, vous pouvez utiliser l’attribut data-iub-cs-wait-for
.
<script suppressedsrc="//download.helloworldvariable.js" class="_iub_cs_activate"> </script> <script data-iub-cs-wait-for="helloWord" class="_iub_cs_activate-inline"> console.log('print hello world' + helloWorld); </script>
Il est également possible que diverses balises img
et iframe
installent des cookies. Le cas échéant, vous devrez ajouter la classe _iub_cs_activate
(comme nous l’avons fait ci-dessus pour les balises script
), affecter la valeur originale de l’attribut src
à un nouvel attribut appelé data-suppressedsrc
ou suppressedsrc
, et affecter la valeur "about:blank"
à l’attribut src
(voir l’exemple ci-dessous pour un exemple concret).
<iframe id="player" class="_iub_cs_activate" width="640" height="390" frameborder="0" suppressedsrc="https://www.youtube.com/embed/erVv_Gm7CC4" src="about:blank"></iframe>
Remarque : la valeur data:text/html;base64,PGh0bWw+PGJvZHk+U3VwcHJlc3NlZDwvYm9keT48L2h0bWw+
également utilisée dans ce guide (version codée en base64 de Suppressed
, que la plupart des navigateurs afficheront alors jusqu’à l’obtention du consentement à la place de la sortie réelle du script) ne gêne ni le blocage ni l’activation ultérieure de la balise, mais son utilisation peut provoquer des erreurs d’affichage sous Android.
Vous trouverez à cette adresse un outil d’encodage et de décodage qui vous permettra de générer une version en base64 de toute autre chaîne de caractères.
À l’heure actuelle, la mise en œuvre de la balise noscript, susceptible d’installer des cookies lorsque l’utilisateur a désactivé JavaScript dans son navigateur, est en cours. Pour vous préparer à ce cas de figure, nous vous conseillons d’éliminer les balises noscript
de vos pages ou d’utiliser à la place des solutions backend qui permettent d’inclure ou d’exclure de façon sélective les balises noscript
de vos pages en cas de détection de la présence du cookie _iub_cs-local
.
Vous trouverez ci-dessous des exemples de scripts couramment utilisés et des conseils sur la façon de les modifier pour vous conformer à la Loi cookies.
Après :
1. Définissez la fonction de rappel onConsentGiven
dans l’instance _iub.csConfiguration
.
onConsentGiven: function () { $('.4wNET.hidden').removeClass('hidden'); }
2. Incluez entièrement le script de chargement de la bannière dans une div avec “display:none”. Voir un exemple.
Bouton :
Altervista et ses partenaires publicitaires ont intégré le Cadre de transparence et de consentement. Pour plus d’informations, consultez le Wiki Altervista.
src
de la balise script
.Remarque : lorsqu’une page contient plusieurs extraits de code Ads Conversion, ceux-ci doivent être bloqués dans un ordre précis.
_iub_cs_activate-inline
._iub_cs_activate
.Ainsi, le premier extrait de code Ads Conversion ressemblera à ce premier exemple :
<script class="_iub_cs_activate-inline" type="text/plain"> /* <![CDATA[ */ var google_conversion_id =CONVERSION_ID; var google_conversion_label = "CONVERSION-LABEL"; var google_custom_params = window.google_tag_params; var google_remarketing_only = true; /* ]]> */ </script> <script class="_iub_cs_activate-inline" type="text/plain" src="//www.googleadservices.com/pagead/conversion.js"> </script> <noscript> <div style="display:inline;"> <img height="1" width="1" style="border-style:none;" alt="" class="_iub_cs_activate" src="data:text/html;base64,PGh0bWw+PGJvZHk+U3VwcHJlc3NlZDwvYm9keT48L2h0bWw+" suppressedsrc="//googleads.g.doubleclick.net/pagead/viewthroughconversion/1036022355/?value=0&label=-KpbCO3v1QQQ0-SB7gM&guid=ON&script=0"/> </div> </noscript>
Tandis que les extraits de code Ads Conversion suivants ressembleront à ce second exemple :
<script class="_iub_cs_activate" type="text/plain"> /* <![CDATA[ */ var google_conversion_id =CONVERSION_ID; var google_conversion_label = "CONVERSION-LABEL"; var google_custom_params = window.google_tag_params; var google_remarketing_only = true; /* ]]> */ </script> <script class="_iub_cs_activate" type="text/plain" src="//www.googleadservices.com/pagead/conversion.js"> </script> <noscript> <div style="display:inline;"> <img height="1" width="1" style="border-style:none;" alt="" type="text/plain" class="_iub_cs_activate" src="data:text/html;base64,PGh0bWw+PGJvZHk+U3VwcHJlc3NlZDwvYm9keT48L2h0bWw+" suppressedsrc="//googleads.g.doubleclick.net/pagead/viewthroughconversion/1036022355/?value=0&label=-KpbCO3v1QQQ0-SB7gM&guid=ON&script=0"/> </div> </noscript>
Tous les extraits de code présents sur la page peuvent être bloqués à l’aide de la classe _iub_cs_activate
. Exemple :
<script class="_iub_cs_activate" type="text/plain"> /* <![CDATA[ */ var google_conversion_id =CONVERSION_ID; var google_conversion_label = "CONVERSION-LABEL"; var google_custom_params = window.google_tag_params; var google_remarketing_only = true; /* ]]> */ </script> <script class="_iub_cs_activate" type="text/plain" src="//www.googleadservices.com/pagead/conversion.js"> </script> <noscript> <div style="display:inline;"> <img height="1" width="1" style="border-style:none;" alt="" type="text/plain" class="_iub_cs_activate" src="data:text/html;base64,PGh0bWw+PGJvZHk+U3VwcHJlc3NlZDwvYm9keT48L2h0bWw+" suppressedsrc="//googleads.g.doubleclick.net/pagead/viewthroughconversion/1036022355/?value=0&label=-KpbCO3v1QQQ0-SB7gM&guid=ON&script=0"/> </div> </noscript>
Le script suivant n’est ajouté que lorsque vous utilisez les fonctionnalités de Google Analytics qui permettent de suivre un utilisateur unique. Dans tous les autres cas, nous vous suggérons d’anonymiser les adresses IP.
Remarque : si vous affichez des annonces personnalisées à l’aide de services de Google, vous devez recueillir un consentement explicite à la personnalisation des publicités avant d’afficher des annonces personnalisées aux utilisateurs finaux se trouvant dans l’EEE. Pour en savoir plus, cliquez ici.
Remarque : lorsqu’une page contient de nombreuses bannières OpenX, vous pouvez accélérer l’activation à l’aide du paramètre inlineDelay
. Pour plus d’informations, consultez le guide d’installation et de personnalisation de iubenda. Nous vous recommandons d’éviter les valeurs inférieures à 200
millisecondes.
Remarque : utilisez des balises asynchrones (AJAX).
Avant :
<div id="DIV-ID" class="CLASS-DIV"> <ul id="UL-ID" class="CLASS-UL"> <li id="LI-ID" class="CLASS-LI"> <a target="_blank" href="http://www.tripadvisor.co.uk/"><img src="http://www.tripadvisor.co.uk/img/cdsi/partner/tripadvisor_logo_DIMENSIONS.png" alt="TripAdvisor"/></a> </li> </ul> </div> <script src="http://www.jscache.com/wejs?wtype=TYPE&uniq=UNIQ&locationId=LocationId&icon=knifeAndFork&lang=en_UK&display_version=2"></script>
Après :
1. Ajoutez à la configuration basique du script iubenda le paramètre reloadOnConsent
comme ci-dessous :
<script> _iub.csConfiguration ? _iub.csConfiguration : _iub.csConfiguration = {} _iub.csConfiguration.reloadOnConsent = true; </script> //insert it into <head> tag after iubenda configuration
2. Définissez la fonction isConsentGiven
pour contrôler les cookies :
<script type='text/javascript'> function isConsentGiven() { if('consentIsGiven' in window && (consentIsGiven === true || consentIsGiven === false)) return consentIsGiven; if(!('_iub' in window && 'csConfiguration' in _iub)) return false; var siteId = _iub.csConfiguration.siteId || ''; var cookiePolicyId = _iub.csConfiguration.cookiePolicyId || ''; var cs = document.cookie.split(';'); var consentIsGiven = false; for (var i = 0; i < cs.length; i++) { while (cs[i].charAt(0) == ' ') cs[i] = cs[i].substring(1); if(cs[i].indexOf('_iub_cs-s'+ siteId) == 0||cs[i].indexOf('_iub_cs-'+ cookiePolicyId) == 0) { consentIsGiven = true; break; } } window.consentIsGiven = consentIsGiven; return consentIsGiven; } </script>
3. Remplacez l’élément TripAdvisor original par la ressource suivante :
<script> if(isConsentGiven()){ //per ogni elemento di TripAdvisor document.write('<div id="DIV-ID" class="CLASS-DIV"><ul id="UL-ID" class="CLASS-UL"><li id="LI-ID" class="CLASS-LI"><a target="_blank" href="http://www.tripadvisor.co.uk/"><img src="http://www.tripadvisor.co.uk/img/cdsi/partner/tripadvisor_logo_DIMENSIONS.png" alt="TripAdvisor"\/><\/a><\/li><\/ul><\/div>'); document.write('<script src="http://www.jscache.com/wejs?wtype=TYPE&uniq=UNIQ&locationId=LocationId&icon=knifeAndFork&lang=en_UK&display_version=2"><\/script>'); } </script>
Avant :
<div id="DIV-ID" class="CLASS-DIV"> <ul id="UL-ID" class="CLASS-UL"> <li id="LI-ID" class="CLASS-LI"> <a target="_blank" href="http://www.tripadvisor.co.uk/"><img src="http://www.tripadvisor.co.uk/img/cdsi/partner/tripadvisor_logo_DIMENSIONS.png" alt="TripAdvisor"/></a> </li> </ul> </div> <script src="http://www.jscache.com/wejs?wtype=TYPE&uniq=UNIQ&locationId=LocationId&icon=knifeAndFork&lang=en_UK&display_version=2"></script>
Après :
1. Ajoutez à la configuration basique du script iubenda le paramètre reloadOnConsent
comme ci-dessous :
<script> _iub.csConfiguration ? _iub.csConfiguration : _iub.csConfiguration = {} _iub.csConfiguration.reloadOnConsent = true; </script> //insert it into <head> tag after iubenda configuration
2. Définissez la fonction isConsentGiven
pour contrôler les cookies :
<script type='text/javascript'> function isConsentGiven() { if('consentIsGiven' in window && (consentIsGiven === true || consentIsGiven === false)) return consentIsGiven; if(!('_iub' in window && 'csConfiguration' in _iub)) return false; var siteId = _iub.csConfiguration.siteId || ''; var cookiePolicyId = _iub.csConfiguration.cookiePolicyId || ''; var cs = document.cookie.split(';'); var consentIsGiven = false; for (var i = 0; i < cs.length; i++) { while (cs[i].charAt(0) == ' ') cs[i] = cs[i].substring(1); if(cs[i].indexOf('_iub_cs-s'+ siteId) == 0||cs[i].indexOf('_iub_cs-'+ cookiePolicyId) == 0) { consentIsGiven = true; break; } } window.consentIsGiven = consentIsGiven; return consentIsGiven; } </script>
3. Remplacez l’élément TripAdvisor original par la ressource suivante :
<script> if(isConsentGiven()){ //per ogni elemento di TripAdvisor document.write('<div id="DIV-ID" class="CLASS-DIV"><ul id="UL-ID" class="CLASS-UL"><li id="LI-ID" class="CLASS-LI"><a target="_blank" href="http://www.tripadvisor.co.uk/"><img src="http://www.tripadvisor.co.uk/img/cdsi/partner/tripadvisor_logo_DIMENSIONS.png" alt="TripAdvisor"\/><\/a><\/li><\/ul><\/div>'); document.write('<script src="http://www.jscache.com/wejs?wtype=TYPE&uniq=UNIQ&locationId=LocationId&icon=knifeAndFork&lang=en_UK&display_version=2"><\/script>'); } </script>
Avant :
<div id="DIV-ID" class="CLASS-DIV"> <ul id="UL-ID" class="CLASS-UL"> <li id="LI-ID" class="CLASS-LI"> <a target="_blank" href="http://www.tripadvisor.co.uk/"><img src="http://www.tripadvisor.co.uk/img/cdsi/partner/tripadvisor_logo_DIMENSIONS.png" alt="TripAdvisor"/></a> </li> </ul> </div> <script src="http://www.jscache.com/wejs?wtype=TYPE&uniq=UNIQ&locationId=LocationId&icon=knifeAndFork&lang=en_UK&display_version=2"></script>
Après :
1. Ajoutez à la configuration basique du script iubenda le paramètre reloadOnConsent
comme ci-dessous :
<script> _iub.csConfiguration ? _iub.csConfiguration : _iub.csConfiguration = {} _iub.csConfiguration.reloadOnConsent = true; </script> //insert it into <head> tag after iubenda configuration
2. Définissez la fonction isConsentGiven
pour contrôler les cookies :
<script type='text/javascript'> function isConsentGiven() { if('consentIsGiven' in window && (consentIsGiven === true || consentIsGiven === false)) return consentIsGiven; if(!('_iub' in window && 'csConfiguration' in _iub)) return false; var siteId = _iub.csConfiguration.siteId || ''; var cookiePolicyId = _iub.csConfiguration.cookiePolicyId || ''; var cs = document.cookie.split(';'); var consentIsGiven = false; for (var i = 0; i < cs.length; i++) { while (cs[i].charAt(0) == ' ') cs[i] = cs[i].substring(1); if(cs[i].indexOf('_iub_cs-s'+ siteId) == 0||cs[i].indexOf('_iub_cs-'+ cookiePolicyId) == 0) { consentIsGiven = true; break; } } window.consentIsGiven = consentIsGiven; return consentIsGiven; } </script>
3. Remplacez l’élément TripAdvisor original par la ressource suivante :
<script> if(isConsentGiven()){ document.write('<div id="DIV-ID" class="CLASS-DIV"><ul id="UL-ID" class="CLASS-UL"><li id="LI-ID" class="CLASS-LI"><a target="_blank" href="http://www.tripadvisor.co.uk/"><img class="_iub_cs_activate" src="data:text/html;base64,PGh0bWw+PGJvZHk+U3VwcHJlc3NlZDwvYm9keT48L2h0bWw+" suppressedsrc="http://www.tripadvisor.co.uk/img/cdsi/img2/branding/150_logo-11900-2.png" alt="TripAdvisor"\/><\/a><\/li><\/ul><\/div>'); document.write('<script src="http://www.jscache.com/wejs?wtype=cdswritereviewlg&uniq=YOUR-UNIQ&locationId=YOUR-LOCATION&lang=en_UK&border=false&langversion=2"><\/script>'); } </script>
N’utilisez pas les solutions suivantes si vous utilisez déjà l’option qui vous permet d’inclure des vidéos YouTube sans déposer de cookies lors des visites sur votre site.