Cookiemelding installeren

Update: Maak vanaf nu gebruik van onze vernieuwde cookiemelding. De nieuwe versie geeft je meer styling opties, ondersteunt Google Consent Mode en nog veel meer. Bekijk hier ook de v2 documentatie.

arrow_back De cookiemelding

Volg onderstaande stappen om de cookiemelding toe te voegen aan je website

Deze handleiding bestaat uit de volgende onderdelen:

  1. Een unieke code aanvragen om het script te laten werken #
  2. De cookiemelding toevoegen aan je website via Google Tag Manager (GTM) #
  3. In GTM de benodigde triggers aanmaken voor de verschillende type cookies #
  4. In GTM de cookies inladen met behulp van de aangemaakte triggers #
  5. Een link toevoegen waarmee gebruikers hun cookie instellingen kunnen wijzigen #
  6. De teksten en stijl aanpassen van de cookiemelding #

Let op! Het is van belang dat alle scripts die cookies plaatsen op je website worden ingeladen via Google Tag Manager. Dit betekent dat je géén scripts direct meer in moet laden. Dit geldt dus voor o.a. Google Analytics, Facebook Pixel, etc.

1. Vraag je unieke code aan

Als je nog geen unieke code hebt kun je deze aanvragen. Je ontvangt de code per e-mail.

Unieke code aanvragen

Heb je deze code al? Ga dan door naar stap 2.

2. De cookiemelding toevoegen aan je website via Google Tag Manager (GTM)

Allereerst is het belangrijk om te vermelden dat we er vanuit gaan dat je reeds:

  1. Een Google Tag Manager account hebt
  2. Je een container hebt gecreëerd voor je website in GTM en,
  3. Je de GTM code hebt toegevoegd aan je website zoals vereist: Tag Manager Help #6103696

Maak in je GTM container een nieuwe tag via Tags > Nieuw aan en selecteer bij Tagconfiguratie 'Aangepaste HTML'. Plak vervolgens onderstaand script in het HTML veld.

vervang het deel met 'JOUW_CODE' door de unieke code die je per mail hebt ontvangen. Vervang in onderstaande script ook de tekst 'PRIVACY_STATEMENT_URL' door de url van je privacy statement.

content_copy<script type="text/javascript" src="//code.diffuse.nl/cookie-notice.js?key=JOUW_CODE" id="diffuse-jscn"></script>
<script>
  CookieNotice.init({
  	privacyStatement: 'PRIVACY_STATEMENT_URL'
  });
</script>

Bij stap 4 leggen we uit welke opties het script heeft om de kleuren en teksten aan te passen.

Selecteer bij Triggers 'All Pages'. Hierdoor wordt het script in alle pagina's ingeladen.

Cookiemelding script

Klik vervolgens rechtsboven op 'Verzenden' om de wijzigingen te publiceren. De cookiemelding wordt nu op je website getoond.

Let op! Alleen deze stap is niet voldoende. Ga door met stap 3 en 4 om in GTM triggers aan te maken en de cookies in te laden.

Als geen GTM wilt gebruiken, kun je het script ook zelf toevoegen aan de <head> van je website. Echter zul je dan zelf moeten zorgen dat je website de juiste cookies inlaadt op basis van de consent van de gebruiker.

3. Triggers aanmaken in Google Tag Manager

Vervolgens dien je in GTM de logica te definiëren om de juiste cookies te plaatsen aan de hand van de voorkeuren van de gebruiker. Hiervoor maak je in GTM de volgende drie triggers aan.

  • cookieconsent_marketing
  • cookieconsent_preferences
  • cookieconsent_statistics

Creëer de eerste trigger via Triggers > Nieuw. Geef de trigger de naam 'Cookie Consent Marketing'.

Bij de Triggerconfiguratie selecteer je 'Aangepaste gebeurtenis'. De naam van deze gebeurtenis is 'cookieconsent_marketing'. Het is belangrijk dat deze naam exact gelijk is.

Klik op 'Opslaan' om de trigger aan te maken.

De trigger ziet er nu als volgt uit:

Herhaal bovenstaande voor elk type cookies zodat je de drie triggers hebt, genaamd 'cookieconsent_marketing', 'cookieconsent_preferences' en 'cookieconsent_statistics'.

Klik vervolgens in het hoofdscherm rechtsboven op 'Verzenden' om de wijzigingen te publiceren.

Het kan zijn dat je niet alle triggers nodig hebt. Kijk bij onze veelgestelde vragen (vraag 5) welke triggers voor jouw website relevant zijn.

4. Cookies inladen via de triggers in Google Tag Manager

Vervolgens dien je de scripts die cookies op je websites plaatsen in te laden via de zojuist aangemaakte triggers. Hoe je dit doet laten we zien aan de hand van deze twee veel voorkomende scripts, Google Analytics en de Facebook-pixel:

Voorbeeld: Google Analytics

Dit voorbeeld laat zien hoe je Google Analytics (GA) inlaadt via de aangemaakte 'cookieconsent_statistics' trigger.

Maak een nieuwe tag aan via Tags > Nieuw - of pas je reeds bestaande GA-tag aan.

Wanneer je een nieuwe tag maakt, geef je deze een naam en selecteer je bij Tagconfiguratie 'Universal Analytics'.

Vink 'Overschrijven van instellingen in deze tag inschakelen' aan en vul je GA Tracking-ID in.

Als trigger selecteer je de 'Cookie Consent Statistics' trigger. Google Analytics wordt nu alleen ingeladen als de bezoeker Analytische cookies heeft geaccepteerd.

Google Analytics via Google Tag Manager

Klik op 'Opslaan' om de nieuwe tag aan te maken of je bestaande tag bij te werken.

Klik vervolgens in het hoofdscherm rechtsboven op 'Verzenden' om de wijzigingen te publiceren.

Wanneer je Google Analytics zo instelt dat deze géén persoonsgegevens of pseudo-anonieme gegevens verzamelt, hoef je voor het inladen van GA geen toestemming te vragen via de Cookie Consent Statistics. Meer informatie daarover vind je in dit artikel.

Voorbeeld: Facebook-pixel

In dit voorbeeld laten we zien hoe je de Facebook-pixel inlaadt via de aangemaakte 'cookieconsent_marketing' trigger.

Maak een tag aan voor de Facebook-pixel via Tags > Nieuw - of pas je reeds bestaande Facebook-pixel tag aan.

Wanneer je een nieuwe tag maakt, selecteer je bij Tagconfiguratie 'Aangepaste HTML'.

Als trigger selecteer je de 'Cookie Consent Marketing' trigger. De Facebook-pixel wordt nu alleen geplaatst als de bezoeker Marketing cookies heeft geaccepteerd.

Klik op 'Opslaan' om de tag aan te maken of bij te werken.

Klik vervolgens in het hoofdscherm rechtsboven op 'Verzenden' om de wijzigingen te publiceren.

Herhaal bovenstaande voor de overige scripts die je website inlaadt.

Overige scripts

Wil je het script liever door ons laten installeren? Dat kan. Wij kunnen de volledige implementatie verzorgen, bestaande uit:

  • Teksten en kleuren van cookie melding configureren
  • Verplaatsen van scripts die cookies zetten naar Google Tag Manager en er voor zorgen dat deze alleen ingeladen worden wanneer de bezoeker hier toestemming voor geeft
  • Aanleveren overzicht van cookies die je website plaatst voor vermelding in je privacy statement

Neem contact met ons op via info@diffuse.nl voor meer informatie.

5. Een link aan je site toevoegen om de cookie instellingen te kunnen wijzigen

Het is volgens de nieuwe AVG cookiewet verplicht dat gebruikers te allen tijde hun cookie instellingen kunnen wijzigen. Voeg hiervoor een link toe aan je website. Een goede plek is in de privacy statement of footer. De link dient de class diffuse-cookie-settings te hebben:

content_copy<a href="#" class="diffuse-cookie-settings">Wijzig cookie instellingen</a>

Waneer gebruikers op deze link klikken worden de cookie instellingen getoond. Klik hier voor een voorbeeld van onze website.

6. De teksten en kleuren van de cookiemelding aanpassen

In deze laatste stap leggen we uit hoe je de teksten van de cookiemelding kunt wijzigen. Wanneer je over een Pro of Multisite Pro abonnement beschikt, kun je ook de kleuren aanpassen.

Open de Cookie Notice tag in GTM en klik op het HTML veld om het script aan te passen.

Vervang vervolgens de inhoud door onderstaand script. Vergeet niet om je unieke code aan te passen.

content_copy<script type="text/javascript" src="//code.diffuse.nl/cookie-notice.js?key=JOUW_CODE" id="diffuse-jscn"></script>
<script>
  CookieNotice.init({
    lang: 'nl',
    types: ['preferences', 'statistics', 'marketing'],
    cookieDomain: '',
    texts: {
      notice: 'Wij gebruiken cookies om uw gebruikservaring te optimaliseren, het webverkeer te analyseren en gerichte advertenties te kunnen tonen via derde partijen. Lees meer over hoe wij cookies gebruiken en hoe u ze kunt beheren door op "Instellingen" te klikken. Als u akkoord gaat met ons gebruik van cookies, klikt u op "Alle cookies toestaan".',
      intro: 'Inleidende tekst over cookies.',
      essential: 'Tekst over essentiële cookies',
      preferences: 'Tekst over voorkeurs cookies',
      statistics: 'Tekst over analytische cookies',
      marketing: 'Tekst over advertentie cookies'
    },
    style: { // Pro or Multisite Pro only
      barColor: '#4A90E2',
      barTextColor: '#FFFFFF',
      barButtonColor: '#FFFFFF',
      barButtonTextColor: '#111111',
      primaryColor: '#4A90E2',
      showIcon: true,
      hideDismissButton: false
    },
    privacyStatement: 'PRIVACY_STATEMENT_URL'
  });
</script>

Cookiemelding opties

Onderstaande tabel legt uit wat functie is van de verschillende opties:

Naam Type Standaardwaarde Omschrijving
lang Pro string 'nl' De taal van de cookie melding. De volgende talen worden ondersteund: 'nl', 'en', 'de', 'fr', 'it'.
types array ['preferences', 'statistics', 'marketing'] Definiëert de verschillende type cookies die je website inlaadt.
cookieDomain string '' Cookievoorkeuren van de gebruiker gelden voor alle (sub)domeinen. Voorbeeld: cookieDomain: '.domeinnaam.nl'.
style Pro object styleOptions Opties om het uiterlijk van de cookie melding aan te passen.
texts object textOptions Opties om de teksten van de cookie melding aan te passen.
privacyStatement string null Link naar je privacy statement.

Style options Pro

Naam Type Standaardwaarde Omschrijving
barColor string #4A90E2 De achtergrondkleur van de cookie banner.
barTextColor string #FFFFFF De tekstkleur van de cookie banner.
barButtonColor string #FFFFFF De achtergrondkleur van de cookie banner button.
barButtonTextColor string #000000 De tekstkleur van de cookie banner button.
primaryColor string #4A90E2 De kleur van de links en button van de cookie instellingen.
showIcon boolean true Toon het cookie icon in de cookie banner en in de cookie instellingen.
hideDismissButton boolean false Verberg het kruisje waarmee bezoekers de cookie banner kunnen wegklikken zonder cookies te accepteren.

Text options

Naam Type Standaardwaarde
notice string Wij gebruiken cookies om uw gebruikservaring te optimaliseren, het webverkeer te analyseren en om gerichte advertenties te kunnen tonen via derde partijen. Lees meer over hoe wij cookies gebruiken en hoe u ze kunt beheren door op "Instellingen" te klikken. Als u akkoord gaat met ons gebruik van cookies, klikt u op "Alle cookies toestaan".
intro string Deze website maakt gebruik van cookies om uw gebruikservaring te optimaliseren en het verkeer op de site te analyseren. Met deze cookies kunnen wij en derde partijen content en advertenties aanpassen op basis van uw internetgedrag en profiel. Daarnaast is het dankzij cookies mogelijk informatie te delen via social media. Bepaal zelf welke cookies u goedkeurt. Deze instellingen kunt u altijd aanpassen via ons privacy statement. Echter kunnen door het uitschakelen van cookies bepaalde onderdelen van de website niet meer optimaal functioneren.
essential string Deze cookies zorgen ervoor dat deze website naar behoren functioneert. Ook houden we met deze cookies anoniem website statistieken bij. Omdat deze cookies strikt noodzakelijk zijn, kunt u ze niet weigeren zonder de werking van de website te beïnvloeden. U kunt deze cookies blokkeren of verwijderen door uw browserinstellingen te wijzigen, zoals beschreven in ons privacy statement.
preferences string Deze cookies worden gebruikt om de prestaties en functionaliteit van deze website te verbeteren. Deze cookies zijn niet essentieel om deze website te kunnen gebruiken. Echter kunnen bepaalde onderdelen op deze website zonder deze cookies niet meer optimaal functioneren.
statistics string Deze cookies verzamelen informatie die wordt gebruikt om ons te helpen begrijpen hoe onze website wordt gebruikt of hoe effectief onze marketingcampagnes zijn. Ook helpen deze cookies ons om deze website aan te passen en zo uw gebruikservaring te kunnen verbeteren.
marketing string Met deze cookies kan uw surfgedrag worden gemonitord door advertentienetwerken waardoor we advertenties kunnen tonen op basis van uw interesses en surfgedrag. Ook voeren deze cookies functies uit waarmee onder andere wordt voorkomen dat dezelfde advertentie voortdurend verschijnt.

Dat was het! Je hebt nu gemakkelijk de controle over de verschillende type cookies die je website inlaadt op basis van de voorkeuren van de gebruiker.

Tot slot

Zijn er na het lezen van deze handleiding nog onduidelijkheden? Of kunnen we je met een ander design/development vraagstuk van dienst zijn? Neem dan contact met ons op via info@diffuse.nl.

* Als je de cookie melding op de juiste manier gebruikt, dan voldoe je aan de AVG/GDPR wetgeving. Wij zijn webdevelopers, geen juristen, als je gebruik maakt van dit script blijf je altijd zelf verantwoordelijk. Wij zijn op geen enkele manier aansprakelijk.