PrivacyKit Webkomponenter

Offentlig dokumentasjon av webkomponentene consent-dialog, consent-guard, consent-missing og compliance-monitor.

Innholdsfortegnelse

<consent-dialog>

Hovedkomponenten for PrivacyKit-dialogen og orkestreringslogikken.

Attributter

Attributt	Type	Standard / Påkrevd	Beskrivelse
variant	standard \| panel \| modern \| modest	standard	Visuell variant av dialogen.
theme	standard \| dark \| teal \| slate \| light \| vibrant \| high-contrast	standard	Visuelt tema for dialogen.
expires-days	number	180	Levetid for cookie i dager.
version	number	0	Versjon av samtykkeschema som brukes for re-samtykke.
google-consent-mode	boolean	unset	Sender Google Consent Mode v2-samtykkesignaler basert på brukerens PrivacyKit-samtykkevalg.
locale	da \| de \| en \| es \| fi \| fr \| it \| nl \| no \| pl \| sv	fra nettleser	Overstyrer språk.
hide-summary-part-2	boolean	unset	Skjuler oppsummering del 2 (dialog-summary-part-2) i dialogen.
hide-necessary	boolean	unset	Skjuler kategorien Nødvendig.
hide-preferences	boolean	unset	Skjuler kategorien Preferanser.
hide-analytics	boolean	unset	Skjuler kategorien Analyse.
hide-marketing	boolean	unset	Skjuler kategorien Markedsføring.
hide-readmore	boolean	unset	Skjuler den utvidbare Les mer-seksjonen.
hide-privacykit-badge	boolean	unset	Skjuler PrivacyKit-merket som vises nederst i samtykkedialogboksen.
hide-privacy-policy-link	boolean	unset	Skjuler standardlenken til personvernerklæringen fullstendig. Bruk `privacy-policy-url` i stedet for å beholde lenken synlig og omdirigere brukerne til din egen personvernerklæringsside.
privacy-policy-url	string	unset	URL som brukere omdirigeres til når de klikker på lenken til personvernerklæringen. Når angitt, åpnes denne URL-en i stedet for den innebygde personverndialogen.
demo	boolean	unset	Demo-modus: deaktiverer auto-open og begrenser funksjoner. Ikke GDPR-kompatibel og må ikke brukes i produksjon.
dismissible	boolean	false	Styrer om dialogen kan lukkes via bakgrunn/escape når bruker ikke har tatt stilling.
show-fab	boolean	false	Aktiverer samtykkeinnstillinger-knappen. Har ingen synlig effekt før et samtykkecookie finnes.
fab-position	left \| right	left	Fester knappen nederst til venstre eller nederst til høyre i visningsvinduet.
dialog-position	left \| right	left	Styrer hvilken side av skjermen dialogen vises på. Gjelder kun for modern- og modest-variantene — standard og panel er alltid sentrert.

Eksempel

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

Lokalisering

<consent-dialog> leveres med innebygde oversettelser for engelsk, norsk, tysk, polsk, spansk, fransk, italiensk, nederlandsk, svensk, dansk og finsk — ingen oversettelsesfiler å laste inn eller vedlikeholde selv.

Automatisk gjenkjenning

Som standard leser dialogen besøkendes nettleserspråk og viser den tilhørende oversettelsen automatisk. Hvis nettleseren er satt til et språk PrivacyKit ikke støtter, faller den tilbake til engelsk.

Overstyre språket

For å tvinge frem et bestemt språk uavhengig av den besøkendes nettleserinnstillinger, sett attributtet locale — se tabellen ovenfor for hele listen over støttede koder.

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

Designtokens

Designtokens gir et stabilt sett CSS-variabler slik at du kan tilpasse farger, mellomrom og typografi uten å endre implementasjonen. Innebygde temaer drives av det samme token-systemet, slik at du kan overstyre individuelle stiler eller lage et helt tilpasset utseende.

Designtokens	Beskrivelse
--pk-transparency	Gjennomsiktighet for dialogflaten og dens nestede kort/akkordeoner, oppgitt som prosent. 0 % (standard) er helt solid, og verdien klippes til maks 50 %.
--pk-bg-color	Bakgrunnsflate for hele dialogskallet. Blandes med --pk-transparency for å gi den endelige fargen.
--pk-paper-color	Papirflate for kort, akkordeoner og paneler inne i dialogen. Blandes også med --pk-transparency.
--pk-text-color	Grunnfarge for overskrifter og brødtekst.
--pk-text-color-on-primary	Tekstfarge brukt på elementer fylt med primærfargen, som for eksempel helfylte knapper.
--pk-primary-color	Primær aksent for CTA-er, fokusringer og lenker.
--pk-secondary-color	Sekundær aksent, hovedsakelig for bryter/knott-tilstander.
--pk-focus-ring-color	Farge på fokusomriss (outline) for tastaturfokus.
--pk-font-family	Skrifttype for all tekst; faller tilbake til body-fonten.
--pk-spacing-unit	Avstandsenhet som styrer padding og gap.
--pk-control-border-color	Kantfarge for kontroller inne i dialogen — kort, akkordeoner, knapper og lignende elementer.
--pk-control-border-width	Kantbredde for kontroller inne i dialogen — kort, akkordeoner, knapper og lignende elementer.
--pk-control-border-radius	Hjørneradius for knapper, felt og interaktive kontroller.
--pk-dialog-border-color	Kantfarge for selve dialogens ramme — konturen av det ytre panelet og skillelinjene i header/footer.
--pk-dialog-border-width	Kantbredde for selve dialogens ramme — konturen av det ytre panelet og skillelinjene i header/footer.
--pk-dialog-border-radius	Hjørneradius for den ytre beholderen til samtykkedialogen.
--pk-dialog-max-height	Maksimal høyde på samtykkedialogen; når innholdet overstiger denne grensen, ruller dialogens innhold.
--pk-dialog-shadow	Skygge som brukes på dialogen.

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>

Innhold-slots

Sett inn egendefinert innhold i bestemte deler av en komponent ved å bruke navngitte HTML-slots — da får du full kontroll over innhold og styling uten å endre selve komponenten.

Slot-navn	Beskrivelse
dialog-logo-top	Valgfritt logo- eller merkebilde vist i toppteksten til samtykkedialogboksen.
dialog-logo-right	Valgfritt logo- eller merkebilde vist øverst til høyre i samtykkedialogboksen.
dialog-title	Overstyrer tittelen i dialogens toppseksjon.
dialog-summary-part-1	Legger inn egendefinert tekst i det første introavsnittet under dialogtittelen.
dialog-summary-part-2	Legger inn egendefinert tekst i det andre introavsnittet som forklarer samtykkevalgene.
necessary-content	Egendefinert tekst for kategorien Nødvendig.
preferences-content	Egendefinert tekst i akkordeonen for Preferanser.
analytics-content	Egendefinert tekst i akkordeonen for Analyse.
marketing-content	Egendefinert tekst i akkordeonen for Markedsføring.
read-more-title	Setter overskriften til delen "Les mer".
read-more-content	Innhold som vises når "Les mer" åpnes.
privacy-policy-content	Erstatter standardteksten for personvernerklæringen. Bruk kun formuleringer godkjent av egen juridisk rådgiver, siden PrivacyKit ikke kan verifisere GDPR compliance etter at du tilpasser innholdet.

Eksempel

HTML
<consent-dialog theme="standard" variant="standard" locale="no" version="1">
  <img slot="dialog-logo-top" width="100px" src="/logo.png" alt="Firmalogo" />
  <div slot="dialog-title" class="din-klasse">
    <h2>Vi bruker informasjonskapsler</h2>
  </div>
  <span slot="marketing-content">
    <b>Vi samler for øyeblikket ikke inn informasjonskapsler for markedsføringsformål.</b>
  </span>
</consent-dialog>

Flytende dialogknapp

Når show-fab er satt til true, viser <consent-dialog> en floating action button (FAB) som lar brukere re-åpne samtykkevalgene etter at de har sendt inn sitt første samtykke. Bruk fab-position for å feste den nederst til venstre eller nederst til høyre i visningsvinduet.

Synlighetsregler

Skjult til initialt samtykke er sendt inn.
Skjult mens samtykkedialogen eller personvernerklæringsdialogen er åpen.
Skjult hvis show-fab ikke er satt eller er satt til false.

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

Google Consent Mode v2

Når google-consent-mode er aktivert, leser PrivacyKit brukerens samtykkevalg og signaliserer dem til Google Tag Manager eller gtag ved hjelp av Google Consent Mode v2-protokollen. Dette skjer automatisk ved sidelasting og hver gang brukeren endrer samtykket sitt. Ingen ytterligere konfigurasjon er nødvendig utover å legge til attributtet.

Anbefalt oppsett

Å kombinere <consent-guard> rundt GTM-snutten din med google-consent-mode på dialogen er en håndhevelsesbasert tilnærming: GTM kan ikke lastes i det hele tatt før samtykke er gitt, og Google Consent Mode v2-signaler sendes umiddelbart når det skjer. GTM er bare en beholder — den kan inneholde analysetagger, markedsføringstagger, eller begge deler, avhengig av hva du har konfigurert inni den. Sett consent-uttrykket på <consent-guard> til å matche: marketing hvis GTM kun utløser markedsførings-/annonsetagger, analytics hvis den er ren analyse, eller analytics+marketing hvis den utløser begge deler.

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>

Samtykkesignal-mapping

PrivacyKit kobler sine tre samtykkekategorier til Googles syv Consent Mode v2-felt:

GCM v2-felt	Koblet fra	Verdi
analytics_storage	Analyse	granted / denied
ad_storage	Markedsføring	granted / denied
ad_user_data	Markedsføring	granted / denied
ad_personalization	Markedsføring	granted / denied
functionality_storage	Preferanser	granted / denied
personalization_storage	Preferanser	granted / denied
security_storage	—	Always granted

security_storage er alltid granted, siden det dekker sikkerhetskritisk nettleserlagring og ikke er underlagt valgfritt sporingssamtykke.

Hvordan signaler sendes

PrivacyKit sjekker om window.gtag er tilgjengelig (Google Tag Manager eller gtag.js er lastet). Hvis det er tilfelle, kaller 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 tilgjengelig, men window.dataLayer er det, sender PrivacyKit samtykkeoppdateringen direkte til dataLayer. Hvis ingen av delene finnes, sendes intet signal, og ingenting køes.

Når Google Tag Manager er beskyttet av <consent-guard> — altså at den først lastes etter at brukeren gir samtykke — forsøker PrivacyKit automatisk å sende signalet på nytt etter at GTM er ferdig lastet.

Feilsøkingstips: PrivacyKit logger sin Google Consent Mode v2-aktivitet til nettleserkonsollen, slik at du kan bekrefte oppførselen direkte i DevTools:

[PrivacyKit] Google Consent Mode v2 update emitted.
Et samtykkesignal ble sendt til gtag eller dataLayer.
[PrivacyKit] Google Consent Mode v2 update skipped because no Google tag was detected.
Verken gtag eller dataLayer ble funnet i nettleseren, så ingenting ble sendt.

Dialogmetoder

TypeScriptAPI-referanse

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

<consent-guard>

Viser innhold først når det angitte samtykkeuttrykket evalueres til sann.

Attributter

Attributt	Type	Standard / Påkrevd	Beskrivelse
consent	string	unset	Samtykkeuttrykk som må være oppfylt før innhold rendres.

Samtykkeuttrykk

Uttrykk	Påkrevd samtykke	Beskrivelse
	Alle kategorier	Hvis consent-attributten utelates, må alle kategorier godkjennes for at guard-en skal aktiveres.
necessary	Ingen	Forhindrer falske positiver i Compliance Monitor for nødvendige ressurser som ikke automatisk gjenkjennes av PrivacyKit.
preferences	Preferanser
analytics	Analyse
marketing	Markedsføring
preferences+analytics	Preferanser OG Analyse
preferences\|analytics	Preferanser ELLER Analyse
preferences+marketing	Preferanser OG Markedsføring
preferences\|marketing	Preferanser ELLER Markedsføring
analytics+marketing	Analyse OG Markedsføring
analytics\|marketing	Analyse ELLER Markedsføring

Eksempel 1 – Beskytt skript

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

Eksempel 2 – Beskytt innebygd innhold

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>

Viktig: Legg merke til at håndterte ressurser i eksemplene bruker data-src i stedet for src, og type="text/plain" brukes for skript. PrivacyKit aktiverer håndtert innhold etter at samtykke er gitt — ellers kan ressurser laste umiddelbart og fremstå som hardkodet i Compliance Monitor.

<consent-missing>

Vis fallback-innhold når en tilhørende consent-guard blokkerer hovedinnholdet.

Attributter

Attributt	Type	Standard / Påkrevd	Beskrivelse
for	string	påkrevd	ID til tilhørende <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">
  Vennligst godta analyse-cookies for å fortsette.
</consent-missing>

<compliance-monitor>

Compliance Monitor overvåker utgående forespørsler og validerer samtykke-dekning på nettstedet ditt, og avdekker uhåndterte trackers og regresjoner som skyldes nettstedsendringer. Inaktiv som standard forblir den usynlig for besøkende og er trygg å inkludere i produksjon.

Attributter

Attributt	Type	Standard / Påkrevd	Beskrivelse
debug	boolean	false	Aktiverer Compliance Monitor-panelet ved sideinnlasting. Kun for utviklingsmiljøer.
delay	number	5000	Nettverksobservasjonsvindu (i millisekunder) før Compliance Monitor begynner å validere endepunktbruk og samtykke-dekning.
ignore-first-party-subdomains	boolean	true	Når den er true, ignoreres forespørsler til subdomener av nåværende domene i stillhet.
fab-position	left \| right	right	Styrer hvilken side av viewporten Compliance Monitor-FAB-en festes til.

Eksempel

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

Compliance Monitor forblir skjult for besøkende selv når den er inkludert i produksjonspakken. Den anbefalte måten å aktivere den på et nettsted i produksjon er å legge til ?privacykit=monitor i URL-en — det aktiverer monitoren kun for den nettlesersøkten uten å påvirke besøkendes opplevelse.

Slå på programmatisk:

TypeScriptAPI-referanse

window.PrivacyKit?.toggleComplianceMonitor();

Tillegg

CSS-snutter

Unngå flimmer før webkomponentene er ferdig lastet. Uten dette utdraget kan beskyttet HTML blinke kort når:

consent-dialog kan blinke kort hvis du bruker slottede elementer, og de rendres før komponentdefinisjonen er lastet.
consent-guard kan blinke kort hvis den brukes for betinget HTML, og innholdet rendres før komponenten aktiveres.
consent-missing kan blinke kort hvis den brukes som fallback, og den rendres før komponenten aktiveres.

Legg til styling i ditt eget light DOM for å unngå flimmer.

NPM

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

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

consent-missing:not([active]) {
  display: none;
}
Hvis du bruker slottet innhold eller bruker consent-guards med HTML, inkluder dette utdraget i ditt globale stilark eller en <style>-tagg som kjøres før PrivacyKit web components rendres.