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 :

  • les différentes versions de SPIP
  • le responsive web design
  • les sites qui n’utilisent pas la balise #INSERT_HEAD sur le site public
  • le multilinguisme

Compatibilité

CIBC version 1.8 est compatible avec SPIP 3.0, 3.1, 3.2, 4.0, 4.1, 4.2.
CIBC version 1.8 est compatible avec PHP 7.0, 7.1, 7.2, 7.3, 7.4, 8.0, 8.1.

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 :
cibc : bannière d’avertissement pour les cookies
cibc : bannière d’avertissement pour les cookies

c) S’assurer que le site charge une seule fois la librairie jquery
Exemples :
cibc : bannière d’avertissement pour les cookies
cibc : bannière d’avertissement pour les cookies

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.

Dernière version du plugin

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

La version du 22/06/2021 apporte la compatibilité avec PHP 7.2, 7.3 et 7.4.

La version 1.6 apporte la compatibilité avec SPIP 4.0.

La version 1.7 apporte la compatibilité avec PHP 8.0 et 8.1, ainsi que la compatibilité avec SPIP 4.1.

La version 1.8 apporte la compatibilité avec SPIP 4.2.

Discussion

27 discussions

  • 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

  • 4

    C’est un excellent tutoriel. question : est-ce compatible avec une version 1.9.2 spip ?

    Répondre à ce message

  • 1

    Peux-tu le mettre sur la zone spip ? merci

    • Je ne souhaite pas mettre le plugin CIBC sur la zone. Pour mémoire, une modification peut remettre en cause la compatibilité, la stabilité, la sécurité ou les performances d’un plugin.

    Répondre à ce message

  • 2

    Bonjour,
    Je suis en 2.1.26 et ne parviens à afficher la page de configuration que par « ?exec=cibc_config ».
    Je n’ai pas le sous-menu du bouton configuration, même en ayant vidé les caches.
    A+
    Christophe

    • Bonjour,
      Il s’agissait d’une incompatibilité avec le plugin « bandeau ». La version cibc_141028.zip, jointe au présent article, règle ce problème. Une fois installée, pour s’assurer que cette évolution est prise en compte, il convient d’actualiser les plugins dans l’espace privé (ecrire/?exec=admin_plugin&actualise=1).

    • chantoine

      Merci,
      c’est réglé !

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

modération a priori

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

Qui êtes-vous ?
[Se connecter]

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