Om komponenten
OBS! Denne komponenten fungerer inntil videre kun på domener under oslo.kommune.no-hoveddomenet. Vi jobber med å tilby støtte for andre domener.
Consent, også kalt 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.
Denne komponenten er et skall rundt Oslo kommunes felles cookie banner, og forenkler hvordan man kan lytte til endrede samtykker og kjøre tillatte handlinger deretter.
Du kan også bruke Oslo kommunes cookie banner direkte uten denne komponenten. Se Oslo kommunes cookie banner på Github.
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. Funksjonen for å åpne innstillinger senere kan gjøres gjennom en knapp, en lenke eller et ikon.
I tillegg kan man velge å ha lenken i Footer. Se denne sidens footer for eksempel.
Knapp
Lenke
Ikon
Slik bruker du komponenten i kode
Når brukeren bekrefter eller endrer samtykker, vil komponenten sende ut en custom event med navnet toggle-consent. Denne eventen kan brukes til å oppdatere applikasjonen din med de nye samtykkene. Du kan lytte til denne eventen 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 helt 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>Komponentbygger
Her kan du teste ut alle egenskapene til Consent, og få ferdig kode for React og custom element.
Hvordan ta i bruk?
// React
import { PktConsent } from "@oslokommune/punkt-react";
// Custom Element:
import "@oslokommune/punkt-elements/dist/pkt-consent.js";
// Custom Element fra CDN:
<script src="https://punkt-cdn.oslo.kommune.no/latest/elements/pkt-consent.js"></script>;Testing
Dersom dere skal skrive tester med JSDOM eller liknende, er det viktig at dere lar komponenten bli rendret ferdig før dere tester den. Dette kan gjøres ved å kjøre denne kodelinjen før testene kjøres:
await window.customElements.whenDefined("pkt-consent");