Mode opératoire pour la mise en conformité d'un site avec les préconisations de la CNIL
Le dispositif comprend deux fichiers à intégrer dans le corps de vos pages. Le prérequis est que la bibliothèque JQuery soit installée (le script fonctionne à partir de la version 1.3.2 de JQuery ).
Les deux fichiers sont les suivants:
- Le fichier javascript: cnil.js: ce script vérifie si le cookie nommé "cookie-cnil-parisfr" existe pour le domaine "paris.fr"
- Le fichier css : cnil.css : contient les styles de la barre et de la boite de dialogue.
Le fonctionnement est le suivant:
- Si le cookie nommé "cookie-cnil-parisfr" n'existe pas pour le domaine "paris.fr" alors la bannière permettant à l'internaute d'accepter l'utilisation des cookies et d'obtenir la page d'information est affichée:
- Si l'internaute ne valide pas en cliquant sur le lien " >> Accepter" aucun des scripts de type outils d'analyses et de partage pour les réseaux sociaux ne doivent être proposés aux internautes. Pour cela il faut utiliser la fonction $.(cookie), décrite plus bas, permettant de tester la présence du cookie "cookie-cnil-parisfr" inclue dans le script afin d'empêcher le chargement du ou des scripts;
- Si l'internaute valide le cookie "cookie-cnil-parisfr" est posé pour un an dans le navigateur le l'internaute.
A - Intégration des fichiers
Le mode d'inclusion diffère en fonction de votre type de serveur web :
- Votre serveur web est NGINX
Si la bibliothèque javascript JQuery n'est pas présente dans votre site il faudra l'ajouter.
<script type="text/javascript" src="/cnil_tools/jquery-1.11.1.min.js"></script>
Ensuite inclure le script et la css.
<script type="text/javascript" src="/cnil_tools/cnil.js"></script> <link href="/cnil_tools/cnil.css" rel="stylesheet">
- Votre serveur web est APACHE
Si la bibliothèque JQuery n'est pas présente, vous devez l'ajouter à votre page en utilisant le code ci-dessous à positionner avant la balise </body> en fin de fichier.
<script type="text/javascript" src="https://teleservices.paris.fr/cnil_tools/jquery-1.11.1.min.js"></script>
Ensuite inclure les deux inclusions de script et de css avant la balise </body> et à la suite de la bibliothèque Jquery.
<script type="text/javascript" src="https://teleservices.paris.fr/cnil_tools/cnil.js"></script> <link href="https://teleservices.paris.fr/cnil_tools/cnil.css" rel="stylesheet">
B - Comment tester si le cookie "cookie-cnil-parisfr" est posé ?
Le fait d'ajouter le script dans le site n'est pas suffisant. Il faut pouvoir tester si le cookie est présent afin de pouvoir déclencher le chargement des scripts de type analytique ou partage de réseaux sociaux.
La fonction à utiliser pour tester la présence du cookie "cookie-cnil-parisfr" est $.cookie('cookie-cnil-parisfr').
Le test a réaliser est le suivant:
if( $.cookie('cookie-cnil-parisfr') ){ ...code Google Analytics ou Facebook ou Twitter... ;} else { ...un éventuel traitement... ;}
Exemple d'intégration pour un code Google Analytics:
<script type="text/javascript" src="js/cnil.js"></script>
<link href="js/cnil.css" rel="stylesheet">
<script type="text/javascript">
jQuery(function ($) {
if( $.cookie('cookie-cnil-parisfr') ){
/*** début code Google Analytics ***/
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '${ganalytics_code}']);
_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);
})();
/*** fin code Google Analytics ***/
}
});
</script>
C - Information sur le traitement des données personnelles
Il est aussi à noter que la gestion des cookies n’est pas la seule exigence de la mise en demeure de la CNIL, mais que les sites disposant d'un formulaire permettant à l'internaute de saisir des données comme par exemple d’un champ d’inscription à une newsletter doivent ajouter un texte sous le champ de saisie. Pour faciliter l'insertion dans le site il peut être mis en fin de page.
Voici un exemple de texte.
« Le responsable du traitement de vos données personnelles, est Directeur de l'information et de la communication (DICOM) de la Mairie de Paris,-Département Paris-Numérique, 4 rue de Lobau 75004 Paris. Ce traitement a pour unique finalité de s’abonner et de recevoir les newsletters suivantes rédigées et envoyées par le Département Paris Numérique. Le Département Paris Numérique s’engage en contrepartie à protéger vos données et à les utiliser dans l’unique visée dans lesquelles celles-ci nous ont été confiées. Aucune donnée ne sera transmise à un tiers. Vous avez la capacité d’accéder, de modifier ou d’effacer définitivement vos données en suivant le lien fourni dans chaque newsletter- ou en en effectuant la demande auprès de DICOM, département paris numérique- 4 rue de Lobau Paris 75004. »
D - LUTECE - Mise en place pour la version 5.X
- Utilisation du plugin GTOOLS
Si votre site est en version 5.X de LUTECE, vous pouvez utilisez le plugin plugin GTOOLS à partir de la version 1.2.3. Ce plugin permet d'ajouter dans la version "NGINX" les scripts et test nécessaire sur le tag Google Analytics.
- Paramétrage du plugin EXTEND / module EXTEND-OPENGRAPH (fonctions réseaux sociaux Facebook, Twitter,Google+ )
Pour effectuer le test sur la présence du cookie avec la fonctionnalité ExtendOpengraph, il faut aller en back-office, utiliser le menu "Gestion des réseaux sociaux" et modifier le contenu du champs "Contenu du body" ou "Contenu du pied de page" afin de tester la présence du cookie "cookie-cnil-parisfr".
- Facebook :
<!-- facebook -->
<div id="fb-root"></div>
<script>
** Test la présence du cookie **
jQuery(function ($) {
if( $.cookie('cookie-cnil-parisfr') ){
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}
})();
</script>
<div class="fb-like" data-href="http://dev.lutece.paris.fr/site-demo/" data-send="true" data-layout="button_count" data-show-faces="true"></div>- Google + :
<script type="text/javascript">
jQuery(function ($) {
if( $.cookie('cookie-cnil-parisfr') ){
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
}
});
</script>- Twitter (share) :
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://dev.lutece.paris.fr" data-text="Checkout this site to see LUTECE CMS in action #CMS" data-via="LuteceNews" data-lang="en" >Tweet</a>
<script>jQuery(function ($) {
if( $.cookie('cookie-cnil-parisfr') ){
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');}else{$(".twitter-share-button").remove()
}
});</script>- Twitter (follow) :
<a href="https://twitter.com/LuteceNews" class="twitter-follow-button" data-show-count="false" data-lang="fr">follow @LuteceNews</a>
<script>
jQuery(function ($) {
if( $.cookie('cookie-cnil-parisfr') ){
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');}else{$(".twitter-follow-button").remove()
}
});
</script>