Naar aanleiding van de nieuwe privacywetgeving (AVG) die vanaf 25 mei jl. is ingegaan zijn wij aan de slag gegaan met het anonimiseren en inzichtelijk maken van de gebruikersgegevens van onze website. Volgens de AVG moet je, zodra je tracking cookies plaatst, een duidelijke melding geven om voor je bezoekers inzichtelijk te maken welke cookies er worden geplaatst. In dit blog leggen we uit hoe we onze tracking cookies hebben aangepast aan de AVG.

Wat is AVG?

Algemene Verordening Gegevensbescherming (AVG) is de nieuwe Europese privacy wet die is opgesteld om de bescherming en privacy van persoonsgegevens te verbeteren en moet worden nageleefd door alle bedrijven en instanties. Door organisaties te dwingen voorzichtig om te gaan met data wil de Europese Unie gebruikers beschermen tegen verlies en diefstal van persoonsgegevens. Je leest er alles over op de website van de autoriteit persoonsgegevens.

Wat is een tracking cookie?

Een tracking cookie is een klein tekstbestand dat tijdens een bezoek aan een website wordt geplaatst om informatie te verzamelen. Deze informatie kan bij een later bezoek weer worden herkend door de website. Aan de hand van de pagina’s die worden bezocht kan kennis worden verkregen over de manier waarop je website wordt gebruikt.

Cookie implementatie volgens de AVG 

Zodra je tracking cookies plaatst op je website moet je volgens de nieuwe wet een duidelijke cookie melding geven om inzichtelijk te maken welke cookies er worden geplaatst. Je kunt hierbij denken aan: welk type cookie, de aanbieder, het doel en de vervaldatum. Volgens de AVG moet de gebruiker zelf de niet essentiële cookies kunnen uitzetten. Dit om de controle van de bezoeker, waar informatie over wordt opgeslagen, te vergroten.


duidelijke cookie melding geven om inzichtelijk te maken welke cookies er worden geplaatst


Google analytics tracking code 

Door het toevoegen van onderstaande regel aan de trackingcode zorg je ervoor dat het IP-adres van de bezoeker niet volledig wordt doorgegeven aan Google. Met deze regel code zet je het IP-masker aan voor een geanonimiseerde locatie. 

_gaq.push(['_gat._anonymizeIp', true]);


De code: 

Er wordt in het voorbeeld gebruik gemaakt van een Google Analytics script waarbij het eenvoudig is om een IP-masker toe te passen. Zodra de bezoeker geen toestemming geeft om statistische gegevens te verzamelen wordt hier het IP-masker aangezet om de privacy van de bezoeker te waarborgen. Hieronder een voorbeeld:

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-63158-1']);

if(getLocalCookieStatistics() > 0 ){
//User allowed tracking
}else{
_gaq.push(['_gat._anonymizeIp', true]);
}
_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);
})();


JavaScript 

Met behulp van de browsers LocalStorage functie wordt de cookievoorkeur opgeslagen en uitgelezen om de pop-up wel of niet te tonen. Er wordt hier gebruik gemaakt van de JQuery library van JavaScript om het proces te vereenvoudigen. Het systeem is zo gemaakt dat er in de toekomst meerdere voorkeurscategorieën gemaakt kunnen worden.

$(document).ready(function() {
	var moreInfoTabs = $('#moreInfoTabs').hide();
    
	$(document).on('click', '#moreInfoLink', function() {
    	moreInfoTabs.toggle();
    	$('#cookieInfo').toggleClass('moreInfo opened');
	});

	$(document).on('click', '#storeCookieButton', function() { 	 
    	setCookiePreference(getCookiePreferences());
    	closeCookie();
	});

	$(document).on('click', '#closeCookie', function() { 	 
    	setCookiePreference(getCookiePreferences());
    	closeCookie();
	});
    
});

//Initialize popup
if(!getLocalPreference()){
	openCookie();
}

function closeCookie(){
	$('#cookieInfo').css('display','none').addClass('closed').removeClass('open');
}

function openCookie(){
	$('#cookieInfo').css('display','block' ).addClass('open').removeClass('closed');

	if(getLocalCookieStatistics()){
    	$("#cookieStatistics").prop("checked", true);
	}else{
    	$("#cookieStatistics").prop("checked", false);
	}
}

function setCookieStatistics(){
	localStorage.setItem('cookieStatistics', 1);
}

function setCookiePreference(value){
	if (value['cookieStatistics'] > 0 ) {
    	localStorage.setItem('cookieStatistics', 1);
	}else{
    	localStorage.removeItem('cookieStatistics');
	}

	localStorage.setItem('setCookiePreference', 1);

}

function getCookiePreferences(){
	var cookiePreferencesList = [];

	$('.cookieCheckbox').each(function (i,val) {
    	if(this.checked){
        	cookiePreferencesList[this.id] = 1;
    	}
	});  
	return cookiePreferencesList;
}

function getLocalPreference(){
	return localStorage.getItem('setCookiePreference');
}

function getLocalCookieStatistics(){   
	return localStorage.getItem('cookieStatistics');
}

HTML

<div class="container cookieInfo">
	<div id="closeCookie" title="Sluit de cookie popup">X</div>
	<h2>Welkom! Deze website maakt gebruik van cookies</h2>
	<p class="description">Geef hier aan welke cookies we mogen plaatsen. De noodzakelijke en statistiek-cookies verzamelen geen persoonsgegevens en helpen ons de site te verbeteren.</p>
	<form>
    	<div class="form-group">
        	<label class="checkbox-inline" for="cookieNecessary">
            	<input type="checkbox" disabled="disabled" checked id="cookieNecessary" class="cookieCheckbox">Noodzakelijk
        	</label>
        	<label class="checkbox-inline" for="cookieStatistics">
            	<input type="checkbox" id="cookieStatistics" class="cookieCheckbox"> Statistieken
        	</label>
        	<div id="moreInfoLink">Meer info</div>
        	<input type="button" name="button" value="Ok" class="btn button" id="storeCookieButton">
    	</div>
    	<div id="moreInfoTabs">
        	<ul class="nav nav-tabs" role="tablist">
            	<li class="active">
                	<a href="#statement" aria-controls="statement" role="tab" data-toggle="tab">Statement</a>
            	</li>
            	<li>
                	<a href="#about" aria-controls="about" role="tab" data-toggle="tab">
                	Over Cookies</a>
            	</li>
        	</ul>
        	<div class="tab-content">
            	<div role="tabpanel" class="tab-pane active" id="statement">
                	<ul class="nav nav-stacked">
                    	<li class="active">
                        	<a href="#necessarySubTab" aria-controls="necessarySubTab" role="tab" data-toggle="tab" aria-expanded="true">Noodzakelijk (2)</a>
                    	</li>
                    	<li>
                        	<a href="#statisticsSubTab" aria-controls="statisticsSubTab" role="tab" data-toggle="tab" aria-expanded="false">Statistieken (3)</a>
                    	</li>
                    	<li>
                        	<a href="#marketingSubTab" aria-controls="marketingSubTab" role="tab" data-toggle="tab" aria-expanded="false">Marketing (0)</a>
                    	</li>
                	</ul>
                	<div class="sub tab-content">
                    	<div class="tab-pane table-responsive active" id="necessarySubTab">
                        	<b>Noodzakelijke cookies info</b>
                    	</div>
                    	<div class="tab-pane table-responsive" id="statisticsSubTab">
                        	<b>Statistische cookies info</b>
                         	 
                    	</div>
                    	<div class="tab-pane" id="marketingSubTab">
                        	<b>Mrketing cookiess info</b>
                    	</div>
                	</div>
            	</div>
            	<div class="tab-pane fade" id="about">
                	<b>Algemene Cookie info</b>
            	</div>
        	</div>
    	</div>
	</form>
</div>

SASS

#cookieInfo.open{
opacity: 1;
    height: auto;
}
#cookieInfo.open.moreInfo{
height:100vh;
}

#cookieInfo{
display:none;
z-index:999999;
background-color: #fff;
position: fixed;
bottom: 0;
left: 0;
right: 0;
box-shadow: 0px 1px 2px 2px #262626;
min-height: 22vh;
    transition: opacity 1s ease-out;
    opacity: 0;
    height: 0;


#about{
 padding:10px;

 b,p{color:#262626;}
 a{
  color:blue;
  text-decoration: underline;
  font-size:1em;

  &:hover{color:#262626;}
 }
}

.container.cookieInfo{max-width:800px;}

p.description{font-size:1em;}
p,
label,
table th,
table td{
 color:#262626;
}
table{
 width: 100%;
 border: 1px solid #ddd;
 margin-top: 10px;

}
.form-group{
 border: 1px solid #ddd;
 padding: 5px;
 padding-left:10px;
 padding-right:10px;
 border-radius: 5px;
}

.button.btn{
 background-color:$color-primary;
 width:100px;
 margin-left:20px;
 padding: 2px;
}

#moreInfoLink{
 color: #aeaeae;
 font-size: 1em;
 display: inline-block;
 margin-left: 10px;
 font-size: 1em;

 &:hover{cursor:pointer;color:#262626;}
}

.tab-content{
 border:1px solid #ddd;
 border-top:0px !important;
}

.nav{
 li a{
  color:#262626;
  padding: 4px 10px;
  background-color:#f5f5f5;
  font-size: 1em;
 }
 li.active a{
  background-color:#fff;
 }
 .tab-content{
   padding:10px;
 }
    .tab-pane{
   padding:20px;
 }
}
// Sub nav items
.nav-stacked{
 width:25%;
 display:block;
 float:left;

 li{
  margin:0px;
  margin-right: 10px;
  border: 1px solid #ddd;

  a{
   color:#262626;
   background-color:#f5f5f5;
   font-size: 0.8em;
  }
 }
 li.active{border:none;border-left:1px solid #ddd;}
 li.active a{
  color:#262626;
  border-right: 0px;
 }
}

#moreInfoTabs{
 .tab-content{
  display: block;
  float: left;
  width:100%;
  p{
   padding:5px;
   font-size:1em;
  }
 }

 .nav-tabs li:not(.active) a{
  border:1px solid #ddd;
 }
}

.sub.tab-content{
 padding: 10px;
 border: none !important;

 display:block;
 float:left;
 width:75% !important;
}


.tab-pane.active{
  display: block;
 float: left;
 width:100%;
}

.openCookieLink:hover{
 cursor:pointer;
 color:#fff;
}

#closeCookie{
 color:#7d7a7a;
 font-size:1.5em;
 position: absolute;
 right: 25px;
 top: 25px;
}

#closeCookie:hover{
 color:#262626;
 cursor:pointer;
}

}

@media (max-width:768px){
#cookieInfo {
 h2{
  font-size:1.2em;
  width: calc(100% - 40px);    
 }
 #closeCookie {
     width: 40px;
     height: 40px;
     text-align: center;
 }

 form {
  .checkbox-inline{
   margin-bottom:5px;
  }
  .form-group{text-align: center;}
 }

 .nav.nav-tabs li{ width:50%;}

 .nav.nav-tabs li a{
   width:100%;
   font-size:0.9em;
   border-right: 1px solid #ddd;
 }

 .nav.nav-stacked{width:100% !important;}

 .nav.nav-stacked li{
  width: calc(100% / 3);
  width:100%;
  display: inline-block;
  z-index:999;
  position: relative;

  a{
   font-size:0.8em;
   width:100%;
  }

 }
 .nav.nav-stacked li.active a{
  font-weight:bold;

 }
 .sub.tab-content {
     display: block !important;
     padding: 0px !important;
     font-size:0.8em;
     width:100% !important;
 }


 #moreInfoTabs .sub.tab-content {
  display: block !important;
     padding: 0px !important;
     font-size:0.8em;
     width:100% !important;

 }
 #about p,a {font-size:1em;}
}
}

CSS

#cookieInfo.open{opacity:1;height:auto}
#cookieInfo.open.moreInfo{height:100vh}
#cookieInfo{display:none;z-index:999999;background-color:#fff;position:fixed;bottom:0;left:0;right:0;box-shadow:0px 1px 2px 2px #262626;min-height:22vh;transition:opacity 1s ease-out;opacity:0;height:0}
#cookieInfo #about{padding:10px}
#cookieInfo #about b,#cookieInfo #about p{color:#262626}
#cookieInfo #about a{color:blue;text-decoration:underline;font-size:1em}
#cookieInfo #about a:hover{color:#262626}
#cookieInfo .container.cookieInfo{max-width:800px}
#cookieInfo p.description{font-size:1em}
#cookieInfo p,#cookieInfo label,#cookieInfo table th,#cookieInfo table td{color:#262626}
#cookieInfo table{width:100%;border:1px solid #ddd;margin-top:10px}
#cookieInfo .form-group{border:1px solid #ddd;padding:5px;padding-left:10px;padding-right:10px;border-radius:5px}
#cookieInfo .button.btn{background-color:#00beab;width:100px;margin-left:20px;padding:2px}
#cookieInfo #moreInfoLink{color:#aeaeae;font-size:1em;display:inline-block;margin-left:10px;font-size:1em}
#cookieInfo #moreInfoLink:hover{cursor:pointer;color:#262626}
#cookieInfo .tab-content{border:1px solid #ddd;border-top:0px !important}
#cookieInfo .nav li a{color:#262626;padding:4px 10px;background-color:#f5f5f5;font-size:1em}
#cookieInfo .nav li.active a{background-color:#fff}
#cookieInfo .nav .tab-content{padding:10px}
#cookieInfo .nav .tab-pane{padding:20px}
#cookieInfo .nav-stacked{width:25%;display:block;float:left}
#cookieInfo .nav-stacked li{margin:0px;margin-right:10px;border:1px solid #ddd}
#cookieInfo .nav-stacked li a{color:#262626;background-color:#f5f5f5;font-size:0.8em}
#cookieInfo .nav-stacked li.active{border:none;border-left:1px solid #ddd}
#cookieInfo .nav-stacked li.active a{color:#262626;border-right:0px}
#cookieInfo #moreInfoTabs .tab-content{display:block;float:left;width:100%}
#cookieInfo #moreInfoTabs .tab-content p{padding:5px;font-size:1em}
#cookieInfo #moreInfoTabs .nav-tabs li:not(.active) a{border:1px solid #ddd}
#cookieInfo .sub.tab-content{padding:10px;border:none !important;display:block;float:left;width:75% !important}
#cookieInfo .tab-pane.active{display:block;float:left;width:100%}
#cookieInfo .openCookieLink:hover{cursor:pointer;color:#fff}
#cookieInfo #closeCookie{color:#7d7a7a;font-size:1.5em;position:absolute;right:25px;top:25px}
#cookieInfo #closeCookie:hover{color:#262626;cursor:pointer}
@media (max-width:768px){#cookieInfo h2{font-size:1.2em;width:calc(100% - 40px)}
#cookieInfo #closeCookie{width:40px;height:40px;text-align:center}
#cookieInfo form .checkbox-inline{margin-bottom:5px}
#cookieInfo form .form-group{text-align:center}
#cookieInfo .nav.nav-tabs li{width:50%}
#cookieInfo .nav.nav-tabs li a{width:100%;font-size:0.9em;border-right:1px solid #ddd}
#cookieInfo .nav.nav-stacked{width:100% !important}
#cookieInfo .nav.nav-stacked li{width:calc(100% / 3);width:100%;display:inline-block;z-index:999;position:relative}
#cookieInfo .nav.nav-stacked li a{font-size:0.8em;width:100%}
#cookieInfo .nav.nav-stacked li.active a{font-weight:bold}
#cookieInfo .sub.tab-content{display:block !important;padding:0px !important;font-size:0.8em;width:100% !important}
#cookieInfo #moreInfoTabs .sub.tab-content{display:block !important;padding:0px !important;font-size:0.8em;width:100% !important}
#cookieInfo #about p,#cookieInfo a{font-size:1em}
}
Deel dit artikel via
X

Welkom! Deze website maakt gebruik van cookies

Geef hier aan welke cookies we mogen plaatsen. De noodzakelijke en statistiek-cookies verzamelen geen persoonsgegevens en helpen ons de site te verbeteren.

Noodzakelijke cookies helpen een website bruikbaarder te maken, door basisfuncties als paginanavigatie en toegang tot beveiligde gedeelten van de website mogelijk te maken. Zonder deze cookies kan de website niet naar behoren werken.

NaamAanbiederDoelVervaldatum
admin_authOcchio.nlWij gebruiken deze cookie om te onthouden of een Occhio.nl gebruiker is ingelogd in ons systeem.5 jaar
October_sessionOcchio.nlDeze cookie wordt gebruikt door ons content management systeem en wordt geplaatst bij bezoek aan willekeurig welke pagina van onze website. Sessie
NaamAanbiederDoelVervaldatum
_gat_gtag_UA_63158_1Google-analytics.comGebruikt door Google Analytics om verzoeksnelheid te vertragen1 minuut
_gaGoogle-analytics.comRegistreert een uniek ID die wordt gebruikt om statistische gegevens te genereren over hoe de bezoeker de website gebruikt.1 jaar
_gidGoogle-analytics.comRegistreert een uniek ID die wordt gebruikt om statistische gegevens te genereren over hoe de bezoeker de website gebruikt.24 uur

Occhio.nl maakt geen gebruik van marketing cookies.

Cookies

Een cookie is een klein tekstbestand dat tijdens uw bezoek aan een website wordt geplaatst. In dit tekstbestand wordt informatie opgeslagen. Deze informatie kan bij een later bezoek weer worden herkend door deze website.

Bekijk hier onze privacy verklaring