Consent
Release dato: 05.05.2025
Sist oppdatert: 19.06.2025
Consent (cookie banner) lar brukeren gi samtykke til informasjonskapsler og annen datainnsamling. Den brukes for å informere brukeren om hvordan dataene deres blir brukt og for å gi dem muligheten til å godta eller avslå bruken av informasjonskapsler.
Du kan også bruke Oslo kommunes cookie banner direkte uten denne komponenten. Se Oslo kommunes cookie banner på Github.
Test komponenten
Varianter
Selve modalvinduet er alltid likt, men metodene for å åpne den kan varieres. På første innlasting av siden vil den alltid åpne dersom brukeren ikke tidligere har gitt samtykker.
| Triggertype | Beskrivelse |
|---|---|
| Knapp | Åpner consent via knapp |
| Lenke | Åpner consent via lenke |
| Ikon | Åpner consent via ikon |
Retningslinjer for bruk
Bruk consent når
- du skal innhente eller oppdatere samtykker til bruk av cookies og sporing
- du må gi brukeren tydelig informasjon om hvordan data brukes
Unngå consent når
- du ikke håndterer data eller sporing som krever samtykke
- du ønsker å informere om noe annet enn cookies og personvern (bruk da modal)
Consent skal være enkel å forstå
Bruk tydelig språk som forklarer hva brukeren samtykker til, og gi alltid mulighet til å avslå eller endre senere.
Gjør consent og innstillinger lett tilgjengelig
Funksjonen for å åpne innstillinger senere kan gjøres gjennom en knapp, en lenke eller et ikon.
Responsivitet
Consent fungerer på alle skjermstørrelser og tilpasser seg automatisk tilgjengelig plass. På mobil åpner den som et helskjerms modalvindu. Vi anbefaler å teste hvordan teksten fremstår på små skjermer for å sikre at informasjonen er lett å lese.
Universell utforming
- Knappen for å endre eller avslå samtykker skal være tydelig og tilgjengelig
- Bruk klarspråk slik at innholdet er lett å forstå
Forskning på hvordan brukere forstår og håndterer samtykker
Anatomi
| Element | Beskrivelse |
|---|---|
| 1. Tittel | Overskrift som forklarer at Oslo kommune bruker informasjonskapsler |
| 2. Brødtekst | Forklarer hva cookies brukes til og hva samtykke innebærer |
| 3. Primærhandling | Godta alle |
| 4. Sekundærhandling | Kun nødvendige |
| 5. Innstillinger for informasjonskapsler | Åpner innstillinger for å endre samtykker |
| 6. Illustrasjon | Illustrasjon av en kjeks |
| 7. Logo | Oslo-logo som viser Oslo kommune som avsender |
Implementasjon i kode
Hvordan ta komponenten i bruk?
import @oslokommune/punkt-elements/dist/pkt-consent.js;import { PktConsent } from '@oslokommune/punkt-react';<script src="https://punkt-cdn.oslo.kommune.no/17/elements/pkt-consent.js" type="module"></script>Testing
Elements og React: Dersom du skal skrive tester med JSDOM eller liknende er det viktig at du lar komponenten bli rendret ferdig før du tester den. Dette kan gjøres ved å kjøre denne kodelinjen før testene kjøres:
await window.customElements.whenDefined("pkt-consent");Dersom du bruker verktøyene i punkt-testing-utils så kan dette bli gjort automatisk for deg.
Håndtering av samtykker
Når brukeren bekrefter eller endrer samtykker, vil komponenten sende ut et custom event med navnet toggle-consent. Dette eventet kan brukes til å oppdatere applikasjonen din med de nye samtykkene. Du kan lytte til dette eventet ved å bruke addEventListener eller ved å bruke onToggleConsent-prop’en i React.
Custom event-hendelsen inneholder en detail-egenskap som er et objekt med de samtykkene brukeren har gitt. Dette objektet vil se slik ut:
{
"statistics": true,
"survey": true,
"functional": true
}I tillegg til at man kan sjekke hvilke samtykker brukeren har gitt og agere deretter, kan man også sende inn attributtene googleAnalyticsId og hotjarId for å aktivere Google Tag Manager/Google Analytics og Hotjar uten å måtte sette opp noe selv.
<pkt-consent id="osloConsent" googleAnalyticsId="GTM-00000"></pkt-consent>
<script>
const consent = document.querySelector("#osloConsent");
consent.addEventListener("toggle-consent", (event) => {
console.log(event.detail);
});
</script><PktConsent
googleAnalyticsId="GTM-00000"
onToggleConsent={(event) => {
console.log(event.detail);
}}
/><pkt-consent
googleAnalyticsId="GTM-00000"
@toggle-consent="(event) => {
console.log(event.detail);
}}"
></pkt-consent>Bruk på andre domener enn *.oslo.kommune.no
Ut av boksen vil Consent-komponenten kun fungere på domener som ender på .oslo.kommune.no. Dersom du ønsker å bruke den på et annet domene, f.eks. localhost eller *.oslo.systems, kan du sette attributten cookieDomain til det domenet du ønsker å bruke. Dette må gjøres både i HTML og i React/Vue.
Om du skal bruke Consent både i testmiljøer og i produksjon anbefaler vi at du sjekker window.location.hostname og setter cookieDomain deretter. Dette kan gjøres slik:
<script>
function getCookieDomain(host) {
if (host.includes("oslo.systems")) return ".oslo.systems";
if (host.includes("oslo.kommune.no")) return ".oslo.kommune.no";
return host;
}
window.cookieBanner_cookieDomain = getCookieDomain(window.location.hostname);
</script>
<pkt-consent id="osloConsent"></pkt-consent>function getCookieDomain(host) {
if (host.includes("oslo.systems")) return ".oslo.systems";
if (host.includes("oslo.kommune.no")) return ".oslo.kommune.no";
return host;
}
const cookieDomain = getCookieDomain(window.location.hostname);
return <PktConsent cookieDomain={cookieDomain} />;Content Security Policy / CSP
For å bruke Consent i din applikasjon må du tillate https://cdn.web.oslo.kommune.no (eller https://*.oslo.kommune.no) i din Content Security Policy. Spesifikt må script-src og style-src tillates og dette kommer av at Consent laster inn innhold fra Oslo kommunes CDN.
Spør oss gjerne om du trenger hjelp til å sette opp CSP!
Egenskaper
Props
- Prop:
-
triggerType? - Type:
-
"button" | "link" | "icon" - Beskrivelse:
- Type element som brukes for å trigge visning av innstillinger for samtykke
- Prop:
-
triggerText? - Type:
-
string - Beskrivelse:
- Tekst som vises på trigger-elementet
- Prop:
-
googleAnalyticsId? - Type:
-
string - Beskrivelse:
- ID for Google Analytics eller Google Tag Manager
- Prop:
-
hotjarId? - Type:
-
string - Beskrivelse:
- ID for Hotjar
- Prop:
-
devMode? - Type:
-
boolean - Beskrivelse:
- Aktiverer utviklermodus for testing av samtykkeinnstillinger
- Prop:
-
cookieDomain? - Type:
-
string - Beskrivelse:
- Domene for cookies, brukes for å sette cookies på riktig domene
- Prop:
-
cookieSecure? - Type:
-
boolean - Beskrivelse:
- Angir om cookies skal settes som sikre (kun over HTTPS)
- Prop:
-
cookieExpiryDays? - Type:
-
string - Beskrivelse:
- Antall dager før cookies utløper
Events
- Event:
-
toggle-consent - Type:
- —
- Beskrivelse:
- Event som trigges når brukeren lagrer eller oppdaterer samtykke
- Event:
-
onToggleConsent - Type:
- —
- Beskrivelse:
- React-Event som trigges når brukeren lagrer eller oppdaterer samtykke