<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body id="body">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Afficher / Masquer la navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Nom du site</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Lien <span class="sr-only">(actuel)</span></a></li>
<li><a href="#">Lien</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Lien</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Liste <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Lien 1</a></li>
<li><a href="#">Lien 2</a></li>
<li><a href="#">Lien 3</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<div class="row">
<h2>Bandeau de notification des cookies (loi européenne)</h2>
<p>En application de la directive européenne dite " paquet télécom ", les internautes doivent être informés et donner leur consentement préalablement à l'insertion de traceurs. Ils doivent disposer d'une possibilité de choisir de ne pas être tracés lorsqu'ils visitent un site ou utilisent une application. Les éditeurs ont donc l'obligation de solliciter au préalable le consentement des utilisateurs.</p>
<ul>
<li><a href="http://www.cnil.fr/vos-obligations/sites-web-cookies-et-autres-traceurs/que-dit-la-loi/" target="_blank">Cookies & traceurs : que dit la loi ?</a></li>
<li><a href="http://www.cnil.fr/vos-obligations/sites-web-cookies-et-autres-traceurs/que-dit-la-loi/bandeau-cookie/" target="_blank">Bandeau cookie</a></li>
</ul>
<p>Le système ici proposé est simple et en accord avec la loi. Si le cookie "cookie_avert" n'existe pas, on affiche le bandeau qui avertit l'utilisateur. S'ensuit 3 possibilités :</p>
<ul>
<li>Soit l'utilisateur accepte en cliquant sur le bouton "j'accepte", auquel cas le cookie est créée avec la valeur "set", puis le bandeau disparait et on charge et active google analytics.</li>
<li>Soit l'utilisateur continue sa navigation, et accepte implicitement, auquel cas le bandeau disparait au bout de 10 secondes, et le cookie est créée avec la valeur "set", on charge et active ensuite google analytics.</li>
<li>Soit l'utilisateur refuse en cliquant sur le bouton "je refuse, auquel cas le cookie est créée avec la valeur "not", le bandeau disparait et google analytics n'est pas chargé.</li>
</ul>
<p>Si l'utilisateur clique sur un des deux boutons (accepter, refuser), le bandeau n'apparaitra plus pour une durée de 365 jours. Si par contre l'acceptation est implicite, le bandeau réapparait à chaque rafraichissement de la page.</p>
<p>Le plugin utilisé pour interagir avec google analytics provient de Shamasis Bhattacharya (<a href="http://www.shamasis.net/projects/ga/"target="_blank">http://www.shamasis.net/projects/ga/</a>), et la doc est disponible sur Github (<a href="https://github.com/shamasis/jquery-ga" target="_blank">https://github.com/shamasis/jquery-ga</a>).</p>
<p>Le script google analytics ne sera chargé ensuite automatiquement que si l'utilisateur a explicitement accepté précédemment (bouton j'accepte).</p>
</div>
</div>
<footer class="text-center well">Réalisé par <a href="http://www.vision-design.fr">vision-design.fr</a></footer>
</body>
body{ top:0; -moz-transition: top 0.35s ease-in-out; -webkit-transition: top 0.35s ease-in-out; -o-transition: top 0.35s ease-in-out; -ms-transition: top 0.35s ease-in-out; transition: top 0.35s ease-in-out; }
#cookies-banner{ position:fixed; top:0; left:0; z-index:9999; width:100%; border-radius:0; padding:5px 10px; vertical-align:middle; margin:0; }
/* jQuery Google Analytics Plugin https://github.com/shamasis/jquery-ga - http://www.shamasis.net/projects/ga/ @version 2.0.2 */
(function(b){var d=window,c,f=function(a,b){return function(){a.apply(c,b)}},g=function(){var a;if(!c)throw"Tracker has not been defined";for(a in c)"_"===a.charAt(0)&&b.isFunction(c[a])&&(b.ga[a.substr(1)]=f(c[a],arguments))};b.ga={};b.ga.load=function(a,e){b.ajax({type:"get",url:("https:"===document.location.protocol?"https://ssl":"http://www")+".google-analytics.com/ga.js",cache:!0,success:function(){if(!d._gat||!d._gat._getTracker)throw"Tracker has not been defined";c=d._gat._getTracker(a);g();
b.isFunction(e)&&e(c);c._trackPageview()},dataType:"script",data:null})}})(jQuery);
// création du cookie
function createCookie(name, value, days) {
if(days){
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
}
else var expires = "";
document.cookie = name + "=" + value + expires + "; path=/";
}
// lecture du cookie
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i ++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
$(document).ready(function(){
// Notifications pour les cookies
var cookie_avert = readCookie("cookie_avert"),
g_analytics_id = "xxxxxx-x", // Id unique google analytics
domain_name = "www.domain-name.fr"; // nom de domaine du site
if(cookie_avert === null) { // si le cookie n'existe pas
banner_text = 'En poursuivant votre navigation sur ce site, vous acceptez l’utilisation de cookies à des fins de mesure d\'audience. <button class="btn btn-success btn-gradient btn-sm" id="accept-cookie">J\'accepte</button> <button class="btn btn-danger btn-gradient btn-sm" id="deny-cookie">Je refuse</button>';
$("body").prepend('<div id="cookies-banner" class="alert alert-warning text-center">' + banner_text + '</div>');
$("body").css({"top" : $("#cookies-banner").outerHeight() + "px", "position" : "relative"});
// si on accepte, le cookie avec la valeur 'set' est créée, sinon, la valeur 'not'
$("#accept-cookie, #deny-cookie").click(function(){
id_button = $(this).attr("id");
action_button = (id_button == "accept-cookie")? 'set' : 'not';
createCookie("cookie_avert", action_button, 365);
$("#cookies-banner").slideUp(350).remove();
$("body").css({"top" : "0", "position" : ""});
if(action_button == "set"){ // le cookie avec la valeur 'set' est créée (accept)
// on charge Google analytics
$.ga.load(g_analytics_id, function(pageTracker) {
pageTracker._setDomainName(host);
});
}
});
// si aucune action au bout de 10 secondes (implicite)
setTimeout(function(){
$("#cookies-banner").slideUp(350).remove();
$("body").css({"top" : "0", "position" : ""});
// on charge Google analytics
$.ga.load(g_analytics_id, function(pageTracker) {
pageTracker._setDomainName(host);
});
}, 10000); // 10 sec
}else if(cookie_avert == "set"){ // si le cookie existe avec la valeur 'set'
// on charge google analytics
$.ga.load(g_analytics_id, function(pageTracker) {
pageTracker._setDomainName(host);
});
}
});
