Cookiebannern gick inte att krympa med CSS
Andelen annonsbesökare som rörde kontaktformuläret hade fallit från 34 till 8 procent. Annonserna kostade lika mycket som förut och trafiken in till sidorna var oförändrad. Något på själva sajten stoppade folk, och det gick inte att bevisa exakt vad.
Men det första som mötte mig på mobilen var bannern.
En webbyrå i Göteborg. Åtta aktiva annonseringssidor. Cookiebot-installationen körde standardläget. Bannern täckte 36 procent av mobilskärmen.
Min första instinkt: en CSS-override. Det borde ta fem minuter.
Det tog tre försök och slutade utan lyckad krympning.
Tre CSS-varianter och varför de inte funkade
Jag testade alla tre direkt mot den riktiga kontaktsidan i mobilvy, inte i DevTools-labb.
Variant A halverade höjden med max-height och overflow: hidden. Bannern krympte till 18,6 procent av skärmen. Men samtyckestexten och kategoriflikarna försvann. Du kan inte be om cookie-samtycke utan att visa vad besökaren samtycker till. Det är en juridisk risk, inte bara dålig UX. Förkastad.
Variant B behöll texten men klämde den till en remsa med intern scroll. Rubriken kapades. Bannern hamnade på 27,3 procent av skärmen. Tekniskt möjligt, men resultatet såg ut som en felruta. Inte värt det.
Variant C ändrade ingenting på höjden. Det enda som gick igenom var knappfärgerna.
Varför höjden inte styrs av CSS
Problemet är att höjden inte sitter i CSS:en.
En Cookiebot Multilevel-banner är uppbyggd av fem obligatoriska delar: logga med Cookiebot-länk, tre kategoriflikar (Nödvändiga, Preferens, Statistik), ett textblock med förklaring, och tre knappar. Ihop är det ungefär 300 px på en vanlig mobilskärm.
Ingen av de delarna kan tas bort utan att kompromissa med det juridiska samtycket. Det är bannerns minimala lagliga innehåll, inte ett designval.
CSS kan justera padding, färger och typsnitt. Den kan inte ta bort element som bannern kräver för att vara giltig.
Det visade sig att CSS-koden jag editerade inte ens var min att börja med. git blame visade att den skrevs tre dagar tidigare av klientens byggverktyg. Jag la om och om igen på en fil jag inte hade skrivit.
Fällan med knappfärger
Jag försökte också göra “Tillåt alla”-knappen grön och “Avvisa”-knappen grå. Tydligare, rimligen bättre konvertering på samtycket.
Men EDPB, den europeiska dataskyddsmyndigheten, kräver att de två alternativen är lika framträdande. Gör du accept-knappen grön och avvisa-knappen grå styr du besökaren mot ett val. Det räknas som styrning och kan ogiltigförklara samtycket.
Slutresultatet ändrade bara till konforma alternativ, utan att lyfta accept-knappen visuellt. Färgbytet landade, men höjden rörde sig inte.
Det som faktiskt löser det
Bytet sker inte i CSS. Det sker i Cookiebots kontrollpanel.
Multilevel är en av Cookiebots bannertyper, designad för kategoribaserat samtycke. Det är därför den är komplex och tar plats. Byte till ett enklare format, till exempel en bottenlist utan kategoriflikar, ger en kompaktare banner.
Kompromissen är att du tappar granulär kategoriconsent. Det påverkar hur du kan linjera spårning mot besökarens samtyckesbeslut, och det är ett affärsbeslut, inte ett CSS-beslut. Bytet kräver dessutom åtkomst till Cookiebot-kontot, inte till sajtkoden.
Det som var ett större problem
Under samma genomgång hittade jag att sex av åtta aktiva annonseringssidor saknade formulärfält helt.
Det enda sättet för en besökare att ta kontakt var att klicka sig vidare till en separat kontaktsida med tio fält: budget, tidsram, tre fritextfrågor och mer därtill.
Cookie-bannern var ett reellt hinder. Men formulärstrukturen var ett större hinder. Och om du kör Google Ads utan att veta var trafiken faktiskt stannar är det svårt att veta ens var i kedjan det brister.
Consent-implementationen i taggningsstacken är ett separat lager, men det hjälper inte om besökaren aldrig rör formuläret.
De tre problemen satt på samma sajt. Separat hanterbara, men alla hämmade resultaten.
Sitter du med annonser som kostar och leads som uteblir är det sällan annonserna som är felet. En gratis Google Ads-analys tittar på kontot och på vad klicket faktiskt möter, i samma genomgång.
Vanliga frågor
Kan jag krympa min Cookiebot-banner med CSS?
Du kan justera padding, bakgrundsfärg och typsnitt. Men höjden på en Multilevel-banner styrs av bannerns obligatoriska innehåll. Ingen CSS tar bort de delarna utan att bryta mot legal compliance.
Vilken Cookiebot-typ tar minst plats på mobilskärmen?
En enkel bottenlist utan kategoriflikar. Bytet görs i Cookiebots kontrollpanel, inte i sajtkoden. Nackdelen är att du tappar granulär kategoriconsent, vilket kan påverka hur spårning och samtycke stämmer mot varandra.
Är det ett problem att göra acceptera-knappen grön och avvisa-knappen grå?
Ja, om det upplevs som att en knapp är viktigare. EDPB kräver att de två alternativen är lika framträdande. Tydlig visuell prioritering av accept räknas som styrning och kan ogiltigförklara samtycket.
Hur mäter jag hur stor del av mobilskärmen min banner täcker?
Öppna DevTools i Chrome, växla till mobilvy och inspektera bannerns höjd. Dela med skärmhöjden. position: fixed med en angiven höjd är det du letar efter.
Påverkar cookie-bannern Google Ads-prestanda?
En banner som täcker formuläret fysiskt minskar chansen att en besökare startar konversationen. Exakt hur stor effekt det ger beror på sajten, men 36 procent av mobilskärmen är ett hinder oavsett varifrån trafiken kommer.