Installationsguide

CookieBar installeres med en enkelt linje kode. Denne guide forklarer hvordan du installerer scriptet korrekt, så cookies automatisk blokeres indtil dine besøgende giver samtykke.

Hurtig installation

Kopier dit personlige script-tag fra dit dashboard og indsæt det i din hjemmesides <head> sektion:

<head>
<script src="https://cdn.cookiebar.dk/v1/DIT_SITE_ID.js"></script><!-- SKAL være først -->
<!-- Dine andre scripts herunder -->
<script src="https://www.googletagmanager.com/gtag/js?id=..."></script>
...
</head>

Hvor finder jeg mit Site ID?

DIT_SITE_ID i eksemplerne ovenfor er en pladsholder. Du skal erstatte det med dit faktiske, unikke site-ID.

Dit personlige script-tag — med det korrekte site-ID allerede indsat — kan kopieres direkte fra dit CookieBar dashboard. Gå til dit site og klik på "Installationskode". Den færdige kode er klar til at indsætte — du behøver ikke ændre noget.

Eksempel: Hvis dit site-ID er abc123, vil dit script-tag se sådan ud:
<script src="https://cdn.cookiebar.dk/v1/abc123.js"></script>

Vigtigt: Placering

Scriptet skal være det allerførste <script>-tag i din <head> sektion. Kun på den måde kan CookieBar nå at blokere cookies fra Google Analytics, Meta Pixel og andre tjenester, inden de indlæses.

Hvorfor skal scriptet stå først?

Browseren indlæser scripts oppefra og ned. Hvis Google Analytics-scriptet står over CookieBar, vil Google Analytics nå at sætte cookies, før CookieBar kan blokere dem. Ved at placere CookieBar som det første script, kan det:

  • Sætte Google Consent Mode v2 til "denied" som standard, inden Google-scripts indlæses
  • Overvåge og blokere alle efterfølgende scripts, der forsøger at sætte cookies uden samtykke
  • Vise cookiebanneret så hurtigt som muligt

Platformguider

WordPress

Med et plugin (anbefalet): Installer et plugin som Insert Headers and Footers(WPCode). Gå til pluginnets indstillinger og indsæt CookieBar-scriptet i "Header"-feltet. Sørg for at det står øverst, før eventuelle andre scripts.

Manuelt: Rediger dit temas header.php fil. Find <head>-tagget og indsæt CookieBar-scriptet lige efter:

<head>
  <script src="https://cdn.cookiebar.dk/v1/DIT_SITE_ID.js"></script>
  <?php wp_head(); ?>
</head>

Erstat DIT_SITE_ID med dit faktiske site-ID fra dit dashboard.

Shopify

Gå til Online Store → Themes → Edit code. Åbn theme.liquid og indsæt CookieBar-scriptet lige efter <head>-tagget, før alle andre scripts:

<head>
  <script src="https://cdn.cookiebar.dk/v1/DIT_SITE_ID.js"></script>
  {{ content_for_header }}
  ...
</head>

Erstat DIT_SITE_ID med dit faktiske site-ID fra dit dashboard.

Wix

Gå til Indstillinger → Tilpasset kode. Tilføj CookieBar-scriptet og vælg "Head" som placering. Vælg at det skal indlæses på "Alle sider".

Squarespace

Gå til Settings → Advanced → Code Injection. Indsæt CookieBar-scriptet i "Header"-feltet.

Custom / HTML

Indsæt scriptet direkte i din HTML-skabelon som det første script i <head>. Scriptet bør ikke have async eller defer attributter — det skal indlæses synkront for at kunne blokere andre scripts.

Manuel cookie-blokering

CookieBar blokerer automatisk kendte tjenester (Google Analytics, Meta Pixel osv.) baseret på de cookies, den har fundet under scanning. Hvis du har scripts der ikke automatisk genkendes, kan du manuelt markere dem med data-cookiebar-category:

<!-- Blokeres automatisk indtil bruger giver samtykke til marketing -->
<script
  src="https://example.com/tracking.js"
  data-cookiebar-category="marketing"
></script>

<!-- Blokeres indtil bruger giver samtykke til statistik -->
<script data-cookiebar-category="analytics">
  // Inline analytics-kode
</script>

Gyldige kategorier:

  • necessary — Nødvendige cookies (blokeres aldrig)
  • analytics — Statistik og analyse
  • marketing — Marketing og annoncering
  • preferences — Præferencer og funktionalitet

Google Consent Mode v2

CookieBar understøtter Google Consent Mode v2automatisk. Når scriptet indlæses, sættes alle consent-signaler til "denied" som standard. Når en besøgende giver samtykke, opdateres Google Consent Mode automatisk:

  • analytics_storage — Styres af "Statistik"-kategorien
  • ad_storage, ad_user_data, ad_personalization — Styres af "Marketing"-kategorien
  • personalization_storage — Styres af "Præferencer"-kategorien
  • functionality_storage, security_storage — Altid "granted"

Du behøver ikke opsætte Google Consent Mode separat — CookieBar håndterer det for dig. Aktivér Google Consent Mode i dit site-dashboard under indstillinger.

JavaScript API

CookieBar eksponerer en global window.cookieBarinstans, som du kan bruge til at styre samtykke fra din egen kode. Det er nyttigt, hvis du f.eks. vil tilføje en "Cookie-indstillinger"-knap i din footer.

Åbn samtykke-indstillinger

Vis indstillingspanelet, så brugeren kan ændre sine samtykkevalg:

// Eksempel: Tilknyt til en knap i din footer
document.getElementById('cookie-settings-btn')
  .addEventListener('click', () => {
    window.cookieBar.showSettings()
  })

Eller direkte i HTML med en inline handler:

<button onclick="window.cookieBar.showSettings()">
  Cookie-indstillinger
</button>

Hent nuværende samtykke

Læs den aktuelle samtykkestatus — f.eks. for at betinget indlæse scripts:

const consent = window.cookieBar.getConsent()
// { necessary: true, analytics: true, marketing: false, preferences: false }

if (consent?.analytics) {
  // Indlæs analytics-script manuelt
}

Vent på den besøgendes valg

Tredjeparts-widgets som chat, video og kort bør først indlæses, når den besøgende har svaret på cookiebanneret — så ligger de ikke oven på banneret, og de sætter ingen cookies før tid.onConsent() kalder din funktion, når der er truffet et valg. Findes der allerede et gyldigt samtykke fra et tidligere besøg, kaldes den med det samme:

let chatLoaded = false

window.cookieBar.onConsent((consent) => {
  // consent.action:     'accept_all' | 'reject_all' | 'customize' | 'stored'
  // consent.categories: { necessary, analytics, marketing, preferences }
  if (chatLoaded) return
  chatLoaded = true
  loadChatWidget()   // dit eget kald — fx indsæt chat-scriptet
})

Det samme signal sendes som et event på window, hver gang samtykket besluttes eller ændres:

window.addEventListener('cookiebar:consent', (event) => {
  const { action, categories } = event.detail
})

// Er der allerede truffet et valg?
window.cookieBar.hasDecided()   // true / false

Sætter din widget cookies i en kategori (fx marketing), skal den kun indlæses, når netop den kategori er accepteret: tjek consent.categories.marketing, eller lad CookieBar blokere scriptet automatisk med data-cookiebar-category. At vente på et valg erstatter ikke samtykket til den enkelte kategori.

Mobil

Under Banner → Layout → "Layout på mobil" i dit dashboard kan du vælge Kompakt. På skærme op til 640 px bredde vises banneret så som én linje tekst med "Læs mere", "Afvis alle" og "Acceptér alle" side om side og "Tilpas" som et link. Valgmulighederne, kategorierne og den måde samtykket gemmes på er de samme — kun layoutet er anderledes. Kompakt fylder ca. 20 % af skærmen på en almindelig telefon mod ca. 30 % for standardlayoutet, hvor banneret vises som på desktop.

Har din hjemmeside en chat-knap eller lignende, der ellers lægger sig oven på banneret, så indlæs den først, når den besøgende har svaret — se Vent på den besøgendes valg ovenfor.

Fejlfinding

Cookiebanneret vises ikke

  • Tjek at script-tagget er indsat korrekt i <head>
  • Åbn browserens konsol (F12) og kig efter fejlmeddelelser fra CookieBar
  • Hvis du allerede har givet samtykke, slet cookien cookiebar_consent (og nøglen af samme navn i localStorage) og genindlæs siden

Cookies sættes før samtykke

  • Sørg for at CookieBar-scriptet er det første script i <head>
  • Fjern async og defer fra CookieBar-scriptet, hvis du har tilføjet det
  • Scan dit site igen for at opdatere listen over cookies, der skal blokeres

Content Security Policy (CSP)

Hvis din hjemmeside bruger en Content Security Policy, skal du tillade scripts fra cdn.cookiebar.dk:

Content-Security-Policy: script-src 'self' https://cdn.cookiebar.dk;