Nous allons voir comment créer une barre d'acceptation des cookies sur votre installation WordPress. Depuis l'adoption de la directive 2009/136/CE, l'obligation de recueil du consentement préalable de l'internaute en matière de dépôt de cookies, s'impose aux éditeurs de sites internet.

Que dit la CNIL ?

"Le consentement doit se manifester par une action positive de la personne préalablement informée des conséquences de son choix et disposant des moyens de l'exercer."

Un bouton Accepter, J'accepte, Je comprends ou OK permet une action positive.

L'internaute qui se rend sur le site d'un éditeur (page d'accueil ou page secondaire du site) doit être informé, par l'apparition d'un bandeau.

Un bandeau ou une barre, appelé ça comme vous voulez... suffisamment visible pour le visiteur et relativement discrète pour la santé graphique du site.

Dans la mesure où le consentement ne doit pas être ambigu, ce bandeau ne doit pas disparaître tant que la personne n'a pas poursuivi sa navigation, c'est-à-dire tant qu'elle ne s'est pas rendue sur une autre page du site ou n'a pas cliqué sur un élément du site.

Exemple de texte que l'on retrouve habituellement : En poursuivant votre navigation sur ce site, vous acceptez l’utilisation de cookies ...
Cette barre peut éventuellement disparaitre si l'utilisateur visite une autre page du site ou bien clique sur une image, un lien, un bouton, etc.

À cela, il faut ajouter un lien [En savoir plus] soit en agrandissant la barre principale, à la manière du plugin CookieConsent soit en pointant le lien vers une page d'information sur l'utilisation des cookies.

Projet Barre Cookies

Les personnes doivent disposer de solutions leur permettant de refuser l'insertion des cookies.

Un bouton refuser devra être envisagé pour respecter ce droit.

Projet Barre Cookies II

Le consentement à être suivi peut être oublié par les personnes qui l'ont manifesté à un instant donné, la CNIL estime nécessaire de limiter dans le temps la portée de ce dernier.

La CNIL recommande une durée maximale de 13 mois pour un consentement au dépôt des Cookies. À l'issu de ce délai, l'utilisateur devra renouveler son approbation. Il faut donc prévoir une durée équivalente dans le script d'affichage de la barre.

Création de la barre

Nous utiliserons 2 fichiers (JavaScript + Feuille de style CSS) ainsi qu'un petit code pour les options et les appels JS/CSS.

Mise en place

Téléchargez le dossier cookieconsentbar.zip

Décompressez le fichier zip et placez le dossier cookieconsentbar à la racine de votre thème.

Télécharger

Le Code

Placez le code ci-dessous dans le fichier function.php de votre thème.

// Place the following code in your theme's functions.php file
// Cookie Consent Bar
function cookieconsentbar(){
        ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo( 'template_url' ); ?>/cookieconsentbar/sb.cookieconsentbar.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo( 'template_url' ); ?>/cookieconsentbar/sb.cookieconsentbar.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$.sbCookieConsentBar({
			message: 'Ce site utilise des cookies pour optimiser votre expérience de navigation. En continuant votre visite sur notre site, vous consentez à l’utilisation de Cookies.',
			acceptButton: true,
			acceptText: 'Accepter',
			declineButton: false,
			declineText: 'Refuser',
			policyButton: false,
			policyText: 'En savoir plus',
			policyURL: '/cookies/',
			acceptOnContinue: false,
			effect: 'slide',
			element: 'body',
			fixed: true,
			bottom: true
				});
			});
		</script>
     <?php
}
add_action('wp_head','cookieconsentbar',1,20);

Votre barre est installée.

Réglages

Options JS

Message et boutons

  • message
  • acceptButton & acceptText
  • declineButton & declineText

message: Personnalisez le texte, par exemple : En poursuivant votre navigation sur ce site, vous acceptez l’utilisation de cookies à des fins statistiques.

acceptButton: Mettre true pour afficher le bouton de validation/Accepter.
acceptText: Texte du bouton de Validation/Accepter.

acceptButton: Mettre true pour afficher le bouton de Refus/Désactiver.
acceptText: Texte du bouton de Refus/Désactiver.

Information sur les cookies

  • policyButton & policyText
  • policyURL
  • acceptOnContinue

policyButton: Mettre true pour afficher le lien En savoir plus.
policyText: Texte du lien En savoir plus.

policyURL: URL du lien En savoir plus.
Soit un lien direct http:// soit une page de votre site /mapage/

    Exemple de page :

  • Politique de confidentialité
  • Usage des Cookies
  • Information sur les cookies
  • ...

acceptOnContinue: Mettre true pour accepter silencieusement des cookies lorsque le visiteur se déplace vers une autre page.

Design & Effets

  • effect
  • element
  • fixed
  • bottom

effect: Options d'effets jQuery : slide, fade, hide.

element: Élément à ajouter/préfixe "sbCookieConsentBar". Pour class ou pour id.

fixed: Mettre true pour ajouter la position fixed à la barre. Par défaut le CSS doit fixer la position.

bottom: Forcer le CSS a positionner la barre en bas du site avec fixed:true.

Options CSS

Vous pouvez changer l'aspect et les couleurs (Color Picker Master) en modifiant la feuille de style.

  • Barre
  • Texte
  • Lien
  • Bouton Accepter
  • Bouton Refuser
  • En savoir plus

#cookie-consent-bar {
	background:#f6f6f6; 
	min-height:24px; 
	line-height:24px; 
	color:#595959; 
	text-align:center; 
	padding:3px 0; 
	width:100%; /* opacity bar :
	opacity: 0.6; 
	filter: alpha(opacity=60); */
	}
#cookie-consent-bar:hover { /* opacity bar :
	opacity: 1.0;
	filter: alpha(opacity=100); */
	}
#cookie-consent-bar.fixed {
	position:fixed; 
	bottom:0; 
	left:0; 
	z-index:100;
	}

#cookie-consent-bar p {
	margin:0; 
	padding:0 10px; 
	font-size:12px;
	}

#cookie-consent-bar a {
	color:#ffffff; 
	display:inline-block; 
	border-radius:3px; 
	text-decoration:none; padding:0 6px;
	}

#cookie-consent-bar .sb-enable {
	background:#46aa51;
	margin:0 8px;
	}
#cookie-consent-bar .sb-enable:hover {
	background:#6ec478;
	}

#cookie-consent-bar .sb-disable {
	background:#e41b40;
	margin:0 8px;
	}
#cookie-consent-bar .sb-disable:hover {
	background:#e93f5e;
	}

#cookie-consent-bar .sb-policy {
	text-decoration:underline;
	margin:0 2px;
	}
#cookie-consent-bar .sb-policy:hover {
	text-decoration:underline;
	}

Refuser les cookies

Si un utilisateur choisit de désactiver les cookies (Si vous leur donnez cette possibilité en affichant le bouton Refuser), vous devez vous assurer que les scripts tels que Google Analytics et autres, seront bien désactivés.

Ceci peut être réalisé en enroulant le code dans un simple if.

<script type="text/javascript">
			if(jQuery.sbCookieConsentBar('cookies')){
				//Inserer Google Analytics par exemple :
			}
		</script> 

Exemple de code complet

<script type="text/javascript">
			if(jQuery.sbCookieConsentBar('cookies')){
				//Inserer Google Analytics par exemple :
				(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-XXXXXXXX-X', 'auto');
				ga('send', 'pageview');
			}
		</script> 

Réglages supplémentaires

Si l'utilisateur accepte le dépôt de cookies, le temps que mettra la barre pour réapparaitre est fixé à 1 an = 365 jours. Si vous souhaitez augmenter ce temps et le passer à 13 mois ( durée maximale recommandée par la CNIL ) ou diminuer ce temps pour quelques raisons que ce soit. Vous devrez ajouter et modifier cette option dans le premier code.

 

expireDays: 365,

Site

Si vous souhaitez porter ce code sur une installation autre que WordPress.

Téléchargez le dossier cookieconsentbar.zip

Décompressez le fichier zip et placez le dossier cookieconsentbar à la racine de votre Site.

Télécharger

Modifiez le code : le lien de l'appel CS et JS.

Remplacez< ? php bloginfo( 'template_url' ); ? > par http://www.adressedemonsite.com/

Placer le code dans l'en-tête de votre site au dessus de la balise < / head >

<link rel="stylesheet" type="text/css" href="http://www.adressedemonsite.com/cookieconsentbar/cookieconsentbar.css" />
		<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<script type="text/javascript" src="http://www.adressedemonsite.com/cookieconsentbar/cookieconsentbar.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$.sbCookieConsentBar({
			message: 'Ce site utilise des cookies pour optimiser votre expérience de navigation. En continuant votre visite sur notre site, vous consentez à l’utilisation de Cookies.',
			acceptButton: true,
			acceptText: 'Accepter',
			declineButton: false,
			declineText: 'Refuser',
			policyButton: false,
			policyText: 'En savoir plus',
			policyURL: '/cookies/',
			acceptOnContinue: false,
			effect: 'slide',
			element: 'body',
			fixed: true,
			bottom: true
				});
			});
		</script>