Många webbplatser löser cookie-hantering genom att köpa en tjänst. Cookiebot, OneTrust och Osano lovar GDPR-compliance med några klick. Men de kostar pengar varje månad, ger sällan full kontroll över användarupplevelsen, och är ofta överdimensionerade för små organisationer.
Vi valde att bygga vår egen. Kostnaden är lägre, men det var inte det som avgjorde. Det handlade om att ha kontroll över hur integritet faktiskt hanteras, inte bara hur det ser ut utåt.
Vad vi ville uppnå
Cookie-hantering är inte en juridisk checkbox. Det är en del av användarupplevelsen och en del av hur vi samlar data.
Den grundläggande förutsättningen var att bannern faktiskt respekterar användarens val. Inte bara visar en modal och ignorerar svaret, utan stoppar tracking omedelbart när användaren säger nej. Det låter självklart, men många implementationer, inklusive en del betalda tjänster, gör inte det.
Vi ville att integrationen med vår tracking-infrastruktur skulle vara direkt, utan mellanhand. Cookie-val behöver nå GTM Consent Mode v2 och Meta Pixel utan fördröjning eller beroende av externa scripts som kan misslyckas. Hur cookie-hanteringen hänger ihop med den övergripande tracking-arkitekturen beskriver vi i Tracking byggt för att svara på affärsfrågor.
Kostnaden spelade roll. Flera hundra kronor i månaden för en cookie-tjänst är en onödig utgift när lösningen kan byggas en gång och sedan uppdateras i takt med förändrade regler och behov.
Hur vi tänkte
Istället för att googla "bästa cookie banner-tjänst" beskrev jag problemet för ChatGPT: vi behöver en banner som sparar val, uppdaterar GTM och Meta Pixel, och faktiskt respekterar när användaren säger nej.
Det blev en designdialog där vi byggde lösningen steg för steg. Vi diskuterade hur consent-val ska lagras, hur Consent Mode v2 fungerar internt i GTM, och hur Meta Pixel hanterar när en användare drar tillbaka sitt samtycke.
Konkret exempel: ChatGPT föreslog inledningsvis att spara consent i cookies. Jag påpekade att det skapar en cirkelreferens: vi behöver spara consent innan vi kan sätta cookies. Vi landade i localStorage, som är tillgängligt direkt och inte kräver cookies för att fungera.
Den stora skillnaden mot att köpa tjänst var att vi designade lösningen för vår specifika stack. Istället för att anpassa vår stack till en generisk tjänst byggde vi något som passar exakt våra behov.
Vad vi skapade
Cookie-bannern är implementerad som vanilla JavaScript i en enda fil, utan externa bibliotek eller ramverk. Den består av tre delar: visuell banner, consent-lagring, och integration med tracking-systemen.
Den visuella bannern är en bottom sheet som visas vid första besök. Vi designade mobile-first med safe-area-stöd för iPhone-notch och max-height på 85 % av skärmhöjden för att fungera på alla skärmstorlekar. Touch targets uppfyller WCAG 2.1, vilket innebär minst 44 px höjd på alla interaktiva element. Användaren kan välja "Tillåt alla", "Spara val" med individuella toggles per kategori, eller acceptera bara nödvändiga cookies.
Consent-lagring sker i localStorage med nyckeln cookie-consent. Objektet innehåller tre värden: necessary (alltid true), analytics och marketing, plus en timestamp. Det gör att vi kan läsa valet direkt när sidan laddas, utan att vänta på externa scripts.
Integration med tracking sker via två kanaler. GTM Consent Mode v2 uppdateras via dataLayer när användaren gör ett val. analytics_storage och ad_storage sätts till granted eller denied baserat på valet. Meta Pixel tar emot ett fbq('consent', 'grant') eller fbq('consent', 'revoke') beroende på om marketing-cookies är aktiverade.
När användaren senare ändrar val via "Cookie-inställningar" i footern rensas cookies och localStorage för de kategorier som avaktiveras. Det är inte bara att stoppa framtida tracking, utan att faktiskt ta bort det som redan samlats in.
Resultat och lärdomar
Bannern är live och fungerar. Användare kan göra informerade val, valen respekteras omedelbart i tracking-systemen, och vi har full kontroll över design och funktionalitet.
Det intressanta är inte bara att det fungerar, utan vad det möjliggör. Vi kan iterera på designen utan att vänta på en leverantör. Vi kan lägga till nya cookie-kategorier när behovet uppstår. Vi kan anpassa texten och upplevelsen för att matcha produktens ton. Och vi betalar inget per månad.
Att bygga själva gav oss förståelse, inte bara kontroll. När vi diskuterar integritet med användare eller samarbetspartners vet vi exakt hur systemet fungerar. Vi kan förklara varför vi samlar data, hur vi respekterar val, och vad som händer när någon säger nej. Det är en trovärdigare position än att peka på en checkbox från en tredjepartstjänst.
Mobile-first var rätt prioritering. Cookie-banners är ofta problematiska på mobil, för stora, för komplexa eller för svåra att stänga. Genom att designa för mobil och sedan anpassa för desktop fick vi en upplevelse som fungerar där användarna faktiskt är.
localStorage istället för cookies för att lagra consent löste ett verkligt problem. Det undviker cirkelreferensen och gör att vi kan läsa consent innan några cookies sätts. En liten detalj, men den gör hela flödet enklare och mer pålitligt.
Hur vi går vidare
Bannern fungerar, men integritet är ett pågående arbete. När vi lägger till nya tracking-verktyg måste vi se till att de respekterar cookie-val. När GDPR-regler uppdateras måste vi uppdatera texten och funktionaliteten.
På längre sikt behöver vi consent-hantering för iOS och Android-apparna. När de är i produktion behöver användarens val på webben och i appen hänga ihop. Det är en del av den cross-platform tracking-infrastruktur vi bygger mot, som vi beskriver i Tracking byggt för att svara på affärsfrågor.
Verktyg i den här processen
- Vanilla JavaScript – Ingen ramverk, inga externa bibliotek. En fil som fungerar överallt.
- localStorage API – Lagrar consent-val utan att kräva cookies. ⓘ
- GTM Consent Mode v2 – Googles ramverk för GDPR-compliant tracking. Uppdateras direkt via dataLayer.
- Meta Pixel Consent API – Hanterar när Meta Pixel ska aktiveras eller stängas av baserat på användarens val.
- ChatGPT – Användes som designpartner för arkitektur och problemlösning.