PrivacyKit Webkomponenter

Offentlig dokumentation af webkomponenterne consent-dialog, consent-guard, consent-missing og compliance-monitor.

Indholdsfortegnelse

<consent-dialog>

Hovedkomponenten for PrivacyKit-samtykke UI og orkestrering.

Attributter

Attribut	Type	Standard / Påkrævet	Beskrivelse
variant	standard \| panel \| modern \| modest	standard	Visuel variant af dialogen.
theme	standard \| dark \| teal \| slate \| light \| vibrant \| high-contrast	standard	Visuelt tema for dialogen.
expires-days	number	180	Levetid for cookien (dage).
version	number	0	Version af samtykkeskemaet til re-samtykke.
google-consent-mode	boolean	unset	Udsender Google Consent Mode v2-samtykkesignaler baseret på brugerens PrivacyKit-samtykkevalg.
locale	da \| de \| en \| es \| fi \| fr \| it \| nl \| no \| pl \| sv	fra browser	Tving en bestemt locale.
hide-summary-part-2	boolean	unset	Skjuler dialogens opsummering del 2 (dialog-summary-part-2).
hide-necessary	boolean	unset	Skjuler kategorien Nødvendig.
hide-preferences	boolean	unset	Skjul kategorien Præferencer.
hide-analytics	boolean	unset	Skjul kategorien Analyse.
hide-marketing	boolean	unset	Skjul kategorien Markedsføring.
hide-readmore	boolean	unset	Skjuler den udvidelige "Læs mere"-sektion.
hide-privacykit-badge	boolean	unset	Skjuler PrivacyKit-mærket, der vises nederst i samtykkedialogboksens indhold.
hide-privacy-policy-link	boolean	unset	Skjuler standardlinket til privatlivspolitikken fuldstændigt. Brug `privacy-policy-url` i stedet for at holde linket synligt og omdirigere brugerne til din egen privatlivspolitikside.
privacy-policy-url	string	unset	URL som brugerne omdirigeres til, når de klikker på privatlivspolitiklinket. Når angivet, åbner linket denne URL i stedet for den indbyggede privatlivsdialog.
demo	boolean	unset	Demo-tilstand: deaktiverer automatisk åbning og begrænser funktioner. Ikke GDPR-kompatibel.
dismissible	boolean	false	Bestemmer om dialogen kan lukkes via backdrop/Escape, hvis der ikke er taget stilling.
show-fab	boolean	false	Aktiverer knappen til samtykkeindstillinger. Har ingen synlig effekt før en samtykkecookie findes.
fab-position	left \| right	left	Fastgør knappen nederst til venstre eller nederst til højre i viewporten.
dialog-position	left \| right	left	Styrer hvilken side af skærmen dialogen vises på. Gælder kun for varianterne modern og modest — standard og panel er altid centrerede.

Eksempel

HTML
<consent-dialog theme="panel" variant="dark" expires-days="90" 
  version="1" locale="da" hide-marketing hide-privacy-policy-link dismissible>
</consent-dialog>

Lokalisering

<consent-dialog> leveres med indbyggede oversættelser til engelsk, norsk, tysk, polsk, spansk, fransk, italiensk, hollandsk, svensk, dansk og finsk — ingen oversættelsesfiler, du selv skal indlæse eller vedligeholde.

Automatisk registrering

Som standard læser dialogboksen den besøgendes browsersprog og viser automatisk den tilsvarende oversættelse. Hvis browseren er indstillet til et sprog, PrivacyKit ikke understøtter, falder den tilbage til engelsk.

Tilsidesætte sproget

For at gennemtvinge et bestemt sprog uanset den besøgendes browserindstillinger skal du angive attributten locale — se tabellen ovenfor for den fulde liste over understøttede koder.

HTML
<consent-dialog locale="da"></consent-dialog>

Design tokens

Design tokens eksponerer stabile CSS-variabler til farver, spacing, typografi m.m., uden at du rører implementationen. Indbyggede temaer er drevet af det samme token-system, så du kan overskrive enkelte stilarter eller skabe et helt tilpasset udtryk.

Design tokens	Beskrivelse
--pk-transparency	Gennemsigtighed for dialogfladen og dens indlejrede kort/akkordeoner, angivet i procent. 0 % (standard) er helt solid; værdien begrænses til maks. 50 %.
--pk-bg-color	Baggrundsflade for hele dialogskallet. Blandes med --pk-transparency for at give den endelige farve.
--pk-paper-color	Papirflade til kort, akkordeoner og paneler inde i dialogen. Blandes også med --pk-transparency.
--pk-text-color	Basisfarve til overskrifter og tekst.
--pk-text-color-on-primary	Tekstfarve, der bruges på elementer udfyldt med primærfarven, f.eks. solide knapper.
--pk-primary-color	Primær accent til CTA'er, fokus og links.
--pk-secondary-color	Sekundær accent, især til switches.
--pk-focus-ring-color	Farve på fokusomrids (outline) ved tastaturfokus.
--pk-font-family	Skrifttype for al tekst; falder tilbage til body-font.
--pk-spacing-unit	Afstandsenhed der styrer padding og gap.
--pk-control-border-color	Kantfarve til kontroller inde i dialogen — kort, akkordeoner, knapper og lignende elementer.
--pk-control-border-width	Kantbredde til kontroller inde i dialogen — kort, akkordeoner, knapper og lignende elementer.
--pk-control-border-radius	Hjørneradius for knapper, inputfelter og interaktive kontroller.
--pk-dialog-border-color	Kantfarve til selve dialogens ramme — konturen af det ydre panel og skillelinjerne i header/footer.
--pk-dialog-border-width	Kantbredde til selve dialogens ramme — konturen af det ydre panel og skillelinjerne i header/footer.
--pk-dialog-border-radius	Hjørneradius for den ydre beholder til samtykkedialogen.
--pk-dialog-max-height	Maksimal højde på samtykkedialogen; når indholdet overstiger denne grænse, ruller dialogens brødtekst.
--pk-dialog-shadow	Skyggeeffekt for samtykkedialogen.

Eksempel

<consent-dialog theme="light" style="
  --pk-bg-color: #faf7f2;
  --pk-paper-color: #f7eede;
  --pk-primary-color: #b08968;
  --pk-font-family: 'Segoe UI', Tahoma, sans-serif;
  --pk-control-border-radius: 10px;
  --pk-dialog-border-radius: 20px;
  --pk-dialog-max-height: 50vh;
  --pk-dialog-shadow: 10px 20px rgba(0, 0, 0, 0.5);
">
</consent-dialog>

Indholdsslots

Indsæt brugerdefineret indhold i specifikke dele af en komponent ved hjælp af navngivne HTML-slots — så får du fuld kontrol over indhold og styling uden at ændre selve komponenten.

Slotnavn	Beskrivelse
dialog-logo-top	Valgfrit logo eller brandingbillede vist i overskriften på samtykkedialogboksen.
dialog-logo-right	Valgfrit logo eller brandingbillede vist øverst til højre i samtykkedialogboksen.
dialog-title	Erstatter titlen i dialogens header.
dialog-summary-part-1	Tilføjer brugerdefineret tekst til det første introafsnit under dialogtitlen.
dialog-summary-part-2	Tilføjer brugerdefineret tekst til det andet introafsnit, der forklarer samtykkevalg.
necessary-content	Erstatter beskrivelsen i kategorien Nødvendig.
preferences-content	Eget indhold i accordionen Præferencer.
analytics-content	Eget indhold i accordionen Analyse.
marketing-content	Eget indhold i accordionen Markedsføring.
read-more-title	Angiver titlen for sektionen "Læs mere".
read-more-content	Indhold, der vises når "Læs mere" åbnes.
privacy-policy-content	Erstatter standardteksten for privatlivspolitikken. Brug kun tekst godkendt af jeres egen juridiske rådgiver, da PrivacyKit ikke kan bekræfte GDPR-overholdelse efter tilpasning.

Eksempel

HTML
<consent-dialog theme="standard" variant="standard" locale="da" version="1">
  <img slot="dialog-logo-top" width="100px" src="/logo.png" alt="Virksomhedslogo" />
  <div slot="dialog-title" class="din-klasse">
    <h2>Vi bruger cookies</h2>
  </div>
  <span slot="marketing-content">
    <b>Vi indsamler i øjeblikket ikke cookies til markedsføring.</b>
  </span>
</consent-dialog>

Flydende dialogknap

Når show-fab er sat til true, viser <consent-dialog> en floating action button (FAB), der lader brugere genåbne deres samtykkevalg efter første indsendelse. Brug fab-position til at fastgøre den nederst til venstre eller nederst til højre i viewporten.

Synlighedsregler

Skjult indtil det første samtykke er indsendt.
Skjult mens samtykkedialogen eller privatlivspolitik-dialogen er åben.
Skjult hvis show-fab ikke er sat eller er sat til false.

HTML
<consent-dialog show-fab fab-position="left">
</consent-dialog>

Google Consent Mode v2

Når google-consent-mode er aktiveret, læser PrivacyKit brugerens samtykkevalg og signalerer dem til Google Tag Manager eller gtag ved hjælp af Google Consent Mode v2-protokollen. Dette sker automatisk ved sideindlæsning og hver gang brugeren ændrer sit samtykke. Der kræves ingen yderligere konfiguration ud over at tilføje attributten.

Anbefalet opsætning

At kombinere <consent-guard> omkring dit GTM-snippet med google-consent-mode på dialogen er en håndhævelsesorienteret tilgang: GTM kan slet ikke indlæses, før samtykke er givet, og Google Consent Mode v2-signaler sendes med det samme, når det sker. GTM er blot en container — den kan indeholde analysetags, marketingtags eller begge dele, afhængigt af hvad du har konfigureret i den. Sæt consent-udtrykket på <consent-guard> tilsvarende: marketing, hvis GTM kun udløser marketing-/annoncetags, analytics, hvis det kun er analyse, eller analytics+marketing, hvis den udløser begge dele.

HTML
<!-- Match the consent expression to what GTM actually fires: "analytics" or "marketing" -->
<consent-guard consent="analytics">
  <script type="text/plain" data-src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX"></script>
</consent-guard>

<consent-dialog google-consent-mode>
</consent-dialog>

Mapning af samtykkesignaler

PrivacyKit mapper sine tre samtykkekategorier til Googles syv Consent Mode v2-felter:

GCM v2-felt	Mappet fra	Værdi
analytics_storage	Analyse	granted / denied
ad_storage	Marketing	granted / denied
ad_user_data	Marketing	granted / denied
ad_personalization	Marketing	granted / denied
functionality_storage	Præferencer	granted / denied
personalization_storage	Præferencer	granted / denied
security_storage	—	Always granted

security_storage er altid granted, da det dækker sikkerhedskritisk browserlagring og ikke er underlagt valgfrit sporingssamtykke.

Sådan sendes signaler

PrivacyKit tjekker, om window.gtag er tilgængelig (Google Tag Manager eller gtag.js indlæst). Hvis det er tilfældet, kalder den:

JavaScript
gtag('consent', 'update', {
  analytics_storage: 'granted' | 'denied',
  ad_storage: 'granted' | 'denied',
  ad_user_data: 'granted' | 'denied',
  ad_personalization: 'granted' | 'denied',
  functionality_storage: 'granted' | 'denied',
  personalization_storage: 'granted' | 'denied',
  security_storage: 'granted'
});

Hvis gtag ikke er tilgængelig, men window.dataLayer er det, sender PrivacyKit samtykkeopdateringen direkte til dataLayer. Hvis ingen af delene findes, sendes intet signal, og intet sættes i kø.

Når Google Tag Manager er beskyttet af <consent-guard> — altså at den først indlæses, efter brugeren har givet samtykke — forsøger PrivacyKit automatisk at sende signalet igen, når GTM er færdig med at indlæse.

Fejlfindingstip: PrivacyKit logger sin Google Consent Mode v2-aktivitet til browserkonsollen, så du kan verificere adfærden direkte i DevTools:

[PrivacyKit] Google Consent Mode v2 update emitted.
Et samtykkesignal blev sendt til gtag eller dataLayer.
[PrivacyKit] Google Consent Mode v2 update skipped because no Google tag was detected.
Hverken gtag eller dataLayer blev fundet i browseren, så intet blev sendt.

Dialogmetoder

TypeScriptAPI-reference

openConsentDialog(): void
onConsentDialogClosed(callback: () => void): () => void
openPrivacyPolicyDialog(): void

<consent-guard>

Renderer sit indhold, når det angivne samtykkeudtryk evalueres til sand.

Attributter

Attribut	Type	Standard / Påkrævet	Beskrivelse
consent	string	unset	Samtykkeudtryk, der skal være sandt før rendering.

Samtykkebetingelser

Udtryk	Påkrævet samtykke	Beskrivelse
	Alle kategorier	Hvis consent-attributten udelades, skal alle kategorier accepteres, for at guard'en aktiveres.
necessary	Ingen	Forhindrer falske positive resultater i Compliance Monitor for nødvendige ressourcer, der ikke automatisk genkendes af PrivacyKit.
preferences	Præferencer
analytics	Analyse
marketing	Marketing
preferences+analytics	Præferencer OG Analyse
preferences\|analytics	Præferencer ELLER Analyse
preferences+marketing	Præferencer OG Marketing
preferences\|marketing	Præferencer ELLER Marketing
analytics+marketing	Analyse OG Marketing
analytics\|marketing	Analyse ELLER Marketing

Eksempel 1 – Beskyt scripts

HTML
<consent-guard consent="marketing">
  <script type="text/plain" data-src="https://www.googletagmanager.com/gtm/js"></script>
</consent-guard>

Eksempel 2 – Beskyt indlejret indhold

HTML
<consent-guard consent="analytics+marketing">
  <iframe
    title="YouTube video"
    data-src="https://www.youtube.com/embed/abc123"
    width="560"
    height="315"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen>
  </iframe>
</consent-guard>

Vigtigt: Bemærk, at håndterede ressourcer i eksemplerne bruger data-src i stedet for src og type="text/plain" bruges for scripts. PrivacyKit aktiverer håndteret indhold, efter at samtykke er givet — ellers kan ressourcer indlæses med det samme og fremstå som hardkodet i Compliance Monitor.

<consent-missing>

Vis fallback-indhold, når en tilknyttet consent-guard blokerer.

Attributter

Attribut	Type	Standard / Påkrævet	Beskrivelse
for	string	påkrævet	ID for det relaterede <consent-guard>-element.

Eksempel

<consent-guard id="analytics-guard" consent="analytics">
  <script type="text/plain" data-src="https://example.com/analytics.js"></script>
</consent-guard>

<consent-missing for="analytics-guard">
  Acceptér analyse-cookies for at fortsætte.
</consent-missing>

<compliance-monitor>

Compliance Monitor overvåger udgående anmodninger og validerer consent guard-dækning på dit websted og afslører uhåndterede trackers og regressioner introduceret af webstedsændringer. Inaktiv som standard forbliver den usynlig for besøgende og er sikker at inkludere i produktion.

Attributter

Attribut	Type	Standard / Påkrævet	Beskrivelse
debug	boolean	false	Aktiverer Compliance Monitor-panelet ved sideindlæsning. Kun til udviklingsmiljøer.
delay	number	5000	Netværksobservationsvindue (i millisekunder) inden Compliance Monitor begynder at validere slutpunktforbrug og consent guard-dækning.
ignore-first-party-subdomains	boolean	true	Når den er true, ignoreres forespørgsler til subdomæner af det nuværende domæne i stilhed.
fab-position	left \| right	right	Styrer hvilken side af viewporten Compliance Monitor-FAB'en fastgøres til.

Eksempel

HTML
<compliance-monitor debug delay="5000" ignore-first-party-subdomains="true" fab-position="left"></compliance-monitor>

Compliance Monitor forbliver skjult for besøgende, selv når den er inkluderet i produktionsbundtet. Den anbefalede måde at aktivere den på et live websted er at tilføje ?privacykit=monitor til URL'en — det aktiverer monitoren kun for den pågældende browsersession uden at påvirke besøgsoplevelsen.

Slå til programmatisk:

TypeScriptAPI-reference

window.PrivacyKit?.toggleComplianceMonitor();

Bilag

CSS-snippets

Undgå flicker før webkomponenterne er færdigindlæste. Uden dette snippet kan slottet eller beskyttet HTML kort vises når:

consent-dialog kan blinke kort, hvis du bruger slottede elementer, og de renderes før komponentdefinitionen er indlæst.
consent-guard kan blinke kort, hvis den bruges til betinget HTML, og indholdet renderes før komponenten aktiveres.
consent-missing kan blinke kort, hvis den bruges som fallback, og den renderes før komponenten aktiveres.

Tilføj styling i dit light DOM for at undgå blink.

NPM

CSS
consent-dialog:not(:defined) [slot] {
  display: none;
}

consent-guard:not([active]) {
  display: none;
}

consent-missing:not([active]) {
  display: none;
}
Hvis du bruger slottet indhold eller bruger consent-guards med HTML, så indsæt dette snippet i dit globale stylesheet eller en <style>-tag, der kører før PrivacyKit web components rendres.