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

Dernière modification de cette page le 9 février 2019

Discussion

23 discussions

  • 1

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

    Répondre à ce 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).

    Répondre à ce message

  • 1
    jpdollo

    Bonjour

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

    Merci

    Répondre à ce 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.

    Répondre à ce 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é …
      }

    Répondre à ce 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).

    Répondre à ce 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.

    Répondre à ce 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é.

    Répondre à ce message

  • 1

    Pour un essai, j’ai installé le plugin CIBC sur un site Intranet. J’ai remarqué qu’avec IE 11, la bannière « en bas au centre » est alignée à gauche.

    • La bannière avec le style « en bas au centre » fonctionne très bien sous IE 11.

      Le phénomène évoqué provient d’un manque de connaissance du fonctionnement de IE 11.
      Il signifie que, dans les "Paramètres d’affichage de compatibilité" de IE 11, la case "Afficher les sites intranet dans Affichage de compatibilité" est cochée.

      Vu que le plugin CIBC vise plutôt les sites Internet, ce cas de figure ne devrait guère se produire.

    Répondre à ce message

  • 3

    Quand on configure CIBC pour un affichage « en bas au centre », on obtient la présence de caractères inattendus sous FireFox : '); et }

    • Je ne constate pas ce problème.

      • Quel texte a été renseigné dans le contenu de la bannière ?
      • A quel endroit apparaissent des caractères ?
      • Quelle est la version de Firefox utilisée ?
    • Le texte, renseigné dans le contenu de la bannière, est le texte par défaut.
      Les caractères apparaissent, dans la colonne centrale, en haut à droite.
      La version de Firefox utilisée est la version 3.6.27.
      Les plugins cisquel / ciparam sont utilisés et XITI est activé.

    • Les versions 3.6 de Firefox ne sont plus maintenues : https://support.mozilla.org/fr/kb/firefox-36-plus-maintenu

      Le phénomène observé ne concerne pas CIBC. Il concerne le squelette qui contient le script XITI.

    Répondre à ce message

Ajouter un commentaire

modération a priori

Attention, votre message n’apparaîtra qu’après avoir été relu et approuvé.

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom