jQuery - Cookies plaatsen en uitlezen (Textsizer en Google Analytics)


Het is met jQuery eenvoudig om functionele cookies te plaatsen, bijvoorbeeld om de keuze van een tekstvergroter te bewaren. Een bezoeker klikt dan op de knop om de tekst groter te maken en tegelijkertijd wordt er een cookie geplaatst om zodoende de keuze van de bezoeker te bewaren en op alle pagina's van de website de tekst groter te tonen.

Het makkelijkste om cookies te plaatsen is om gebruik te maken van een aanvullende plugin, de jQuery Cookie Plugin gemaakt door Klaus Hartl. Het bestand om te gebruiken kan hier gedownload worden, pak het ZIP-bestand dan uit en plaats deze op de goede locatie op je eigen website en roep het bestand aan middels de onderstaande code.

<script src="js/jquery.cookie.js"></script>


Voorbeeld

Na het plaatsen van het bovenstaande bestand kun je beginnen met het plaatsen van cookies met jQuery. Hiervoor kan de code hieronder uit het voorbeeld worden gebruikt. Wat je in de code ziet is dat er eerst gecontroleerd wordt of de cookie al aanwezig is op het systeem of niet en op basis daarvan wordt de rest van de code wel of niet uitgevoerd.

In het onderstaande geval gaat het om een textsizer waarmee een bezoeker de tekst op de pagina groter of kleiner kan maken. Op de pagina staat een div met de classnaam textsizer, in de div staan drie span's met ieder een eigen classnaam (smaller, normal, larger). Zodra een bezoeker op een van deze span's klikt wordt als eerste de bijbehorende classnaam toegekend aan de body tag van de pagina. In de CSS staat dan corresponderende opmaak en zodoende wordt de tekst direct groter of kleiner gemaakt.

<div class="textsizer">
        <span class="smaller">Kleiner</span>
        <span class="normal">Normaal</span>
        <span class="larger">Groter</span>
</div>


Direct na het toekennen van de classnaam aan de body tag wordt er een cookie geplaatst om zodoende de gemaakte keuze te kunnen onthouden, dit voorkomt dat de tekst weer normaal wordt getoond op de volgende pagina en op deze manier wordt tevens de gemaakte keuze onthouden voor de volgende keer als de bezoeker langskomt op de site.

De cookie die geplaatst wordt heeft als naam 'textsize' en direct erachter staat 'textchoice'. Dit is de variabele waarin de daadwerkelijke keuze wordt opgeslagen, dit is de classnaam van het aangeklikte element (smaller, normal, larger), ook toegekend aan de body tag. De / achter path zorgt ervoor dat de cookie voor de gehele website van toepassing is en met expires bepaal je wanneer de cookie verloopt. In de code is dit ingesteld op 30 dagen.

$(document).ready(function() {
        if($.cookie('textsize')) {
                $('body').addClass($.cookie('textsize'));
        }
        $('div.textsizer span').click(function() {
                var textchoice = $(this).attr('class');
                $('body').removeClass('smaller normal larger').addClass(textchoice);
                $.cookie('textsize', textchoice, {path: '/', expires: 30 });
                return false;
        });
});


Nadat er een keuze is gemaakt wordt bij het openen van de volgende pagina gecontroleerd of de cookie bestaat en als dit zo is dan wordt de waarde als classnaam toegekend aan de body tag en zodoende wordt de juiste opmaak voor de tekst toegepast. Wordt er een andere keuze gemaakt dan wordt de cookie automatisch weer overschreven.

De textsizer is een voorbeeld van hoe cookies kunnen worden gebruikt om bepaalde keuzes op te slaan. Met de bovenstaande code kun je natuurlijk zelf allerlei zaken opslaan.

Google Analytics

Met behulp van de bovenstaande plugin en code kan hetzelfde gedaan worden betreffende Analytics. Op deze manier kun je het zo maken dat er een melding in beeld verschijnt om de bezoeker te informeren over het plaatsen van cookies. In het geval dat de bezoeker akkoord gaat worden de cookies van Analytics geplaatst, gaat een bezoeker niet akkoord dan worden de cookies niet geplaatst. De keuze van de bezoeker wordt opgeslagen in een... cookie, dit is toegestaan volgens de wet omdat het een functionele cookie betreft.

Om deze manier te implementeren dient het tracking script van Analytics iets aangepast te worden zoals hieronder is gedaan. Bovenaan de code is een regel toegevoegd waarmee wordt gecontroleerd of er een cookie bestaat waarin de keuze van de bezoeker staat opgeslagen. Als de cookie bestaat en de waarde is positief dan wordt de code van Google Analytics en de cookies geplaatst, is de keuze negatief dan zal er niets gedaan worden.

De naam van de cookie is 'site_cookie' en gekeken wordt of de waarde 'accept' is of niet.

<script type="text/javascript">
if ($.cookie('site_cookie') == "Accept") {
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-59942-7']);
        _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';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
        })();
};
</script>


De code hieronder kan dan gebruikt worden om een melding te plaatsen en een bijbehorende cookie met als naam 'site_cookie'. De code is een volledig werkende melding en daarom is de HTML al in de code opgenomen evenals de opmaak van de HTML, de tekst en de twee knoppen (Accepteren en Weigeren). Na plaatsing wordt er een zwarte balk (20px hoog) met een witte tekst onderaan de website geplaatst over de gehele breedte. Je kunt natuurlijk de opmaak verwijderen en deze in een CSS bestand plaatsen.

De cookie is ingesteld op een periode van 5 jaar (1825 dagen), wijzig dit naar wens.

$(document).ready(function() {
        if($.cookie('site_cookie')) {
        }
        else {
                var bt_message = 'Deze website gebruikt cookies ter registratie van statistieken:';
                var bt_accept = 'Accepteren';
                var bt_decline = 'Weigeren';

                var st_styles = 'position:fixed;bottom:0px;left:0px;z-index:9999;width:100%;height:20px;padding-top:5px;background:#000;color:#FFF;text-align:center;';
                var st_link = 'color:#FFF;text-decoration:underline;cursor:hand;cursor:pointer;';

                $("body").prepend('<div class="cookies" style=' + st_styles + '>' + bt_message + ' <span class="accept" style='+ st_link +'>' + bt_accept + '</span> - <span class="decline" style='+ st_link +'>' + bt_decline + '</span></div>');

                $('div.cookies span.accept').click(function() {
                        $('div.cookies').fadeOut('fast');
                        $.cookie('site_cookie', 'Accept', {path: '/', expires: 1825 });
                        location.reload();
                        return false;
                });
                $('div.cookies span.decline').click(function() {
                        $('div.cookies').fadeOut('fast');
                        $.cookie('site_cookie', 'Decline', {path: '/', expires: 1825 });
                });
        };
});


De onderstaande code is bijna hetzelfde als de bovenstaande code maar het verschil is dat er een melding over de gehele website wordt geplaatst en dat een bezoeker verplicht akkoord moet gaan om de site te bezoeken, dit doet bijvoorbeeld de publieke omroep.

$(document).ready(function() {
        if($.cookie('site_cookie')) {
        }
        else {
                var bt_message = 'Deze website gebruikt cookies ter registratie van statistieken. Door op "Ik ga akkoord" te klikken geeft u toestemming voor het plaatsen van cookies.';
                var bt_accept = 'Ik ga akkoord';

                var st_container = 'position:absolute;top:0px;left:0px;z-index:9998;width:100%;height:100%;background-color:#000;opacity:0.7;filter:alpha(opacity=70);';
                var st_inner = 'position:absolute;top:0px;left:0px;width:300px;height:100px;top:50%;left:50%;margin-left:-175px;margin-top:-75px;padding:25px;z-index:9998;background-color:#FFF;color:#000;text-align:center;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;';
                var st_link = 'color:#000;text-decoration:underline;cursor:hand;cursor:pointer;';

                $("body").prepend('<div class="cookies" style=' + st_container + '></div><div style=' + st_inner + '>' + bt_message + '<br /><br /><span class="accept" style='+ st_link +'>' + bt_accept + '</span></div>');

                $('span.accept').click(function() {
                        $('div.cookies').fadeOut('fast');
                        $.cookie('site_cookie', 'Accept', {path: '/', expires: 1825 });
                        location.reload();
                        return false;
                });
        };
});

Google Chrome

Het testen van de bovenstaande code of het bekijken of een website cookies plaatst kan eenvoudig in onder andere browser Google Chrome. Zodra je een website hebt geopend druk dan op de combinatie CTRL + Shift + I. Klik daarna op het tabblad 'Resources' en zoek aan de linkerkant 'Cookies' op en klik daarna op de betreffende website om te bekijken welke cookies zijn geplaatst. Hieronder een voorbeeld van de Google.nl cookies.