cibc : bannière d’avertissement pour les cookies

L’objectif de ce plugin est d’informer l’utilisateur et de recueillir son consentement (ou son refus) sur l’utilisation par le site de cookies de mesure d’audience.

Les objectifs de ce plugin

Le premier objectif de ce plugin est d’informer l’utilisateur et de recueillir son consentement (ou son refus) sur l’utilisation par le site de cookies de mesure d’audience (par exemple Google Analytics, Xiti, etc.).

Pour en savoir plus : délibération de la CNIL n° 2013-378 et des contrôles à partir du mois d’octobre.

ATTENTION : CIBC concerne uniquement les cookies de mesure d’audience.
Remarque : Pour gérer les différentes fonctionnalités déposant des cookies (vidéos de youtube, vidéos de Dailymotion, publicités, boutons sociaux, autres modules insérés sur les pages de votre site) il est possible d’utiliser une solution de gestion de tag. Pour en savoir plus : solutions de gestion de tag.

Le second objectif de ce plugin est d’offrir des solutions pour désactiver, le cas échéant, les cookies en question.

Le troisième objectif de ce plugin est d’offrir une bannière totalement configurable en termes de comportement, de contenu et d’apparence, avec en particulier le choix entre plusieurs feuilles de style (et la possibilité d’ajouter des feuilles de style).

Le quatrième objectif est d’offrir une compatibilité avec :

  • SPIP 2.1
  • SPIP 3.0
  • SPIP 3.2
  • le responsive web design
  • les sites qui n’utilisent pas la balise #INSERT_HEAD sur le site public
  • le multilinguisme

Pourquoi un plugin supplémentaire sur ce sujet ?

Les principales différences avec les autres plugins sur ce sujet sont les suivantes :

  • Le mode de désactivation des cookies est configurable.
  • Le comportement de la bannière est configurable.
  • Le plugin offre le choix entre 10 feuilles de style (et la possibilité d’en ajouter).
  • Le plugin est compatible avec SPIP 2.1 (sans devoir ajouter d’autres plugins), avec SPIP 3.0 et avec SPIP 3.2.
  • Etc.

Remarque : le plugin CIBC a été élaboré avant la publication des autres plugins sur ce sujet.

Fonctionnalités

Les fonctionnalités sont détaillées dans la document PDF ci-joint.

Un choix entre 10 feuilles de style

Le plugin offre le choix entre 10 feuilles de style, via une liste déroulante dans la page de configuration du plugin (et il est possible d’ajouter des feuilles de style).

En bas fond noir (ou bien en haut) :

En bas fond clair (ou bien en haut) :

En bas au centre :

En bas à droite :

En bas fond bleu (ou bien en haut) :

En bas fond blanc (ou bien en haut) :

Remarque : si la largeur de l’écran est réduite (par exemple à environ 300 pixels), la bannière s’adapte automatiquement.

Le contenu de la bannière est configurable

On peut renseigner le texte, avec les mêmes possibilités de mise en forme que le texte d’un article. Le texte peut contenir de liens, etc. Le texte peut utiliser les blocs multilingues de SPIP.

On peut afficher ou non, les boutons suivants :
-  En savoir plus
-  Accepter
-  Refuser

L’adresse de la page qui devra s’afficher lorsque l’on cliquera sur le bouton “En savoir plus” est configurable.

Par exemple, on peut choisir de n’afficher aucun bouton et de mettre un lien dans le texte :

Le comportement de la bannière est configurable

On peut choisir le comportement de la bannière :

  • La poursuite de la navigation vaut acceptation.
  • Ou bien la poursuite de la navigation ne vaut pas acceptation.
  • Ou bien la bannière disparaît après 10 secondes et la poursuite de la navigation vaut acceptation.

On peut choisir le mode de désactivation des cookies :

  • La page “En savoir plus” ou “Refuser” indique comment désactiver les cookies.
  • Désactiver la pose de cookies dans l’attente de l’acceptation (1).
  • Désactiver la pose de cookies lors du refus (1).

(1) Nécessite une adaptation légère de certains squelettes, qui est décrite à l’annexe 4.4 de la documentation.

Le plugin permet de choisir la durée (en jours) du cookie qui enregistre le refus ou l’acceptation du visiteur (au plus 395 jours soit 13 mois).

Le plugin permet de choisir si on souhaite ou non afficher l’avertissement pour les cookies aux auteurs authentifiés.

Exemple d’adaptation de squelette si on utilise Google Analytics

Dans le ou les squelettes qui contiennent le code javascript de Google Analytics (seul un extrait du code figure) :

<script>
 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;…
 (…)
 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

 ga('create', 'UA-…', '…');
 ga('send', '…');
</script>

Il convient de conditionner ce script javascript avec le test suivant :

if (typeof cibcOptOut != 'function' || cibcOptOut()!="oui"){
… le script tiers …
}

C’est-à-dire pour Google Analytics (seul un extrait du code figure) :

<script>
if (typeof cibcOptOut != 'function' || cibcOptOut()!="oui"){

 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;…
 (…)
 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

 ga('create', 'UA-…', '…');
 ga('send', '…');

}
</script>

Attention :
a) Dans le cas où le code javascript de Google Analytics figure entre les balises <head> et </head>, il convient d’ajouter, avant le code javascript de Google Analytics, la ligne suivante :
[(#PLUGIN{cibc}|oui) #CIBC_AVERTISSEMENT ]
En effet, il faut que le code de Google Analytics figure après celui du plugin CIBC.
Si le plugin “Google Analytics” est utilisé, la ligne précitée doit figurer avant #INSERT_HEAD.

b) Dans le cas où l’on adapte les squelettes (cf. exemple ci-dessus), il est inutile de mettre des liens de désactivation dans la page « En savoir plus ».

En cas de problème

a) Vérifier la configuration du plugin (cf. documentation)

b) Adapter certains squelettes du site (cf. annexe 4.4 de la documentation).
Exemples :
https://contrib.spip.net/cibc-banniere-d-avertissement-pour-les-cookies?debut_comments-list=10#forum478065
https://contrib.spip.net/cibc-banniere-d-avertissement-pour-les-cookies?debut_comments-list=10#forum478849

c) S’assurer que le site charge une seule fois la librairie jquery
Exemples :
https://contrib.spip.net/cibc-banniere-d-avertissement-pour-les-cookies#forum485378
https://contrib.spip.net/cibc-banniere-d-avertissement-pour-les-cookies?debut_comments-list=10#forum479271

d) Si le style de la bannière ne convient pas, recopier dans le dossier “squelettes”, du site, le fichier de style (sélectionné dans la configuration du plugin) cibc/_css/cibc...css et modifier cette copie.

Version 1.1 du plugin

Ajout de la fonctionnalité suivante, qui concerne uniquement le cas où l’on a sélectionné le mode de désactivation des cookies “La page ’En savoir plus’ ou ’Refuser’ indique comment désactiver les cookies” et que l’on met des liens de désactivation dans l’article « En savoir plus » :
Si le texte de l’article « En savoir plus » contient <div id="cibcSavoirPlus"></div> alors même si l’URL de l’article « En savoir plus » évolue, le plugin pourra quand même l’identifier grâce au div précité.

La version du 08/12/14 de la documentation ajoute des exemples de configurations (au chapitre 3.7) et un tableau des avantages et inconvénients des différents modes de désactivation des cookies (au chapitre 3.5).

updated on 19 June 2020

Discussion

25 discussions

  • 5

    Bonjour,

    Merci pour cet excellent plugin que j’ai installé sur mon propre site. Je viens de l’installer également sur www.superu-saintjeandemonts.fr et le bandeau n’apparaît pas bien que le code soit visible dans le code source. Je crois avoir tout tenté et je m’arrache les cheveux :
    – j’ai désactivé tous les plugins,
    – j’ai enlevé mon css,
    – j’ai regardé sur une autre page que la page d’accueil qui contient d’autres js directement dans le code…
    Et toujours pas de bandeau.
    J’ai attendu aussi, pour voir si j’avais le même problème que Mickamol, mais non… il n’apparaît jamais.

    Au cas où, bien que je les ai tous désactivés et que ça n’a rien changé, j’utilise sur un Spip 3.0.17 :
    – Accès restreint,
    – Champs extras
    – Contact libre
    – Liens explicites
    – Mosaïque,
    – Oembed
    – Saisies pour formulaires
    – Yaml
    J’utilise également une autre galerie d’images que j’ai implémentée, mais je l’ai désactivée aussi sans que ça ne change rien.

    Je ne sais plus où chercher, si quelqu’un peut m’aider… D’avance merci.
    Cordialement,
    Karen

    • La page du site en question charge 3 fois la librairie jquery (une fois celui de SPIP, une fois celui pris sur le site de jquery et une fois celui pris sur le site de Google).

      Il faut supprimer (dans le squelette concerné qui est propre au site) la ligne suivante :
      <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

      Ainsi que la ligne suivante :
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

    • Bonsoir et merci pour votre réponse rapide !

      J’avais pensé que c’était le souci, compte-tenu de ce que j’ai lu pour Mickamol, et j’avais testé en supprimant la totalité des appels au jquery et fotorama, et en vidant le cache, mais ça ne change absolument rien :-(

      Je sais que mes appels ne sont pas très propres, mais je n’avais pas trouvé de meilleure solution car fotorama.js provoquait un conflit pour d’autres choses, que je ne pouvais résoudre qu’en appelant à nouveau le jquery derrière. Bref, ce bricolage n’est pas le sujet puisqu’en supprimant ces 3 appels le problème persiste.

    • Pour trouver la source du problème :
      -  Il ne faut pas supprimer les 3 appels, mais uniquement les 2 lignes que j’ai indiquées.
      -  Il faut désactiver les plugins ajoutés (sauf cibc).
      -  Vider le cache de SPIP et le cache du navigateur (pour supprimer les cookies) puis tester.
      -  Si cela fonctionne, alors rajouter un plugin.
      -  Vider le cache de SPIP et le cache du navigateur (pour supprimer les cookies) puis tester.
      -  Etc.
      -  Si cela ne fonctionne pas, on saura que cela provient du dernier plugin ajouté.

    • Bonjour,

      Oui, un grand merci ! Effectivement en supprimant ces 2 lignes ça a enfin fonctionné. L’appel au jquery de Google était totalement inutile, en revanche je ne peux pas me passer du jquery-1.10.2 sans quoi ma galerie Fotorama ne peut pas fonctionner. Auriez-vous une piste pour que le puisse résoudre ce conflit ?

    • Cela ne concerne pas le plugin CIBC.

    Reply to this message

  • 2

    Bonjour
    J’ai installé votre plugin sur mon site.
    Le problème c’est que lorsque je clique sur le bouton en savoir plus il me rajoute à la fin du lien “&lang”.
    J’ai donc une erreur 404. Pouvez-vous me dire comment remedier à ce probleme.
    Merci

    • Bonjour,
      Cela dépend du type d’URL renseignée, pour le bouton “En savoir plus”.
      La version du 28/10/2015, téléchargeable sur la présente page, devrait régler ce problème.
      Merci de me le confirmer.

    • Merci
      La version du 28/10/205 a résolu le problème
      Bonne journée

    Reply to this message

  • 1
    Riccardo

    Merci pour le plugin, ça va m’aider vraiment beaucoup!!
    J’ai traduit le fichier de la langue en italien... Le voilà!

    Traduzione in italiano...

    http://www.notte.altervista.org/spip/cibc_it.zip

    • Merci pour cette traduction. Je viens de l’ajouter dans la version 1.2.0 de CIBC (qui figure dans la présente page).

    Reply to this message

  • 4
    Polar oïd

    Bonjour, merci pour cet outils de mise en conformité avec les nouvelles règles applicables à l’usage des cookies.

    Un point au sujet de la documentation qui indique ceci au segment 3.6.3.1du .pdf

    Par exemple (en précisant le numéro d’article dansid_article=...) :

    <div id="cibcOptOutCIBC">[Refuser->spip.php?page=ar
    ticle&id_article=...&cibcOptOut=oui]</div>
    <div id="cibcOptInCIBC">[Accepter->spip.php?page=ar
    ticle&id_article=...&cibcOptOut=non]</div>

    Le plugin masque automatiquement l’un des deux liens en fonction de la valeur actuelle du cookie de consentement.

    Je ne parviens pas à obtenir ce comportement de présentation des liens en fonction de la variable oui ou non. Je suis en 2.1 et j’ai testé le code dans un squelette dédié ainsi que dans un article, le résultat est identique...

    Quelqu’un aurait-il rencontré le même problème et trouvé une solution ?

    • Le lien doit avoir exactement la même adresse que celle, renseignée dans la configuration, pour la page “En savoir plus” (et être suivi du paramètre cibcOptOut).

    • Pour mémoire, de manière générale, lorsque l’on renseigne un lien interne au site, par exemple dans le texte d’un article, l’adresse doit être relative et non pas absolue.

    • franck t.

      Bonjour,

      J’étais dans la même situation et en spécifiant l’adresse de la page “en savoir plus” dans la page de configuration du plugin, tout marche enfin. En revanche, mon site étant multilingue, j’ai deux articles différents pour afficher les informations (un en français, un en anglais) et comme le champ pour l’url de la page “en savoir plus” n’accepte pas , je n’arrive pas à faire marcher les boutons refuser/accepter dans les 2 langues...

      Vous auriez une solution à ce problème ? Merci d’avance.

    • Bonjour,
      La version 1.2.0 de CIBC (qui figure dans la présente page) ajoute automatiquement le paramètre de langue à la fin de l’adresse de la page « en savoir plus ».
      Avec cette vers 1.2.0, une solution consiste à avoir une seul page « en savoir plus » qui utilise des blocs multilingues (au sens SPIP).

    Reply to this message

  • 1
    jpdollo

    Bonjour

    Je ne suis pas sur SPIP. Est-il possible d’installer ce plugin

    Merci

    Reply to this message

  • 1

    Bonjour,

    Le plugin fonctionne sauf que rien n’apparait sur la page d’accueil.
    Je viens de l’installer sur le site : http://www.ecal-vgp.fr/

    Voyez-vous une explication à ce beug?

    Merci d’avance.

    • Sur le site en question, le bandeau apparaît ... au bout d’un certain temps.
      Cela provient du fait que le site en question charge un grand nombre de fichiers javascript avec beaucoup de doublons. Par exemple /prive/javascript/jquery.js (247 Ko) est chargé deux fois, ce qui n’est pas normal. Le bandeau révèle ce problème, mais il n’en est pas la cause.

    Reply to this message

  • 1

    Bonjour,

    je viens d’installer le plugin seulement lors du refus cela ne coupe pas les cookies analytics.

    Comment faire pour résoudre cela.

    Mon site est : adgence.fr

    Je vous ci-joint ma config.

    Merci d’avance

    • Il convient d’adapter les squelettes concernés en suivant le chapitre « Exemple d’adaptation de squelette si on utilise Google Analytics » qui figure dans la présente page.

      A noter que le site adgence.fr utilise une autre version de Google Analytics :

              var _gaq = _gaq || [];
              _gaq.push(['_setAccount', 'UA-...]);
              _gaq.push(['_trackPageview']);
              (function() {
                      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
                      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
                      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
              })();

      Aussi, il convient de conditionner ce script javascript avec le test suivant :

      if (typeof cibcOptOut != 'function' || cibcOptOut()!="oui"){
      … le script précité …
      }

    Reply to this message

  • La version du 08/12/14 de la documentation ajoute des exemples de configurations (au chapitre 3.7) et un tableau des avantages et inconvénients des différents modes de désactivation des cookies (au chapitre 3.5).

    Reply to this message

  • 4

    Bonjour

    Le plugin est vraiment très intéressant, merci pour ce développement.
    J’ai un souci de comportement, je ne sais pas si c’est moi qui me plante ou si c’est le plugin qui ne réagis pas bien.

    Je souhaiterai que la bannière s’affiche à la première connexion, et si les personnes continuent de naviguer sur le site , cela vaut acceptation. Je choisis donc la poursuite sur le site vaut acceptation.
    -  > là ok, la bannière disparaît et les cookies s’installent (j’en ai qu’un, c’est le google analytics)

    Par contre, si un internaute veut en savoir plus, j’ai fait une page avec la bonne URL et le texte préconisé pour le google analytics (lien relatif et non absolu pour la page comme indiqué).
    Sauf que quand la personne vient sur cette page, le cookie de google s’installe par défaut (comme j’ai autorisé au dessus).
    Si la personne clique sur le premier lien (correspondant à cibcOptOutGA), le cookie google est toujours présent sur la suite de sa navigation. est-ce normal ? est-ce que le traçage est bien désactivé du coup ?
    Si je reviens ensuite sur cette page, j’ai toujours les 2 liens qui s’affichent par contre (il ne masque pas automatiquement le lien en fonction de la valeur du cookie, comme indiqué dans la doc). (quelquesoit le navigateur utilisé)

    C’est pour ça que je me demande si ça fonctionne correctement... Merci d’avance de ta réponse !

    PS, j’ai bien mis dans le script cibc correspondant à google dans mon code

    <script>
    if (typeof cibcOptOut != 'function' || cibcOptOut()!="oui"){
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    
      ga('create', 'UA-XXX-X', 'auto');
      ga('send', 'pageview');
    }
    </script>
    • D’après le commentaire, les squelettes semblent avoir été adaptés. Aussi, il est inutile de mettre un lien dans la page “En savoir plus”.

      Quel mode de désactivation des cookies a été sélectionné dans la configuration du plugin ?

    • Bonjour
      Merci de ta réponse

      Oui ce sont des squelettes adaptés.

      Pour le mode de désactivation, si je mets
      Désactiver la pose de cookies dans l’attente de l’acceptation (1).
      le cookie Google s’installe quand même... d’où l’idée pour moi de mettre dans la page En savoir plus les liens pour Google ?

    • J’ai effectué le test suivant, avec le mode “Désactiver la pose de cookies dans l’attente de l’acceptation”, sur un site dont les squelettes utilisent “l’exemple d’adaptation de squelette si on utilise Google Analytics” (qui figure à la fin du présent article) :

      -  Je supprime les cookies du navigateur ainsi que l’historique de navigation
      -  Je ferme le navigateur et je l’ouvre à nouveau
      -  J’arrive la première fois sur le site

      Le résultat constaté est le suivant :
      -  La bannière s’affiche.
      -  Le cookie de consentement n’est pas déposé.
      -  Aucune info n’est envoyée à Google Analytics.
      -  Aucun cookie de Google Analytics n’est déposé.

      Remarque : la documentation précise que les possibilités de liens concernent uniquement le mode de désactivation des cookies intitulé : “La page ’En savoir plus’ ou ’Refuser’ indique comment désactiver les cookies”. Comme le mode utilisé est “Désactiver la pose de cookies dans l’attente de l’acceptation”, il est normal que le plugin ne masque pas automatiquement les liens en fonction de la valeur du cookie.

    • Dans le cas où le code javascript de Google Analytics figure entre les balises <head> et </head>, il convient d’ajouter la ligne suivante

      [(#PLUGIN{cibc}|oui) #CIBC_AVERTISSEMENT ]

      avant le code javascript de Google Analytics.

      En effet, il faut que le code de Google Analytics figure après celui du plugin CIBC.

    Reply to this message

  • 1

    Bonjour,

    Le champ d’adresse de la zone «Comportement du bouton» permet de saisir une url.

    Y aurait-il une astuce pour utiliser les raccourcis SPIP du style : art23, mot12, etc., ce qui permettrait de ne pas casser une url «mentions-legales» si elle était modifiée en «les-mentions-légales» ?

    Merci pour cet outil ;-)
    françois

    • Je viens d’ajouter une fonctionnalité supplémentaire dans le fichier ZIP ci-joint (et j’ai modifié la documentation) :

      Si le texte de l’article « En savoir plus » contient :

      <div id="cibcSavoirPlus"></div>

      alors même si l’URL de l’article « En savoir plus » évolue, le plugin pourra quand même l’identifier grâce au div précité.

    Reply to this message

Ajouter un commentaire

pre-moderation

Warning, your message will only be displayed after it has been checked and approved.

Who are you?
[Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom