KB CookieConsent

Ett kodbibliotek för att underlätta implementationen av dialogrutan för cookie-samtycke.
Bygger på javascript-pluginet CookieConsent v3.

Bra att veta innan du påbörjar implementationen

Innan du påbörjar implementationen av detta script, behöver du veta följande:

- vilka kakor sätts av din tjänst, vad de heter, dess syfte
- vilka kakor räknas till nödvändiga och vilka till icke-nödvändiga
- vilken kategori respektive kaka tillhör (nödvändiga, analytiska, funktionella)

Gemensamt för många tjänster är kakorna som sätts av Matomo (fd. Piwik). Dessa kakor ska tillhöra kategorin Analytiska kakor och ska kunna nekas av besökaren.

En lista med tjänster och kakor finns att hitta i Confluence, dubbelkolla gärna att informationen stämmer för din tjänst.

Lägg till CookieConsent i din tjänst

Implementationen sker på två olika sätt:

- I modernare webbapplikationer genom att installera NPM-paketet som ett beroende till din applikation och använda import i en javascript-fil.

- I äldre applikationer som inte använder sig utav NPM-paket, genom att använda sig utav
`

Modifiera script-taggen på följande sätt:

`html
type="text/plain"
data-category="analytics"
>

var _paq = window._paq || [];

// ...

`

Detta förhindrar att scriptet körs. När användaren godkänner kakor av kategorin analytics, ser CookieConsent till att scriptet aktiveras.

#### Alt 2: Använd callbacks

Om tjänsten aktiverar Matomo inuti egna scripts genom till exempel wrappers, kan det vara enklare att använda sig utav callbacks.

Exempel på Matomo implementation i Vue:

`js
Vue.use(VueMatomo, {
router: app.router,
host: 'https://analytics.kb.se',
siteId: $config.matomoId,
requireConsent: true // lägg till detta
});
`

requireConsent: true ska läggas till och det talar om för Matomo att inte börja samla data omedelbart.

Lägg till följande callbacks i konfigurationen:

`js
// aktivera CookieConsent
KbCookieConsent.run({
categories: {
// ...
},
language: {
// ...
},
onConsent: ({ cookie }) => {
if (cookie.categories.includes('analytics')) {
window._paq = window._paq || [];
window._paq.push(['rememberConsentGiven']);
}
},
onChange: ({ cookie }) => {
if (cookie.categories.includes('analytics')) {
window._paq = window._paq || [];
window._paq.push(['rememberConsentGiven']);
} else {
window._paq.push(['forgetConsentGiven']);
}
}
});
`

#### Läs mer om scripthantering

https://cookieconsent.orestbida.com/advanced/manage-scripts.html

Steg 4: Lägg till en länk i footer

Det är önskvärt att användaren ska kunna revidera och ändra sina inställningar.
Genom att lägga följande länk, förslagsvis i tjänstens footer, möjliggör vi detta:

`html


Hantera kakor


`

Steg 5: Testa att allt fungerar

I Chrome:

##### Kontrollera "Tillåt alla kakor"

- Öppna tjänsten du testar i incognito mode
- Cookie-dialogen borde vara synlig
- Öppna DevTools, öppna Application > Cookies > Din tjänsts url
- Kontrollera att kakor som är frivilliga inte finns i listan över Cookies
- Godkänn alla kakor
- Kontrollera att de kakor som är frivilliga nu finns i listan

##### Kontrollera "Tillåt endast nödvändiga kakor"

- Öppna tjänsten du testar i incognito mode
- Cookie-dialogen borde vara synlig
- Öppna DevTools, öppna Application > Cookies > Din tjänsts url
- Kontrollera att kakor som är frivilliga inte finns i listan över Cookies
- Godkänn endast nödvändiga kakor
- Frivilliga kakor ska inte dyka upp i listan med Cookies

##### Kontrollera "Inställningar"

- Öppna tjänsten du testar i incognito mode
- Cookie-dialogen borde vara synlig
- Klicka på knappen "Inställningar"
- Kontrollera att texter, kategorier och sektioner stämmer
- Öppna DevTools, öppna Application > Cookies > Din tjänsts url
- Aktivera någon sektion med frivilliga kakor (tex. analytiska)
- Klicka "Spara och godkänn"
- Kontrollera att de frivilliga kakorna dyker upp i listan med Cookies
- Klicka på footer-länken "Hantera kakor"
- Inställningar bör dyka upp
- Deaktivera analytiska kakor om dessa var aktiverade
- Klicka "Spara och godkänn"
- Ladda om sidan
- Kakor som tillhör kategorin du precis stängde av bör försvinna från listan med Cookies

Ytterligare konfiguration

I dialogen "Inställningar för kakor" finns det möjlighet att visa en lista på kakor som ingår i en viss kategori, i language.translations.sv.preferencesModal.sections[].cookieTable`

Observera att denna lista är endast till för att förtydliga och beskriva för användaren syftet med varje enskild kaka. Den är inte nödvändig för att dialogen ska fungera.

Läs mer om hur du sätter ihop en sådan lista:
https://cookieconsent.orestbida.com/reference/configuration-reference.html#translation-preferencesmodal-sections

## Kontakt och ansvariga

Krzysztof Bergendahl, systemutvecklare