Evästehallinta SvelteKit-projektissa

Jos verkkosivustosi käyttää evästeitä, jotka keräävät henkilötietoja, kuten IP-osoitteen tai käyttäjän käyttäytymisen sivustolla, tarvitset tavan, jolla käyttäjät voivat hallita evästeasetuksiaan.

Tehdään esimerkkiprojekti, jossa demonstroidaan käyttäjän evästehallintaa.

Ladataan tarvittavat kirjastot demoa varten

Alustetaan ensin uusi SvelteKit-projekti:

npx sv create test-cookies
cd test-cookies
npm install
npm run dev

Huom: Tämä evästehallintaratkaisu ei ole alustariippuvainen, vaan toimii kaikilla JavaScript-pohjaisilla alustoilla

Ladataan seuraavaksi CookieConsent-työkalu evästeiden hallintaa varten:

npm i [email protected]

Evästehallinnan asetukset

Lisätään seuraavaksi +layout.svelte-tiedosto routes-kansioon juureen ja tuodaan CookieConsent-kirjaston tyylit +page.svelte-tiedostoon:

<script lang="ts">
import 'vanilla-cookieconsent/dist/cookieconsent.css';
// ...muu koodi
</script>

Lisätään myös $effect rune edelliseen script-tagiin, jossa alustetaan CookieConsent-lisäosa:

$effect runen sisällä oleva koodi suoritetaan yhden kerran heti kun +layout.svelte tiedoston koodi on kiinnitetty DOM:iin, mikä varmistaa sen että evästehallintamoduuli ladataan oikein

<script lang="ts">
	import * as CookieConsent from 'vanilla-cookieconsent';
	import 'vanilla-cookieconsent/dist/cookieconsent.css';
	import * as fiTranslation from '$lib/translations/fi.json';

	let { children } = $props();

	$effect(() => {
		CookieConsent.run({
			mode: 'opt-in',
			revision: 1,
			categories: {
				necessary: {
					enabled: true,
					readOnly: true
				},
				analytics: {
					enabled: false
				},
				marketing: {
					enabled: false
				}
			},
			language: {
				default: 'en',
				translations: {
					en: fiTranslation
				}
			}
		});
	});
</script>

Lisätään vielä +layout.svelte-tiedoston head osioon skriptit joilla lisätään testausta varten analytiikka ja markkinointi evästeet:

<svelte:head>
	<script type="text/js" data-category="analytics">
		(function () {
			document.cookie = 'analytics=true; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/';
		})();
	</script>
	<script type="text/js" data-category="marketing">
		(function () {
			document.cookie = 'marketing=true; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/';
		})();
	</script>
</svelte:head>

Luodaan seuraavaksi uusi tiedosto $lib/translations/fi.json, joka sisältää suomenkieliset tekstit evästehallintalisäosaa varten:

{
    "consentModal": {
        "label": "Sivun evästeet",
        "title": "Käytämme evästeitä",
        "description": "Kuvaus sivulla käyettävistä evästeistä",
        "acceptAllBtn": "Hyväksy kaikki",
        "acceptNecessaryBtn": "Hyväksy välttämättömät",
        "showPreferencesBtn": "Muokkaa valintoja",
        "footer": "<a href=\"/tietosuojaseloste\">Tietosuojaseloste</a>"
    },
    "preferencesModal": {
        "title": "Evästeiden hallinta",
        "acceptAllBtn": "Hyväksy kaikki",
        "acceptNecessaryBtn": "Hyväksy vain välttämättömät",
        "savePreferencesBtn": "Tallenna valinnat",
        "closeIconLabel": "Sulje",
        "sections": [
            {
                "title": "Evästevalinnat",
                "description": "Kuvaus sivulla käyettävistä evästeistä"
            },
            {
                "title": "Välttämättömät evästeet",
                "description": "Kuvaus sivulla käytetyistä välttämättömistä evästeistä ",
                "linkedCategory": "necessary"
            },
            {
                "title": "Analytiikkaevästeet",
                "description": "Kuvaus sivulla käytetyistä analytiikkaevästeistä",
                "linkedCategory": "analytics",
                "cookieTable": {
                    "caption": "Evästeet",
                    "headers": {
                        "name": "Nimi",
                        "description": "Kuvaus",
                        "duration": "Kesto"
                    },
                    "body": [
                        {
                            "name": "Evästeen nimi",
                            "description": "Evästeen kuvaus",
                            "duration": "Evästeen kesto"
                        }
                    ]
                }
            },
            {
                "title": "Markkinointievästeet",
                "description": "Kuvaus sivulla käytetyistä markkinointievästeistä",
                "linkedCategory": "marketing",
                "cookieTable": {
                    "caption": "Evästeet",
                    "headers": {
                        "name": "Nimi",
                        "description": "Kuvaus",
                        "duration": "Kesto"
                    },
                    "body": [
                        {
                            "name": "Evästeen nimi",
                            "description": "Evästeen kuvaus",
                            "duration": "Evästeen kesto"
                        }
                    ]
                }
            }
        ]
    }
}

Evästehallinnan toiminnan testaus

Avataan testiserveri komennolla:

npm run dev

Käynnistettyäsi testipalvelimen sivulla pitäisi näkyä evästehallintamoduuli suomenkielisin tekstein, jotka määriteltiin fi.json-tiedostossa. Voit testata evästehallinnan eri valintoja poistamalla evästeet selaimen dev toolsista valinnan jälkeen.

CookieConsent moduulin sivuilla on myös ohjeet miten moduulin voi tarvittaessa integroida tietokannan kanssa, esimerkiksi tallentamalla vierailijoiden suostumuksen tietokantaan tai hakemalla moduulin eri käännökset tietokannasta.