Dokumentation / Installation av skriptet

Installation av Cookienovo-skriptet

Teknisk information om Cookienovo-bannern för utvecklare: hur du infogar skriptet, konfigurerar taggar, blockerar skript efter kategori och kopplar in Google Consent Mode v2.

Infogning av skriptet

För att din webbplats ska visa Cookienovo-bannern och samla in cookie-samtycken, infoga vårt skript i sidans källkod. Du hittar det i ditt Cookienovo-konto (du fick det även via e-post vid registreringen). Infoga skriptet i avsnittet <head>, så högt upp som möjligt – före Google Tag Manager och andra mätskript.

Installationen har två delar: (1) ett inline-skript som synkront sätter standardsamtyckena för Google Consent Mode v2 före körningen av några som helst Google-taggar, och (2) själva bannerns skript:

<!-- Steg 1: standardsamtycken FÖRE alla Google-taggar -->
<script>
window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}
gtag('consent','default',{'ad_storage':'denied','ad_personalization':'denied','ad_user_data':'denied','analytics_storage':'denied','functionality_storage':'denied','personalization_storage':'denied','security_storage':'granted','wait_for_update':500});
gtag('set','ads_data_redaction',true);
</script>
<!-- Steg 2: Cookienovo-banner (defer går bra) -->
<script site-token="<site-token>" type="text/javascript" src="https://cookienovo.com/assets/client.js" defer></script>

Använder du ett optimerings- eller cache-plugin (WP Rocket, LiteSpeed Cache, Autoptimize, SG Optimizer, W3 Total Cache …)? Uteslut Cookienovo-skriptet från dess bearbetning – särskilt från JavaScript-minifiering/-kombinering och fördröjd körning (Delay JavaScript). Lägg till i undantagslistorna cookienovo och rensa plugin-cachen efter ändringen. Annars kanske cookie-bannern inte visas.

Skripttaggar

Cookienovo-bannerns skript stöder följande attribut:

site-token – obligatoriskt. Din sidas UUID från Cookienovo-kontot (du fick det även via e-post). Utan rätt token visas inte bannern. Token je nezávislý od URL a schémy webu — pri prechode z http:// na https:// (alebo inej zmene URL webu v účte) ostáva rovnaký, takže netreba re-inštaláciu ani výmenu snippetu.
theme – valfritt. Framtvingar bannerns tema: "light" eller "dark".
consent-mode – valfritt. Skriver över bannerns samtyckesläge. Som standard "true"; ställ in "false", om du inte vill skicka samtycken.

Blockering av skript efter kategori

För att mät- och marknadsföringsskript ska köras först efter samtycke, tilldela dem en kategori via attributet cn-category. Cookienovo-bannern kör dem sedan endast när besökaren tillåter den aktuella kategorin:

<script type="text/javascript" cn-category="analytics">
  // analysskript
</script>

Möjliga värden för attributet cn-category: necessary (nödvändiga), functional (funktionella), analytics (analys), marketing.

Händelsehantering

Om du vill hantera samtyckesstatusen i egna skript, lyssna på händelsen CookienovoUserConsentChanged:

<script type="text/javascript">
  document.addEventListener("CookienovoUserConsentChanged", (e) => {
    console.log("samtycke ändrat", e.detail);
  });
</script>

I objektet detail hittar du samtyckesstatusen för varje kategori (kategori + booleskt värde som anger om användaren tillät den):

{
  "detail": [
    { "category": "necessary",  "allowed": true  },
    { "category": "analytics",  "allowed": false },
    { "category": "functional", "allowed": true  },
    { "category": "marketing",  "allowed": true  }
  ]
}

Google Consent Mode v2

Cookienovo uppfyller fullt ut Google Consent Mode v2 och konfigurerar det automatiskt – utan att användare eller administratör behöver ingripa. Standardsamtycken sätts direkt vid sidladdning och uppdateras efter besökarens val.

Tack vare den tvådelade installationen (inline-standardsamtycken + bannerns skript) är signalerna ad_storage, analytics_storage, ad_user_data och ad_personalization som standard inställt på 'denied' redan innan Google-taggarna körs. Metoden följer branschstandarder och fungerar även med asynkront laddade Google-taggar. Standardinställningarna omfattar wait_for_update:500 och ads_data_redaction:true för maximalt integritetsskydd.

Mer i Googles dokumentation.

Felsökningsfunktioner

För att verifiera Consent Mode v2-implementeringen tillhandahåller Cookienovo felsökningsfunktioner som du kör i webbläsarkonsolen. Öppna konsolen (F12) på valfri sida med Cookienovo installerat och kör:

// aktivera felsökningsläge och kör full validering
window.cookienovoDebug.enableDebugMode()

// endast valideringskontroller
window.cookienovoDebug.runFullValidation()

// efterlevnadsrapport
window.cookienovoDebug.generateComplianceReport()

// Consent Mode-status
window.cookienovoDebug.checkConsentMode()

// test av implementationen
window.cookienovoDebug.testConsentModeImplementation()

// kontroll av Shopify-integrationen
window.cookienovoDebug.checkShopifyIntegration()

Funktionerna skriver ut detaljerad information om din implementering: efterlevnadspoäng, upptäckta Google-taggar, problem och konkreta rekommendationer. Du kan även köra diagnostiken från dashboarden utan att öppna konsolen.

Automatisk blockering av spårare

Cookienovo kan automatiskt neutralisera tredjepartsspårare utanför Google (till exempel Facebook Pixel, Hotjar eller Microsoft Clarity) före att samtycke lämnas och aktiveras igen i det ögonblick besökaren tillåter den aktuella kategorin. Google-taggar hanteras separat via Consent Mode v2, så de behöver inte blockeras manuellt.

För spårare som stöds behövs inga ändringar i koden. Blockeringen är best-effort: den täcker en lista över kända spårare och skript som infogats direkt i <head> kan avfyras en gång innan blockeraren startar. För säker blockering av valfritt skript, märk det manuellt enligt anvisningen ovan. Du slår själv på eller av den automatiska blockeringen i bannerinställningarna för din webbplats – reglaget ”Automatisk blockering av spårare”. På nya webbplatser är den på som standard.

Content Security Policy (CSP)

Ak na svojom webe používate Content Security Policy, banner Cookienovo funguje bez toho, aby ste museli povoliť externé zdroje. Lišta neťahá žiadny externý stylesheet ani webfont — CSS vkladá inline priamo na stránku a používa systémové písmo (system-ui). Direktívy font-src ani externý style-host preto netreba. Stačí povoliť tieto direktívy:

script-src — host, ktorý servíruje client.js (napríklad cookienovo.com).
connect-src — API origin, kam banner posiela požiadavky (cookienovo.com): konfigurácia /api/config a consent endpointy (/consents, /consents/event).
img-src 'self' data: <logo-host> — data: pre vstavanú ikonu a maskota (vložené priamo v skripte ako data: URI) a host externej URL, ak používate vlastné logo z inej domény.
style-src 'unsafe-inline' — lišta injektuje na stránku vlastný blok <style> a používa inline atribúty style.

Prečo tie dve uvoľnenia: ikony a maskot sú v skripte zapečené ako data: URI (žiadny externý obrázok), preto v img-src stačí pridať data:. Štýly banneru sa vkladajú cez injektovaný <style> blok a inline style atribúty, čo vyžaduje 'unsafe-inline' v style-src.

Länk i sidfoten: öppna cookie-inställningarna igen

Den lilla flytande ”Cookies”-knappen låter som standard besökare öppna sina inställningar igen. Om du vill dölja den (ställ in ikonen på Dold i bannerinställningarna) och öppna inställningscentret från din egen länk – till exempel ”Cookie-inställningar” i sidfoten – lägg till attributet på valfritt element data-cookienovo-settings:

<a href="#" data-cookienovo-settings>Cookie-inställningar</a>

Eller öppna den programmatiskt från din egen JavaScript:

window.cookienovo.showConsentSettings()