Mitä evästebannerin pitää tehdä

Evästebannerin tehtävä on kysyä kävijältä lupa muille kuin välttämättömille evästeille ennen kuin niitä tallennetaan, ja antaa hänen kieltäytyä yhtä helposti kuin hyväksyä. Jos banneri näyttää valinnat mutta seurantakoodit latautuvat silti heti, se ei tee tehtäväänsä, vaikka näyttäisi kuinka viimeistellyltä tahansa.

Banneri on siis kytkin eikä ilmoitus. Sen arvo mitataan sillä, mitä sivulla tapahtuu ennen klikkausta ja klikkauksen jälkeen, ei sillä, mitä bannerissa lukee.

Siksi bannerin tarkistaminen ei vaadi juristia eikä kehittäjää. Riittää tavallinen selain ja tieto siitä, mitä etsiä. Kaikki alla oleva on tarkistettavissa omalla koneella ilman erillisiä työkaluja.

Laki ja sen tulkinta on käyty läpi artikkelissa evästeet verkkosivuilla. Tämä ohje keskittyy siihen, miten banneri tehdään ja miten näet, toimiiko se.

Millainen evästebannerin pitää olla?

Hyvä evästebanneri kysyy luvan ennen kuin mitään ei-välttämätöntä tallennetaan, antaa hyväksyä ja kieltäytyä yhtä helposti ja kertoo, mistä kävijä on päättämässä. Traficomin evästeohjeistuksesta palveluntarjoajille ja Kyberturvallisuuskeskuksen evästesivulta kootut vaatimukset ovat nämä:

  • muita kuin välttämättömiä evästeitä ei aseteta ennen kuin kävijä on tehnyt valintansa
  • ylimmällä tasolla hyväksyminen ja kieltäytyminen ovat yhtä helppoja
  • kävijä voi halutessaan tehdä tarkempia valintoja evästetyypeittäin
  • valintaruudut ja liukukytkimet ovat muiden kuin välttämättömien evästeiden kohdalla oletuksena pois päältä
  • bannerissa eritellään evästetyypit, niiden käyttötarkoitus ja voimassaoloaika sekä se, jaetaanko tietoja kolmansille osapuolille
  • valinnat saa näkyviin uudelleen milloin tahansa
  • mekanismilla hallitaan kaikkia ei-välttämättömiä evästeitä, myös kolmansien osapuolten asettamia

Lisäksi banneri ei saa kohtuuttomasti häiritä tai estää pääsyä sivustolle. Jos kävijä jatkaa valitsematta mitään, sivuston pitää toimia pelkillä välttämättömillä evästeillä.

Lista on lyhyt, mutta jokaisessa kohdassa on oma tapansa epäonnistua. Käydään ne läpi yksi kerrallaan.

Pitääkö hylkää-painikkeen olla yhtä helppo kuin hyväksy-painikkeen?

Pitää. Traficomin ohjeistuksen mukaan kieltäytymisen pitää olla yhtä helppoa kuin suostumuksen antamisen, eikä suostumuksen antaminen saa olla yksinkertaisempaa kuin kieltäytyminen. Ohjeistuksen esimerkissä bannerin ylimmällä tasolla on hyväksy kaikki -valinnan rinnalla valinta, jolla jatketaan pelkillä välttämättömillä evästeillä tai kieltäydytään muista.

Tavallinen virhe on banneri, jonka ylimmällä tasolla on vain kaksi vaihtoehtoa: hyväksy kaikki ja asetukset. Hyväksyminen vie yhden klikkauksen. Kieltäytyminen vie useamman: asetukset auki, kytkimet tarkistettava ja valinnat tallennettava. Se ei ole yhtä helppoa.

Toinen virhe on ulkoasu. Jos hyväksy on iso värillinen painike ja kieltäytyminen haalea linkki tekstin seassa, klikkausten määrä voi olla sama, mutta vaivannäkö ei ole. Kävijä, joka ei huomaa vaihtoehtoa, ei myöskään valitse sitä. Tee painikkeista samankokoiset ja yhtä näkyvät, ja käytä niissä selviä sanoja, kuten ”Hyväksy kaikki” ja ”Vain välttämättömät”.

Kolmas virhe on sanoitus, joka syyllistää. ”Ei kiitos, en halua parempaa kokemusta” on tehty vaikeaksi klikata, ja juuri siksi se ei ole tasavertainen vaihtoehto.

Latautuvatko evästeet ennen suostumusta?

Eivät saisi, mutta tätä ei näe päältä päin, ja siksi virhe jää helposti huomaamatta. Banneri näkyy oikein ja painikkeet ovat kunnossa, mutta kävijämittari, mainosalustan pikseli tai upotettu video voi olla jo tallentanut tietonsa ennen kuin kävijä on koskenut mihinkään.

Traficomin ohjeistuksen mukaan palveluntarjoajan pitää huolehtia, ettei muita kuin välttämättömiä evästeitä aseteta ennen kuin kävijä on tehnyt evästevalintansa. Banneri, joka näyttää valinnat mutta ei pysäytä koodia, on ulkoasu eikä suostumusmekanismi.

Virhe syntyy yleensä asennusjärjestyksestä. Seurantakoodi on lisätty sivupohjaan tai tunnisteiden hallintatyökaluun ennen banneria, ja banneri on asennettu myöhemmin sen rinnalle. Koodi ei tiedä bannerista mitään, joten se käynnistyy kuten ennenkin.

Korjauksen periaate on aina sama: jokainen ei-välttämätön koodi odottaa, kunnes bannerista tulee lupa juuri sille evästeryhmälle. Tekninen toteutus riippuu siitä, miten sivusto on rakennettu, mutta lopputuloksen voi tarkistaa kuka tahansa.

Miten tarkistat oman sivusi evästeet?

Tarvitset tavallisen tietokoneen selaimen ja kymmenen minuuttia. Tee näin:

  1. Avaa uusi yksityinen ikkuna, jotta aiemmat evästeet ja valinnat eivät vaikuta tulokseen.
  2. Avaa selaimen kehittäjätyökalut ennen kuin menet sivulle. Windows-koneella ne aukeavat useimmissa selaimissa F12-näppäimellä.
  3. Kirjoita sivustosi osoite ja odota, että sivu on latautunut. Älä koske banneriin.
  4. Katso kehittäjätyökalujen tallennustilan näkymästä evästeet ja paikallinen tallennustila. Kirjaa ylös jokainen eväste ja verkkotunnus, jolle se kuuluu.
  5. Katso verkkoliikenteen näkymästä, mihin muihin osoitteisiin sivu on jo ottanut yhteyttä.
  6. Valitse bannerista kieltäytyminen, lataa sivu uudelleen ja katso samat kohdat.
  7. Tyhjennä tiedot, toista hyväksymällä kaikki ja vertaa eroa.

Tulos luetaan yksinkertaisesti. Ennen valintaa ja kieltäytymisen jälkeen listalla saa olla vain välttämättömiä evästeitä sekä eväste, joka muistaa kävijän valinnan. Välttämättömät evästeet ovat tavallisesti sivuston itsensä asettamia. Jos listalla näkyy mittauspalvelun, mainosalustan tai videopalvelun evästeitä, banneri ei estä niitä.

Tee sama puhelimella tai selaimen mobiilinäkymässä, ja käy läpi ainakin etusivu, yksi sisäsivu ja sivu, jolla on upotuksia, kuten kartta tai video. Eri sivupohjat voivat ladata eri koodeja, joten etusivun tulos ei kerro koko sivustosta.

Valmiiksi päällä olevat kytkimet

Jos tarkempien asetusten näkymässä kytkimet ovat valmiiksi päällä, kävijä hyväksyy kaiken painamalla tallenna. Traficomin mukaan bannerissa ei saa olla valmiiksi rastitettuja ruutuja eikä päällä-asennossa olevia liukukytkimiä muiden kuin välttämättömien evästeiden kohdalla. Kävijän pitää itse kytkeä ne päälle.

Välttämättömien evästeiden kytkin voi olla päällä ja lukittu, koska niihin ei kysytä lupaa. Kaikki muut aloittavat pois päältä.

Samasta säännöstä seuraa, miten tallenna valinnat -painikkeen pitää toimia. Jos kävijä avaa asetukset ja painaa tallenna koskematta mihinkään, lopputuloksen pitää olla sama kuin kieltäytymisessä.

Linja ei ole uusi. EU:n tuomioistuin totesi jo lokakuussa 2019 niin sanotussa Planet49-ratkaisussa, ettei verkkosivun valmiiksi rastitetulla ruudulla annettu suostumus evästeisiin ole pätevä.

Banneri, joka peittää koko sivun

Koko ruudun peittävä banneri, jonka ohi ei pääse valitsematta, on houkutteleva, koska se nostaa hyväksymisten osuutta. Traficomin ohjeistuksen mukaan suostumuksen pyytäminen ei kuitenkaan saa kohtuuttomasti häiritä tai estää pääsyä sivustolle.

Evästemuuri menee vielä pidemmälle: sivua ei voi käyttää lainkaan, ellei hyväksy muita kuin välttämättömiä evästeitä. Ohjeistuksen mukaan sitä ei lähtökohtaisesti ole asianmukaista käyttää, koska suostumusta ei silloin voi pitää vapaaehtoisesti annettuna.

Toimiva ratkaisu on banneri, joka vie ruudusta vain osan ja jättää sivun näkyviin. Jos kävijä jatkaa lukemista valitsematta, sivusto toimii pelkillä välttämättömillä evästeillä, kuten ohjeistus edellyttää. Sama koskee bannerin sulkemista rastista: se ei ole suostumus.

Puhelimella tämä korostuu. Banneri, joka on tietokoneella siisti palkki alareunassa, voi pienellä näytöllä peittää puolet sisällöstä. Tarkista se aina oikealla puhelimella, ei vain selaimen kavennetulla ikkunalla.

Peruutus, joka ei poista mitään

Kun kävijä ensin hyväksyy ja myöhemmin peruu suostumuksensa, aiemmin tallennetut evästeet voivat jäädä laitteelle, ellei työkalu poista niitä. Traficomin ohjeistuksen mukaan peruuttamisella pitää olla tosiasiallinen vaikutus, eli aiemmin tallennetut tiedot poistetaan tai ylikirjoitetaan.

Tämä kannattaa testata erikseen. Hyväksy kaikki, avaa valinnat uudelleen, peru suostumus, lataa sivu ja katso kehittäjätyökaluista, katosivatko evästeet ja lakkasivatko yhteydet mittaus- ja mainospalveluihin.

Kolmannen osapuolen evästeiden kohdalla asia on teknisesti hankalampi, koska sivusto ei voi suoraan muokata toisen verkkotunnuksen evästeitä. Selvitä silloin työkalun toimittajalta, miten peruutus käsitellään, ja varmista vähintään omalla testillä, ettei seurantakoodi enää lataudu.

Valintoja ei löydä myöhemmin

Banneri näytetään kerran, valinta tallentuu, eikä kävijä sen jälkeen löydä mistään tapaa muuttaa mieltään. Traficomin ohjeistuksen mukaan suostumuksen peruuttamisen tai valintojen muuttamisen pitää onnistua mahdollisimman yksinkertaisesti ja linjassa sen kanssa, miten suostumus alun perin pyydettiin.

Jos suostumus pyydettiin bannerilla, bannerin pitää saada helposti uudelleen näkyviin, esimerkiksi sivustolla näkyvästä kuvakkeesta. Linkkikin käy, kunhan sen sijainnista kerrotaan kävijälle selvästi ja se löytyy sivustolta helposti.

Käytännöllinen ratkaisu on linkki ”Evästeasetukset” jokaisen sivun alatunnisteessa tietosuojaselosteen linkin vieressä. Ohjeistus pitää hyvänä käytäntönä kertoa jo suostumusta pyydettäessä, miten valintoja pääsee myöhemmin muuttamaan, joten sano bannerissa yhdellä lauseella, mistä valinnat löytyvät.

Upotukset jäävät bannerin ohi

Upotetut sisällöt pääsevät helpoimmin bannerin ohi, koska ne ovat sivulla kehyksinä, jotka hakevat sisältönsä suoraan toisen yrityksen palvelimelta. Video, kartta tai somesyöte voi tallentaa evästeensä riippumatta siitä, mitä bannerissa valittiin, jos upotusta ei ole liitetty suostumukseen.

Traficomin ohjeistuksen mukaan kolmannen osapuolen sisältöihin liittyviin evästeisiin tarvitaan lähtökohtaisesti suostumus. Ratkaisu on korvata upotus paikkamerkillä: kuva, lyhyt teksti siitä, että sisältö haetaan toisesta palvelusta, ja painike, josta sen saa näkyviin. Varsinainen upotus ladataan vasta, kun kävijä on sen hyväksynyt.

Paikkamerkki on samalla kevyempi kuin upotus, koska raskas kehys ladataan vain niille, jotka sitä haluavat. Kartan osalta ratkaisu on käyty tarkemmin läpi artikkelissa Google Maps -kartta verkkosivuille, ja sama malli toimii videoille.

Riittääkö ilmainen evästebanneri-lisäosa?

Voi riittää, mutta hinta ei kerro, toimiiko se. Maksullinenkin työkalu voi olla asennettu väärin, ja ilmainen voi tehdä juuri sen, mitä pieni sivusto tarvitsee. Ratkaisevaa on se, mitä lisäosa tekee koodeille, ei se, miltä banneri näyttää.

Selvitä nämä ennen kuin luotat lisäosaan:

  • Pysäyttääkö se koodit ennen valintaa vai näyttääkö se pelkän bannerin. Tämä selviää varmasti vain testaamalla.
  • Saako kieltäytymisen ylimmälle tasolle hyväksymisen rinnalle, ja onnistuuko se ilmaisversiossa.
  • Tunnistaako se evästeet itse vai pitääkö ne kirjata käsin. Kumpikin käy, kunhan lista pysyy ajan tasalla.
  • Hallitseeko se upotuksia, kuten videoita ja karttoja.
  • Tallentaako se suostumukset niin, että ne voi osoittaa jälkikäteen: ajankohta, pyytämisen tapa ja kävijälle annetut tiedot.
  • Mistä banneri itse ladataan. Jos työkalu hakee koodinsa tai tallentaa suostumukset ulkopuoliselle palvelimelle, sekin on palvelu, joka käsittelee kävijän tietoja ja kuuluu mainita tietosuojaselosteessa.

Tarkista myös, mitä ilmaisversio jättää pois ja mitä tapahtuu, jos sivusto kasvaa sen rajojen yli. Ehdot kannattaa lukea ennen asennusta eikä vasta silloin, kun raja tulee vastaan.

Kun sivusto muuttuu, banneri jää jälkeen

Banneri asennetaan, testataan ja unohdetaan. Puolen vuoden päästä sivustolle on lisätty uutiskirjeen tilauslomake, mainoskampanjan seurantakoodi ja chat, eikä kukaan ole kertonut niistä bannerille.

Uusi koodi ei välttämättä ole suostumuksen piirissä, ellei sitä ole liitetty oikeaan evästeryhmään. Traficomin ohjeistuksen mukaan suostumus pitää lisäksi pyytää uudelleen, kun palvelun evästeisiin tehdään muutoksia, eikä tieto, jonka varassa kävijä valitsi, saa jäädä vanhaksi.

Toimiva tapa on liittää bannerin tarkistus jokaiseen muutokseen, jossa sivustolle lisätään ulkoista koodia, ja käydä yllä kuvattu selaintarkistus läpi muutaman kuukauden välein. Jos joku muu hoitaa sivustoasi, tee tästä sovittu osa ylläpitoa.

Miten banneri vaikuttaa sivuston nopeuteen?

Banneri voi hidastaa sivua, siirtää sen sisältöä latautuessaan ja nousta itse sivun suurimmaksi elementiksi. Googlen web.dev-sivuston ohje evästeilmoituksista käy nämä läpi.

Ohjeen mukaan evästeilmoitukset ovat hyvin tavallinen syy sivun sisällön siirtymiin. Erityisesti yläreunaan lisätty ilmoitus, joka ilmestyy vasta muun sivun jälkeen, työntää kaiken alla olevan alaspäin. Kävijä yrittää painaa linkkiä ja osuu johonkin muuhun. Core Web Vitals -mittareissa tämä näkyy CLS-lukuna.

Korjaus on sijoittaa banneri sivun päälle eikä sisällön väliin, esimerkiksi alareunaan kiinnitettynä palkkina tai sisällön päälle avautuvana ikkunana, joka ei siirrä mitään. Jos banneri on pakko sijoittaa sisällön sekaan, sille varataan tila etukäteen.

Puhelimella banneri voi olla sivun suurin sisältöelementti, jonka mukaan LCP-luku mitataan, varsinkin jos siinä on pitkä tekstikappale. Lyhyt teksti ja linkki tarkempiin tietoihin auttaa sekä kävijää että mittaria. Ohje suosittelee myös lataamaan bannerin koodin asynkronisesti ja suoraan sivun omasta HTML:stä eikä tunnisteiden hallintatyökalun kautta. Mittareista kerrotaan tarkemmin artikkelissa Core Web Vitals ja PageSpeed Insights.

Nopeustesti näkee aina ensikertalaisen

Ohjeen mukaan useimmat automaattiset testityökalut mittaavat vain ensimmäistä kertaa tulevaa kävijää, joka ei ole vielä vastannut banneriin. Testitulos näyttää siis aina bannerin vaikutuksen, mutta ei sitä, miltä sivu tuntuu palaavalle kävijälle, jonka valinta on jo tallessa.

Siksi ohje suosittelee nojaamaan oikeilta kävijöiltä kerättyyn mittausdataan eikä pelkkiin testityökaluihin. Pienellä sivustolla sitä ei välttämättä ole tarpeeksi, joten käytännön neuvo on yksinkertaisempi: testaa sivu sekä ensikertalaisena että valinnan jo tehneenä ja katso, missä kohtaa hitaus syntyy.

Kun kävijä hyväksyy kaikki, sivulle latautuu se koodi, jota banneri piti odottamassa. Jos sivu muuttuu siinä kohtaa selvästi hitaammaksi, vika ei ole bannerissa vaan siinä, kuinka paljon seurantaa sivulle on kasattu.

Banneri pitää pystyä käyttämään näppäimistöllä

Banneri on sivun ensimmäinen asia, jota kävijä joutuu käyttämään. Jos valintaa ei saa tehtyä näppäimistöllä tai ruudunlukija ei löydä painikkeita, koko sivu voi jäädä käyttämättä.

Tarkista ainakin, että sarkainnäppäimellä pääsee bannerin painikkeisiin heti sivun alussa, että kohdistus näkyy selvästi ja että painikkeissa on kirjoitettu teksti eikä pelkkä kuvake. Kun valinta on tehty, kohdistuksen pitää palata sivulle eikä jäädä piilotettuun banneriin. Katso myös tekstin ja painikkeiden kontrasti.

Saavutettavuuden perusvaatimuksista on oma artikkelinsa WCAG 2.1 AA käytännössä, ja banneri kannattaa käydä läpi samoilla periaatteilla kuin mikä tahansa lomake.

Yhteenveto

Toimiva evästebanneri pysäyttää kaikki muut kuin välttämättömät koodit ennen valintaa, antaa kieltäytyä yhtä helposti kuin hyväksyä, aloittaa kytkimet pois päältä ja päästää kävijän sivulle, vaikka hän ei valitsisi mitään. Valinnat saa auki myöhemmin, ja peruutus oikeasti poistaa sen, mikä hyväksyttiin.

Suurin osa virheistä näkyy selaimen kehittäjätyökaluista ennen ensimmäistä klikkausta. Korjaa ensin koodit, jotka latautuvat ennen valintaa, ja vasta sitten bannerin ulkoasu ja sanoitus.

Sivusto muuttuu useammin kuin säännöt, joten banneri tarkistetaan aina, kun sivustolle lisätään jotain uutta.