Evästekysely-esimerkki

Tämän esimerkin avulla voit luoda omalle sivustollesi evästekyselyn, jolla käyttäjiltä kerätään aktiivinen hyväksyntä evästeiden asettamiseen ja datankeruuseen mainonnan kohdentamiseksi sekä tarjotaan heille lisätietoa ja vaikutusmahdollisuuksia. Oheinen kysely tulee olla sivuston kaikilla sivuilla.

Lisää oheinen tyylikoodi sivustosi <HEAD>-osaan. Muokkaamalla oheista CSS-määrittelyä, voit tehdä evästekyselylaatikosta paremmin sivustosi ulkoasuun istuvan. Huomaa kuitenkin, että sen tulee erottua selkeästi ja sen tulee olla riittävän iso.

<style>
/* Cookie Consent */

#cookie-consent {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(50,50,50,0.95);
color: #fafafa;
border-top: 1px solid rgba(150,150,150,0.9);
z-index: 10000;
font-size: 15px;
}

#cookie-consent:empty {
display: none;
}

@media screen and (min-width: 500px) {

#cookie-consent > div {
display: table;
margin: 0 auto;
}

#cookie-consent > div > div {
display: table-row;
overflow: hidden;
}

#cookie-consent > div > div > div {
display: table-cell;
}

#cookie-consent > div > div > div + div {
margin: 0 !important;
padding-left: 20px;
}

}

#cookie-consent > div {
padding: 50px 20px 50px 20px;
}

#cookie-consent > div > div > div {
vertical-align: middle;
text-align: center;
}

#cookie-consent > div > div > div + div {
margin: 20px 0 0 0;
}

#cookie-consent a {
color: #e00 !important;
}

#cookie-consent button {
color: #fafafa !important;
background: #d00;
border-radius: 2px;
border-width: 0 0 5px 0;
border-color: #900;
border-style: solid;
white-space: nowrap;
padding: 10px 15px;
cursor: pointer;
font-size: 1em;
}

#cookie-consent button:hover,
#cookie-consent button:active {
border-bottom-width: 2px;
margin-top: 3px;

</style>

Oheisen koodin voit lisätä haluamaasi kohtaan sivustolla <BODY>-tagin sisälle, esimerkiksi juuri ennen </BODY>-tagia:

<div id="cookie-consent"></div>

<script>
(function() {

var text = 'Jotta sivuston käyttö olisi sinulle sujuvaa ja mainokset kiinnostavia, käytämme kumppaniemme kanssa sivustolla evästeitä. Jatkamalla sivuston käyttöä, hyväksyt evästeet. Jos et hyväksy evästeitä, muuta selaimesi asetuksia. <a href="[TÄHÄN LINKKI SIVUSTOSI EVÄSTELAUSEKKEESEEN]">Lisätietoja evästekäytännöistä</a>.';
var button = 'Hyväksyn evästeet';
var ccCookieName = 'cConsent';
var cc = document.getElementById('cookie-consent');

if(cc && document.cookie.indexOf(ccCookieName + '=accepted') == -1) {

cc.innerHTML = '<div><div><div>' + text + '</div><div><button>' + button + '</button></div></div></div></div>';
cc.onclick = function(){
var d = new Date();
d.setDate(d.getDate() + 180);
this.innerHTML = '';
document.cookie = ccCookieName + "=accepted; expires=" + d.toUTCString() + "; path=/";
};

}

})();
</script>