Hoe implementeer je de cookietool?

Datum van publicatie:

Cookietool

Daisycon heeft speciaal voor haar publishers en adverteerders een cookietool ontwikkeld. Wij merkten dat er vrij veel vragen zijn over hoe de tool het beste geïmplementeerd kan worden. Daarom hebben we een aantal voorbeelden en tips voor jullie opgesteld. Naast de standaard opmaak van de cookietool hebben we ook een nieuwe opmaak toegevoegd die simpel is toe te passen.

Voor deze post is kennis van HTML, CSS, PHP en Javascript een vereiste. 

Overzicht van tips voor de cookietool:

 

Acties na accepteren of weigeren van cookies

Het script van de cookietool bevat de mogelijkheid om acties aan te roepen bij het accepteren of weigeren van de cookies. Het eerste evenement in het onderstaande script is bij het accepteren van de cookies en het tweede evenement is bij het niet accepteren van de cookies. Een voorbeeld van een actie die je zou kunnen uitvoeren is het automatisch herladen van de pagina.

 

Cookietool personaliseren door middel van CSS

Het script van de cookietool is simpel aan te passen door middel van CSS. Alle onderdelen in de cookietool hebben een eigen unieke naam, waar doormiddel van classes de opmaak aan te passen is. Als voorbeeld hebben we een nieuwe layout ontwikkeld. Deze layout is zowel bovenaan als onderaan de pagina te gebruiken en is over de volledige breedte van de pagina. Publishers en adverteerders van Daisycon zijn vrij deze nieuwe layout te gebruiken.

Klik hier om deze nieuwe layout voor de cookietool in actie te zien.

Om de opmaak toe te passen moet je de cookietool op de normale manier installeren en de volgende code toevoegen tussen de HEAD tags van je website. Daarnaast moet de instelling binnen de cookietool ‘document.sDcaSmallCornerPosition’ op bottomLeft (voor onderaan) of topLeft (voor bovenaan) gezet worden. 

 

Cookieaccept integreren in je website 

Er zijn twee manieren om cookieaccept goed te implementeren in je website. De eerste manier is door de cookietool te installeren. De tweede manier is doormiddel van de ‘cookiebridge’. Dit is een link die je kan gebruiken om de cookies van Daisycon te accepteren, zonder dan je hiervoor de cookietool van Daisycon hoeft te gebruiken. Deze link kan je bijvoorbeeld in je eigen cookietool invoegen, of in je website integreren. Hoe je hem in je website integreert laten we hieronder zien.

De cookiebridge vind je in je publisheraccount bij ‘Hulpmiddelen’ / ‘Cookietool’.

Accepteren van cookies met cookietool

Hieronder laten we een integratie van de cookieaccept zien zoals ook op Daisycon.com wordt gebruikt. Dit is een integratie van de cookieaccept in combinatie met een normale installatie van de cookietool. Een bezoekers kan dus cookies accepteren via de cookietool, of later binnen een pagina als hij bijvoorbeeld een bericht wil delen via social media. 

Bij het accepteren van de cookies met de cookietool wordt er een cookie gezet met de naam CookiesAccepted. Aan de hand van deze cookie is het mogelijk om bepaalde onderdelen op je website zoals AddThis of Google Analytics te verbergen totdat de cookies zijn geaccepteerd. 

Een voorbeeld van de bovenstaande implementatie is in de praktijk te vinden op deze pagina aan de onderkant van het blogstuk (alleen als je de cookies nog niet geaccepteerd hebt). Zie hier het screenshot:

Cookies accepteren

Je dient dus eerst de cookietool te installeren. 

Daarna plak je onderstaand script op de plek waar je de cookieaccept button wil tonen. Lees in de code hoe je het script ook in delen in je stylesheet, head en body kan plaatsen. 

Tip! Om cookies te accepteren van de button wordt een actie aangeroepen binnen de cookietool. Deze actie staat bekend onder de naam: document.cookieAcceptenceCheck.acceptCookies();

Accepteren van cookies zonder cookietool

Wil je bovenstaande integratie ZONDER cookietool van Daisycon installeren, dan kan dat door onderstaand script te gebruiken.

Via bovenstaand script worden de cookies van Daisycon geaccepteerd. Wil je andere cookies ook pas aanroepen nadat de cookies zijn geaccepteerd, dan kan je onderstaand voorbeeldscript gebruiken. Dit voorbeeld laat zien hoe je AddThis pas laadt nadat cookies geaccepteerd zijn. Uiteraard moet je er wel voor zorgen dat je in je privacystatement de cookies benoemd waarvoor je acceptatie vraagt. Ook moet je een duidelijke verwijzing naar je privacystatement maken.

 

Leesbaarheid en snelheid van je website

Om de leesbaarheid van de HTML code en de snelheid van je website hoog te houden kan je het beste de cookietool in een los bestand op je website zetten. Zet onderstaande code tussen de HEAD tags van je website.

Kopieer het onderstaande script, sla het op als cookietool.js en upload deze naar je website.

Tip! Om het bestand met daarin het script van de cookietool sneller te laten laden kunnen de comments uit het script verwijderd worden, zodat alleen de noodzakelijke regels overblijven. 

Bekijk hier het originele script voor de cookietool.

Wij hopen dat deze post jullie helpt de cookietool op een goede en gebruiksvriendelijke manier op jullie website te gebruiken. Mocht je problemen hebben de tool te implementeren dan kan je altijd contact opnemen met [email protected]

Het technische gedeelte van dit artikel is geschreven door Frontend developer Jeffrey Bosman. Coauteur is Rick de Vlieger, Manager operations en Data officer van Daisycon.