Book a demo
Start for free

Blocage préalable des cookies : balisage manuel (avec exemples concrets)

En résumé

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.

💡 Simplifiez votre processus de blocage des cookies avec le blocage automatique !

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

Comment installer Privacy Controls and Cookie Solution de iubenda

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.

Quels scripts susceptibles d’installer des cookies faut-il bloquer ?

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 :

Au sujet de Google Analytics

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.

Mode consentement de Google

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 :

  • Google Analytics : suivez le guide d’anonymisation des adresses IP avec Google Analytics (il suffit d’ajouter une ligne supplémentaire à son code de configuration) ;
  • D’après les renseignements dont nous disposons, Webtrekk et de nombreux autres outils d’analyse sont déjà aux normes et ne nécessitent aucune configuration supplémentaire.

Au sujet des autres outils qui garantissent l’absence d’utilisation de cookies

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.

Utiliser Google Tag Manager simplifie grandement la conformité avec les règles en matière 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.

Comment mettre en œuvre le blocage des scripts susceptibles d’installer des cookies

Modifications à apporter aux scripts

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 :

  1. ajoutez la classe _iub_cs_activate aux balises script et
  2. remplacez la valeur de l’attribut type text/javascript par text/plain.

[git:pre_js-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/_iub_cs_activate.js]

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.

[git:pre_js-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/safemode/tag-options/suppressedsrc.html]

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.

[git:pre_js-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/_iub_cs_activate-inline.js]

Remarque : vous devez ajouter la classe _iub_cs_activate-inline à tous les objets document.write ou document.writeln.

Modules JavaScript

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. Nécessaires (identifiant 1). Finalités incluses :
    • gestion et enregistrement des sauvegardes,
    • hébergement web et infrastructure de backend,
    • gestion des pages de destination et d’invitation,
    • services de plateforme et hébergement,
    • protection anti-SPAM,
    • optimisation et répartition du trafic,
  2. Fonctionnalité (identifiant 2). Finalités incluses :
    • contacter l’Utilisateur,
    • interaction avec des plateformes de chat en direct,
    • gestion des conférences et de la téléphonie en ligne,
    • gestion des demandes d’assistance et de contact,
    • interaction avec des plateformes d’assistance et de feedback,
    • gestion des balises,
    • inscription et authentification,
    • gestion de la base de données Utilisateurs.
  3. Expérience (identifiant 3). Finalités incluses :
    • commentaire sur le contenu,
    • interaction avec des plateformes de collecte de données et d’autres tiers,
    • affichage de contenus à partir de plateformes externes,
    • interaction avec les réseaux sociaux et les plateformes externes,
    • interaction avec des plateformes de sondage en ligne,
    • gestion des flux RSS,
    • fonctionnalités sociales.
  4. Mesure (identifiant 4). Finalités incluses :
    • analyses,
    • bêta-test,
    • mesure de la performance du contenu et test de fonctionnalité (A/B testing),
    • heatmap et enregistrement de sessions,
    • gestion de la collecte de données et des sondages en ligne.
  5. Marketing (identifiant 5). Finalités incluses :
    • publicité,
    • infrastructure des services publicitaires,
    • affiliation commerciale,
    • gestion des contacts et envoi de messages,
    • remarketing et ciblage comportemental.

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.

Fonction de rappel

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.

[file:pre_html-code@https://raw.githubusercontent.com/iubenda/cookie-law-solution-codesnippets/master/callback/onConsentRead.html]

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.

Modifications à apporter aux balises script, iframe et img pour la gestion des dépendances

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.

[git:pre_html-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/safemode/tag_options/iub_cs_wait_for.html]

Balises img et iframe

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.

Balises noscript

À 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.

Exemples concrets

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.

4w Marketing

Avant

Après :

1. Définissez la fonction de rappel onConsentGiven dans l’instance _iub.csConfiguration.

[file:pre_html-code@https://gist.githubusercontent.com/s2imon/bd683a02635b39eced38/raw]

2. Incluez entièrement le script de chargement de la bannière dans une div avec “display:none”. Voir un exemple.

AddThis

Bouton :

AddToAny

AdRoll

Altervista

Altervista et ses partenaires publicitaires ont intégré le Cadre de transparence et de consentement. Pour plus d’informations, consultez le Wiki Altervista.

Amazon

Bannière

Connexion

Traqueur Bing

Booking (affilié)

CodePen

Criteo

  • Avant
  • Après : la ressource URL est d’abord entièrement intégrée au code de blocage, puis insérée dans l’attribut src de la balise script.

Customerly

Disqus

Elevio

Facebook

Pixel

Bouton de réaction

Plugin Like Box

Plugin Page

Foursquare

Freshchat

Remarque : lorsqu’une page contient plusieurs extraits de code Ads Conversion, ceux-ci doivent être bloqués dans un ordre précis.

  • Le premier extrait de code doit être bloqué à l’aide de la classe _iub_cs_activate-inline.
  • Tous les extraits de code suivants doivent être bloqués à l’aide de la classe _iub_cs_activate.

Ainsi, le premier extrait de code Ads Conversion ressemblera à ce premier exemple :

[file:pre_html-code@https://raw.githubusercontent.com/iubenda/cookie-law-solution-codesnippets/master/adwords_after_iub.js]

Tandis que les extraits de code Ads Conversion suivants ressembleront à ce second exemple :

[file:pre_html-code@https://raw.githubusercontent.com/iubenda/cookie-law-solution-codesnippets/master/adword_after_iub_standard_block.html]

Tous les extraits de code présents sur la page peuvent être bloqués à l’aide de la classe _iub_cs_activate. Exemple :

[file:pre_html-code@https://raw.githubusercontent.com/iubenda/cookie-law-solution-codesnippets/master/adword_after_iub_standard_block.html]

Google AdSense

Google Analytics

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.

gtag.js

Google Agenda

Google Maps (iframe)

Google Publisher Tag

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.

Traqueur Google (avec balise img)

Headway

Intercom

Kissmetrics

MediaMond

Mixpanel

MyLiveChat

Bannière OpenX

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.

Optimizely

PayPal (bouton Acheter)

ShareThis

Smart Adserver

Remarque : utilisez des balises asynchrones (AJAX).

En-tête (head)

Corps (body)

SoundCloud

Spotify

Écouter

Suivre

Stripe

TradeTracker

TripAdvisor

Widget Badge

Avant :

[git:pre_html-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/tripadisor_badge_before.html]

Après :

1. Ajoutez à la configuration basique du script iubenda le paramètre reloadOnConsent comme ci-dessous :

[git:pre_html-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/reload_on_consent.html]

2. Définissez la fonction isConsentGiven pour contrôler les cookies :

[git:pre_html-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/is_consent_given.html]

3. Remplacez l’élément TripAdvisor original par la ressource suivante :

[git:pre_html-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/trip_advisor/tripadvisor_badge_after.html]

Widget Extraits d’avis

Avant :

[git:pre_html-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/tripadisor_badge_before.html]

Après :

1. Ajoutez à la configuration basique du script iubenda le paramètre reloadOnConsent comme ci-dessous :

[git:pre_html-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/reload_on_consent.html]

2. Définissez la fonction isConsentGiven pour contrôler les cookies :

[git:pre_html-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/is_consent_given.html]

3. Remplacez l’élément TripAdvisor original par la ressource suivante :

[git:pre_html-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/trip_advisor/tripadvisor_badge_after.html]

Widgets Écrivez un avis

Avant :

[git:pre_html-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/tripadisor_badge_before.html]

Après :

1. Ajoutez à la configuration basique du script iubenda le paramètre reloadOnConsent comme ci-dessous :

[git:pre_html-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/reload_on_consent.html]

2. Définissez la fonction isConsentGiven pour contrôler les cookies :

[git:pre_html-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/is_consent_given.html]

3. Remplacez l’élément TripAdvisor original par la ressource suivante :

[git:pre_html-code@https://github.com/iubenda/cookie-law-solution-codesnippets/blob/master/trip_advisor/tripadvisor_writereview_after.html]

Twitter

Bouton Suivre

Bouton Partager

Tweet intégré

UserVoice

Vimeo

Viralize

YouTube

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.

Voir aussi