De cookiebanner installeren op elke website

Voeg je site toe en kopieer de regel

Log in, open Sites en kies daarna Site toevoegen. Vul het adres in dat je bezoekers gebruiken, bijvoorbeeld shop.example.com.
Open de site. Op het tabblad Installatie staat de regel voor die site, met een eigen sitesleutel in het adres.
Plak de regel in je site, zoals hieronder per platform beschreven staat.
Kies je ontwerp en teksten en druk op Publiceren. De banner verschijnt bij de volgende paginaweergave.

De regel ziet er zo uit, met je eigen sleutel op de plaats van YOUR-SITE-KEY:

<script src="https://cdn.cookiemark.com/s/YOUR-SITE-KEY.js"></script>

Je kunt de regel al toevoegen voordat je iets publiceert. Tot de eerste publicatie laadt het script, vindt het niets gepubliceerd en toont het niets. Je kunt hem dus vandaag al op een live site zetten en morgen het ontwerp afmaken.

Waarom de regel als eerste in de head staat

Het script doet twee dingen die moeten gebeuren voordat een ander script draait. Het vertelt Google dat er nog niets mag, en het begint de pagina te controleren op trackers die het moet tegenhouden. Een script dat eerder draait, heeft zijn werk al gedaan tegen de tijd dat Cookiemark er is.

Plak de regel daarom als eerste script in de <head> van elke pagina. Zet hem boven Google Tag Manager, analytics, pixels en chatwidgets.

<head>
  <meta charset="utf-8">
  <script src="https://cdn.cookiemark.com/s/YOUR-SITE-KEY.js"></script>
  <!-- Google Tag Manager, analytics and every other script come after this line -->
  ...
</head>

Laat de tag zoals hij is. Voeg geen async of defer toe, want door allebei kunnen andere scripts eerder draaien. Het script is klein: ongeveer 19 KB na compressie, plus je eigen instellingen.

Houd optimalisatietools erbij weg

Tools die scripts uitstellen of samenvoegen, veranderen de volgorde die je hebt ingesteld. Sluit het script van Cookiemark daarvan uit. Zoek naar een instelling als "exclude from delay", "exclude from combine" of iets vergelijkbaars. Veelgebruikte tools zijn WP Rocket, LiteSpeed Cache, Autoptimize en Cloudflare Rocket Loader.

Als je een wijziging publiceert

Als je opslaat in het dashboard, blijft je wijziging een concept. Bezoekers zien hem nadat je op Publiceren hebt gedrukt. Elke publicatie wordt een nieuwe versie, en op hetzelfde moment legen we de CDN-cache van je script. Bezoekers krijgen de nieuwe versie binnen ongeveer een minuut, omdat browsers het script 60 seconden bewaren.

Gewone HTML

Plak de regel direct na de openingstag <head>, op elke pagina. Delen je pagina's een headerbestand of template, plak hem daar dan één keer. Controleer daarna een paar pagina's, want met de hand gebouwde sites hebben vaak pagina's die een andere template gebruiken.

WordPress

Gebruik onze plugin. Die zet het script helemaal bovenaan in de head, houdt WP Rocket, LiteSpeed, Autoptimize en Cloudflare Rocket Loader erbij weg, leegt de paginacache als je opslaat en vertelt plugins die de WP Consent API gebruiken wat de bezoeker heeft gekozen.

Download de plugin op het tabblad Installatie van je site in Cookiemark.
Ga in WordPress naar Plugins, Nieuwe plugin, Plugin uploaden en kies het bestand.
Open Instellingen, Cookiemark en druk op Connect with Cookiemark.
Log in bij Cookiemark als daarom wordt gevraagd, kies de site of voeg hem toe als nieuwe site, en je komt terug in WordPress.
Publiceer de site in Cookiemark. De banner verschijnt dan op elke pagina.

Bij het koppelen wordt ook het WordPress-adres aan de domeinen van de site toegevoegd, en wordt het pad ingevuld waarop de plugin de consentcookie vanaf je eigen server zet. Zo bewaart Safari de keuze voor de volledige termijn. Kun je de knop niet gebruiken, plak dan de regel van het tabblad Installatie in het veld Site key van de plugin.

Liever geen plugin erbij? Voeg de regel dan met de hand toe:

In je thema. Open header.php van een childthema en plak de regel direct na <head>, boven wp_head(). Pas een childthema aan, want een thema-update overschrijft wijzigingen in het hoofdthema.
Met een plugin. Een plugin die code in de head invoegt, werkt ook. Geef de snippet de hoogste prioriteit die de plugin biedt, zodat hij boven de scripts komt die andere plugins via wp_head() toevoegen.

Leeg daarna de paginacache van je cacheplugin, je hostingpartij en je CDN. Anders krijgen bezoekers nog pagina's van vóór de wijziging. Sluit het script uit in optimalisatieplugins, zoals hierboven beschreven.

Shopify

Open in je Shopify-beheer Webwinkel en daarna Thema's.
Open naast je huidige thema het menu en kies Code bewerken.
Open layout/theme.liquid en plak de regel direct na <head>.
Sla op en open je winkel in een privévenster om te controleren of de banner verschijnt.

Er gelden twee beperkingen. De checkout van Shopify gebruikt je thema niet, dus daar draait het script niet. En Cookiemark geeft de keuze van de bezoeker nog niet door aan de eigen Customer Privacy API van Shopify.

Webflow

Open je project en ga naar Site settings en daarna Custom code.
Plak de regel bovenaan in Head code, boven alles wat al in dat veld staat.
Sla op en publiceer de site vanuit Webflow.

Webflow voegt aangepaste code alleen aan een gepubliceerde site toe met een betaald siteabonnement. Voeg je ook head-code toe aan losse pagina's, controleer dan in de paginabron of de regel van Cookiemark nog steeds als eerste staat.

Wix

Open in het dashboard van je site Instellingen en daarna Aangepaste code.
Kies Aangepaste code toevoegen en plak de regel.
Pas hem toe op alle pagina's, plaats hem in de Head en laat hem op elke nieuwe pagina laden.

Voor aangepaste code heeft Wix een premiumabonnement met een gekoppeld domein nodig. Wix laadt ook zijn eigen scripts vóór die van jou, en die volgorde kun je niet veranderen. Cookiemark kan de banner tonen en de scripts tegenhouden die jij toevoegt, maar niet wat Wix zelf als eerste laadt. Zet de eigen cookiebanner van Wix uit, zodat bezoekers één banner zien.

Squarespace

Open Settings, daarna Advanced of Developer tools en daarna Code injection.
Plak de regel bovenaan in het veld Header en sla op.

Code injection zit niet in elk abonnement van Squarespace, dus controleer eerst het jouwe. Zet de cookiebanner uit die Squarespace zelf aanbiedt, zodat bezoekers er geen twee zien.

Google Tag Manager

Laad Cookiemark niet via Tag Manager. Een tag in je container draait pas als de container is gestart, en dat is te laat om Google de standaardwaarden voor toestemming door te geven of iets tegen te houden. Plak de regel in plaats daarvan in de head, en kies voor de container zelf een van deze twee manieren.

Laat Cookiemark de container laden. Vul je container-ID in op het tabblad Google en GTM en verwijder je eigen Tag Manager-snippet. Cookiemark laadt de container dan direct na de standaardwaarden voor toestemming, dus de volgorde kan niet misgaan.
Houd je eigen snippet. Laat het container-ID leeg en houd je snippet onder de regel van Cookiemark.

Doe nooit allebei. Een container die twee keer laadt, activeert elke tag twee keer. In Google Tag Manager lees je meer over de triggers en events in je container.

Controleer of het werkt

Open je site in een privévenster, zodat je begint zonder opgeslagen keuze. De banner hoort te verschijnen.
Bekijk de paginabron en zoek naar cdn.cookiemark.com. Dat hoort het eerste script in de head te zijn.
Start een scan vanaf het tabblad Scan. Die meldt pagina's zonder het script en een cache die nog een oude kopie van je pagina's serveert.

Vindt een scan je script op de site, dan krijgt het domein het label Geverifieerd. Geplande scans draaien alleen voor sites met een geverifieerd domein.

Meer dan één domein

Het consentlog accepteert alleen keuzes vanaf de domeinen van je site en hun subdomeinen. Draait dezelfde banner op een ander domein, voeg dat dan toe onder Instellingen, Domeinen. Wil je één keuze onthouden op alle subdomeinen, vul dan je hoofddomein in onder Keuze delen tussen subdomeinen op hetzelfde tabblad.