Manuel opsætning

Denne vejledning er til jer, der selv indsætter HTML og JavaScript på websitet. I får eksempler på, hvordan scripts og indlejret indhold først indlæses efter samtykke.

Indsæt CookiePopup

Opret først domænet i CookiePopup.net admin, og sørg for, at jeres popup er konfigureret og publiceret. Scriptadressen er den samme for alle websites. CookiePopup finder domænets konfiguration ud fra websitets hostname.

Indsæt scriptet én gang i sidens <head>, og erstat xx med det ønskede sprog. async lader browseren hente scriptet uden at blokere indlæsningen af sidens HTML.

<script src="https://consent.cookiepopup.net/cookiepopup.js" data-language="xx" async></script>

CookiePopup-scriptet skal selv kunne køre uden samtykke. Det skal derfor ikke have type="text/plain" eller en samtykkekategori.

Hvis I indlæser Google- eller Microsoft UET-tags før samtykke, skal I også indsætte de relevante startværdier før CookiePopup og tracking-tags. Se Googles startværdier og Microsoft UETs startværdier.

Vælg sprog med data-language

data-language vælger sproget i cookiepopupen. xx er en pladsholder, ikke en sprogkode, I skal bruge på websitet.

Værdi	Betydning
da	Dansk.
en	Engelsk.
de	Tysk.
auto	Brug først sidens <html lang="…">, ellers browserens sprog.

På en dansk side indsætter I eksempelvis:

<script src="https://consent.cookiepopup.net/cookiepopup.js" data-language="da" async></script>

Brug kun ét CookiePopup-script pr. side. På et flersproget website kan I sætte data-language til den aktuelle sides sprog eller bruge auto. Hvis attributten udelades, bruges også automatisk sprogvalg.

Sproget skal være tilgængeligt i domænets publicerede konfiguration. CookiePopup forsøger først et præcist match og derefter samme grundsprog, så eksempelvis da-DK kan matche da. Hvis der ikke findes et match, bruges domænets standardsprog eller det første tilgængelige sprog.

Google Consent Mode v2

Google Consent Mode v2 fortæller Google-tags, hvilke former for lagring og databrug den besøgende har accepteret. Aktivér Brug Consent Mode v2 i domænets popupindstillinger i admin, og publicér ændringen.

CookiePopup sender en starttilstand med denied for valgfrie formål og opdaterer signalerne ved gemt samtykke og nye valg. granted betyder accepteret; denied betyder afvist. Koblingen er:

CookiePopup-gruppe	Google-signal	Formål
statistics	analytics_storage	Lagring til statistik.
marketing	ad_storage	Lagring til annoncering.
marketing	ad_user_data	Afsendelse af brugerdata til Google til annonceformål.
marketing	ad_personalization	Personligt tilpassede annoncer.
functional	functionality_storage, personalization_storage	Funktionalitet og tilpasning.
necessary	security_storage	Sikkerhedsrelateret lagring; er som udgangspunkt tilladt.

V2 omfatter de to annoncesignaler ad_user_data og ad_personalization. CookiePopup sender signalerne via gtag("consent", ...) og dataLayer. I skal ikke selv tilføje en eventlytter, der sender de samme opdateringer. Se Googles vejledning til Consent Mode.

Sæt Googles startværdier før tags

Når Google-tags indlæses før samtykke, indsættes denne kode øverst i <head>, før CookiePopup, Google-tagget og en eventuel GTM-container. Den sætter startværdierne med det samme, mens CookiePopup hentes asynkront.

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() { dataLayer.push(arguments); }

  gtag('consent', 'default', {
    ad_storage: 'denied',
    analytics_storage: 'denied',
    ad_user_data: 'denied',
    ad_personalization: 'denied',
    functionality_storage: 'denied',
    personalization_storage: 'denied',
    security_storage: 'granted',
    wait_for_update: 500
  });

  gtag('set', 'ads_data_redaction', true);
</script>

wait_for_update: 500 giver Google-tags op til 500 millisekunder til at modtage en samtykkeopdatering. Udløb giver ikke samtykke: værdierne forbliver denied, indtil de opdateres. ads_data_redaction begrænser annonceidentifikatorer i forespørgsler, når ad_storage er afvist; det blokerer ikke alle netværkskald.

Startkoden skal køre som almindelig JavaScript uden samtykkeblokering. CookiePopup håndterer derefter samtykkeopdateringerne, når Brug Consent Mode v2 er aktiveret. Kør ikke denne startkode igen efter brugerens valg. Hvis startværdier allerede sættes før tags af en anden integration, skal opsætningen samles ét sted.

Consent Mode og indlæsning af tags

Indstillingen installerer ikke Google Analytics, Google Ads eller Google Tag Manager. Disse tags skal stadig opsættes med jeres egne ID’er.

• Basic Consent Mode: Google-tags holdes tilbage indtil relevant samtykke. De blokerede script-tags i denne guide kan bruges til denne tilgang.
• Advanced Consent Mode: Google-tags indlæses før samtykke med afviste startværdier og kan sende signaler uden cookies. Det kræver, at samtykkets starttilstand er sat, før Google-tags kører.

Et script med async garanterer ikke kørselsrækkefølgen i forhold til andre tags. Placering af CookiePopup over Google-tagget er derfor ikke alene en garanti for korrekt initialisering. Ved Advanced Consent Mode skal jeres tagopsætning sikre starttilstanden før Google-tags. Ved Basic skal tags forblive blokeret indtil samtykke. Læs mere om Googles Basic og Advanced Consent Mode.

Microsoft UET Consent Mode

Microsoft UET (Universal Event Tracking) bruges af Microsoft Advertising til blandt andet konverteringsmåling. Aktivér Brug Microsoft UET Consent Mode i domænets popupindstillinger i admin, og publicér ændringen.

CookiePopup sender samtykke til Microsoft via window.uetq:

Valg	Microsoft UET-signal
Før samtykke eller ved afvist marketing	ad_storage: "denied"
Ved accepteret marketing (marketing)	ad_storage: "granted"
Når marketing trækkes tilbage	ad_storage: "denied"

CookiePopup sender først en default-tilstand og derefter update ved gyldigt gemt samtykke eller nye valg. Integrationen installerer ikke selve UET-tagget. Opsæt det separat med jeres UET-tag-ID fra Microsoft Advertising, og bevar den eksisterende window.uetq, så køen med samtykkesignaler ikke overskrives.

Hvis UET skal afvente marketing-samtykke helt, bruges scriptblokeringen i denne guide. Hvis UET indlæses før samtykke, skal en afvist starttilstand være sat, før tagget kører. denied styrer annoncookies, men er ikke en garanti for, at der ingen netværkskald sker; Advanced Consent Mode kan sende signaler uden cookies. Se Microsofts forklaring af UET Consent Mode.

Sæt Microsoft UETs startværdier før tagget

Når UET indlæses før samtykke, indsættes denne kode i <head> før CookiePopup og UET-tagget:

<script>
  window.uetq = window.uetq || [];
  window.uetq.push('consent', 'default', {
    ad_storage: 'denied'
  });
</script>

Koden skal køre uden samtykkeblokering. CookiePopup sender efterfølgende opdateringer ud fra marketing-valget, når Brug Microsoft UET Consent Mode er aktiveret. Sæt ikke startværdien igen efter disse opdateringer.

Rækkefølge ved brug af begge integrationer

1. Indsæt Googles startkode ovenfor.
2. Indsæt Microsoft UETs startkode ovenfor.
3. Indsæt CookiePopup én gang: <script src="https://consent.cookiepopup.net/cookiepopup.js" data-language="da" async></script>.
4. Indsæt jeres Google- og UET-tags eller den tag manager, der indlæser dem.

Bruger I kun én leverandør, udelades den andens startkode. Hvis alle tracking-tags holdes helt tilbage indtil samtykke, kan CookiePopup sætte starttilstanden før aktivering; den tidlige startkode er nødvendig, når tags ellers kan nå at køre før CookiePopup.

Google Consent Mode v2 og Microsoft UET Consent Mode er separate indstillinger. Aktivér begge, hvis I bruger begge leverandører. Kontrollér i Google Tag Assistant og Microsoft UET Tag Helper, at afvisning, accept og tilbagetrækning giver de forventede signaler.

Sådan markeres indhold

CookiePopup aktiverer markerede scripts og iframes, når den besøgende har accepteret de angivne kategorier. Et almindeligt script eller en iframe med src bliver ikke automatisk blokeret, blot fordi CookiePopup er installeret.

Attribut	Brug
data-cookiepopup-category	ID på den kategori, der skal være accepteret, eksempelvis statistics eller marketing.
type="text/plain"	Forhindrer et script i at køre, før CookiePopup aktiverer det. Bruges kun på scripts.
data-src	Indeholder den adresse, der først skal indlæses efter samtykke. Erstatter src på blokerede scripts og iframes.
data-cookiepopup-id	Et unikt og stabilt ID for hvert markeret element på siden.

Brug kategori-ID’er fra jeres konfiguration, ikke kategoriernes viste navne. Eksemplerne bruger statistics og marketing; kontrollér, at de findes og kan vælges i jeres popup. Kategorivalget skal passe til indholdets formål.

Hvis et element kræver flere kategorier, kan I skrive data-cookiepopup-category="statistics marketing". Begge skal være accepteret, før indholdet aktiveres.

Eksterne scripts

Flyt adressen fra src til data-src, og tilføj type="text/plain" samt kategorien. Erstat eksempeladressen med leverandørens rigtige scriptadresse.

<script
  type="text/plain"
  data-cookiepopup-category="statistics"
  data-cookiepopup-id="statistics-library"
  data-src="https://stats.example.com/tracker.js">
</script>

Fjern det oprindelige, aktive script-tag, så leverandøren ikke også indlæses uden samtykke. Kontrollér også, om samme script indsættes af et plugin eller en tag manager.

Inline JavaScript

JavaScript direkte i HTML kan afvente samtykke på samme måde. Her sendes først en hændelse til sidens dataLayer, når marketing er accepteret:

<script
  type="text/plain"
  data-cookiepopup-category="marketing"
  data-cookiepopup-id="marketing-event">
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({ event: "marketing_content_allowed" });
</script>

Hændelsen indlæser ikke i sig selv en leverandør. Hvis jeres inline-kode kalder funktioner fra et eksternt script, skal den vente på, at scriptet er indlæst. Placeringen af to script-tags efter hinanden er ikke en garanti for, at et eksternt bibliotek er klar.

Kør kode ved en bestemt samtykkegruppe

Brug kategoriens ID til at vælge, hvilket samtykke koden skal vente på. Her bruger vi statistics. Erstat det med eksempelvis marketing, hvis koden hører til den gruppe i jeres konfiguration.

Enkel løsning med et script-tag

Hvis koden blot skal køre én gang efter samtykke, kan I bruge et markeret script-tag:

<script
  type="text/plain"
  data-cookiepopup-category="statistics"
  data-cookiepopup-id="statistics-start">
  // Erstat denne linje med jeres egen kode til statistik.
  console.log("Statistik er accepteret — koden kan nu køre.");
</script>

CookiePopup kører scriptet, når statistik er accepteret, også hvis samtykket allerede er gemt fra et tidligere besøg.

Hvis I selv vil styre koden med JavaScript-events, så brug eventeksemplet nedenfor. Brug kun én metode til samme integration, så den ikke startes to gange.

JavaScript-events

CookiePopup udsender events på window. Navnene skelner mellem store og små bogstaver.

Event	Hvornår udsendes det?
CookiePopupConsentReady	Ved opstart, når gemt samtykke er kontrolleret, og hver gang et samtykkevalg gemmes. Brug dette event til integrationer, der skal reagere på både opstart og ændringer.
CookiePopupReady	Når CookiePopup er klar og har kontrolleret gemt samtykke. Det betyder ikke i sig selv, at brugeren har accepteret noget.
CookiePopupConsentChanged	Når et samtykkevalg gemmes, eksempelvis accept, afvisning eller ændring af kategorier. Kontrollér altid den relevante kategori.
CookiePopupShown	Når popupen åbnes.
CookiePopupHidden	Når popupen lukkes. Lukning er ikke i sig selv accept.

Kontrollér samtykkegrupper med event.detail

For CookiePopupConsentReady, CookiePopupReady og CookiePopupConsentChanged indeholder event.detail samtykkeobjektet, eller null, hvis der ikke er et samtykke. Kategorierne findes i event.detail.categories. De eksisterende events beholder deres hidtidige betydning.

Lyt til CookiePopupConsentReady, og kør kun den kode, der hører til en accepteret gruppe:

<script>
  window.addEventListener("CookiePopupConsentReady", function (e) {
    if (e.detail?.categories?.functional === true) {
      // Indsæt den kode, der kræver funktionelt samtykke, her.
      console.log("Funktionelle cookies er accepteret.");
    }

    if (e.detail?.categories?.statistics === true) {
      // Indsæt den kode, der kræver statistik-samtykke, her.
      console.log("Statistik er accepteret.");
    }

    if (e.detail?.categories?.marketing === true) {
      // Indsæt den kode, der kræver marketing-samtykke, her.
      console.log("Marketing er accepteret.");
    }
  });
</script>

CookiePopupConsentReady udsendes både ved opstart og når et valg gemmes, også ved afvisning. Ved første besøg uden et valg er event.detail normalt null. Derfor skal kategorien altid kontrolleres. Registrér listeneren før CookiePopup starter; tidligere events bliver ikke afspillet igen. Hvis jeres kode indlæses senere, skal den også kontrollere det aktuelle samtykke med window.CookiePopup?.getConsent(), som vist med hasConsent() i videoeksemplet nedenfor.

Browser-eventet er adskilt fra GTM-eventet cookiepopup_consent_ready i dataLayer. GTM-eventet udsendes fortsat kun ved indlæst, gemt samtykke og ved nye valg, ikke ved opstart uden samtykke.

Et nyt samtykkevalg kan udløse eksemplet igen. Hvis en integration kun må startes én gang pr. side, skal I selv holde styr på, om den allerede er startet. Ved tilbagetrækning af samtykke skal en allerede startet integration stoppes med leverandørens egen funktion, hvis den understøtter det. Se videoeksemplet for start og stop ved ændringer.

Reagér på åbning og lukning

<script>
  window.addEventListener("CookiePopupShown", () => {
    console.log("Cookieindstillingerne er åbnet.");
  });

  window.addEventListener("CookiePopupHidden", () => {
    console.log("Cookieindstillingerne er lukket.");
  });
</script>

Registrér lytterne før den handling, I vil observere. Brug samtykke-events og kategorikontrollen til at styre indhold; brug åbnings- og lukningsevents til at reagere på popupens visning.

Iframe og indlejret video

Flyt iframe-adressen til data-src, og angiv kategorien. Der må ikke samtidig stå en ekstern adresse i src eller aktivt indhold i srcdoc.

YouTube-video

Erstat VIDEO_ID med videoens ID. Eksemplet bruger marketing som kategori.

<p>Videoen indlæses, når du accepterer marketing i cookieindstillingerne.</p>
<button type="button" onclick="window.CookiePopup?.show()">
  Åbn cookieindstillinger
</button>

<iframe
  title="Præsentation af vores virksomhed"
  width="560"
  height="315"
  data-cookiepopup-category="marketing"
  data-cookiepopup-id="company-youtube-video"
  data-src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
  allow="fullscreen; picture-in-picture"
  allowfullscreen>
</iframe>

Knappen åbner popupen, hvor den besøgende selv vælger samtykke. Teksten og knappen bliver stående, også efter at videoen er indlæst. CookiePopup opretter ikke automatisk en placeholder.

Andre iframes

Samme fremgangsmåde kan bruges til eksempelvis Vimeo, kort eller eksterne widgets. Erstat adressen og vælg den relevante kategori.

<iframe
  title="Eksternt indhold"
  width="640"
  height="360"
  data-cookiepopup-category="marketing"
  data-cookiepopup-id="external-widget"
  data-src="https://widgets.example.com/embed">
</iframe>

HTML-video med samtykke

Et almindeligt <video>-element bliver ikke aktiveret automatisk af data-cookiepopup-category. Hvis en videofil skal afvente samtykke, kan I selv tildele dens src, når kategorien er accepteret.

Indsæt hele eksemplet dér, hvor videoen skal vises. Erstat videoens adresse og kategorien efter jeres behov. Scriptet styrer kun indlæsningen og skal derfor køre som almindelig JavaScript.

<video
  id="consent-video"
  controls
  preload="none"
  width="640"
  data-src="https://media.example.com/presentation.mp4">
  Din browser understøtter ikke HTML-video.
</video>
<p id="consent-video-message">Accepter marketing for at indlæse videoen.</p>
<button type="button" onclick="window.CookiePopup?.show()">
  Åbn cookieindstillinger
</button>

<script>
  (() => {
    const video = document.getElementById("consent-video");
    const message = document.getElementById("consent-video-message");

    function updateVideo() {
      const allowed = window.CookiePopup?.hasConsent("marketing") === true;
      message.hidden = allowed;

      if (allowed && !video.hasAttribute("src")) {
        video.src = video.dataset.src;
        video.load();
      } else if (!allowed && video.hasAttribute("src")) {
        video.pause();
        video.removeAttribute("src");
        video.load();
      }
    }

    window.addEventListener("CookiePopupConsentReady", updateVideo);
    updateVideo();
  })();
</script>

Eksemplet håndterer både gemt samtykke ved sideindlæsning og efterfølgende ændringer. Ved afslag stopper det videoen og fjerner kilden. Tilføj ikke en aktiv <source src="…"> eller en ekstern poster, som skal afvente samme samtykke. preload="none" alene er ikke samtykkestyring.

Åbn cookieindstillinger igen

Indsæt eksempelvis denne knap i sidens footer, så besøgende kan ændre deres valg:

<button type="button" onclick="window.CookiePopup?.show()">
  Cookieindstillinger
</button>

Knappen virker, når CookiePopup er indlæst. show() åbner popupen uden at acceptere kategorier på den besøgendes vegne.

Ændringer i samtykke og dynamisk indhold

Markerede scripts og iframes aktiveres ved indlæsning af gyldigt, gemt samtykke og ved nye samtykkevalg. Hvert element aktiveres højst én gang pr. sideindlæsning. Brug derfor forskellige data-cookiepopup-id-værdier til forskellige elementer.

Allerede udført JavaScript bliver ikke fjernet igen, og en aktiveret iframe bliver ikke automatisk tømt, når samtykket trækkes tilbage. Håndtér stop og oprydning via leverandørens API og CookiePopupConsentChanged, eller genindlæs siden efter ændringen, så de markerede elementer starter blokeret. Videoeksemplet ovenfor har sin egen stoplogik.

Indhold, der indsættes senere med JavaScript, bliver ikke automatisk opdaget ved indsættelsen. Ved dynamiske sider skal jeres kode kontrollere window.CookiePopup?.hasConsent("marketing") og reagere på CookiePopupConsentReady, som i videoeksemplet.

Test opsætningen

1. Åbn websitet i et nyt privat browservindue uden gemt samtykke.
2. Åbn udviklerværktøjernes Network-fane. Kontrollér, at de markerede leverandørers scripts, iframes og videofiler ikke hentes før samtykke.
3. Afvis valgfrie kategorier, og kontrollér, at indholdet forbliver blokeret.
4. Åbn cookieindstillingerne, og accepter én relevant kategori. Kontrollér, at kun indhold med de nødvendige samtykker indlæses.
5. Genindlæs siden, og kontrollér, at gemte valg anvendes.
6. Træk samtykket tilbage, og kontrollér jeres stoplogik samt adfærden efter genindlæsning.

Hvis indhold indlæses for tidligt, skal I især se efter aktive src-attributter, manglende type="text/plain" på scripts og leverandørkode, der også indsættes andre steder.