Ako Vytvoriť Cookie Banner s JavaScriptom

Cookie je krátky textový súbor, ktorý navštívená webová stránka odosiela do prehliadača. Umožňuje webu zaznamenať informácie o vašej návšteve, napríklad preferovaný jazyk a ďalšie nastavenia. Nasledujúca návšteva stránok tak môže byť jednoduchšia a produktívnejšia. Súbory cookie sú dôležité.

Pixelové značky, známe aj pod označením web beacons, sú malé obrázky s podobnou funkciou ako súbory cookies. Na rozdiel od súborov cookies sú pixelové značky pevnou súčasťou webových stránok.

Vzhľadom na to, že súbory cookie môžu sledovať správanie používateľov, vyžaduje legislatíva (napríklad GDPR) od webových stránok, aby získali súhlas používateľov predtým, ako ich začnú používať. Vytvorenie cookie banneru je preto nevyhnutné pre každú webovú stránku, ktorá používa súbory cookie.

Čo sú cookies a prečo sú dôležité?

Cookies zohrávajú kľúčovú úlohu pri fungovaní moderného webu. Umožňujú webovým stránkam zapamätať si informácie o vás, ako sú prihlasovacie údaje, preferencie jazyka, položky v nákupnom košíku a ďalšie. Bez cookies by ste sa museli pri každej návšteve webovej stránky znova prihlasovať a nastavovať svoje preferencie.

Používajú sa na rôzne účely:

Udržiavanie relácie: Cookies umožňujú webovým stránkam zapamätať si, že ste prihlásení, takže sa nemusíte prihlasovať znova pri každej návšteve stránky.
Personalizácia: Webové stránky môžu používať cookies na prispôsobenie obsahu na základe vašich preferencií alebo predchádzajúcej aktivity.
Sledovanie: Cookies umožňujú webovým stránkam sledovať vašu aktivitu na stránke, ako sú kliknutia, zobrazené stránky a čas strávený na stránke.

Existujú rôzne typy cookies:

Cookies prvej strany: Tieto cookies sú nastavené webovou stránkou, ktorú navštevujete. Používajú sa na zlepšenie používateľskej skúsenosti na tejto webovej stránke.
Cookies tretej strany: Tieto cookies sú nastavené inou doménou, než je tá, ktorú navštevujete. Často sa používajú na sledovanie vašej aktivity na viacerých webových stránkach a zobrazovanie cielenej reklamy.
Session cookies: Sú prechodné cookies, ktoré sa ukladajú na vašom zariadení do doby, kým neopustíte webovú stránku. Potom sa automaticky zmažú.
Persistent cookies: Zostávajú uložené vo vašom prehliadači aj po vypnutí počítača. Bývajú v nich uložené nastavenia používateľa a slúžia na zvýšenie komfortu pri využívaní služieb alebo na anonymné štatistické účely.

Súbory cookie slúžia na množstvo účelov. Cookies používame na nastavenie obsahu webových stránok vzhľadom na preferencie používateľa a optimalizáciu využitia webových stránok. Takisto sa používajú na vytvorenie anonymných, súhrnných štatistických údajov, ktoré pomáhajú analyzovať, akým spôsobom používateľ používa webové stránky.

Typy súborov cookie

Používame niekoľko typov cookies, naše vlastné aj externé súbory získané od partnerov, s ktorými spolupracujeme.

Analytické cookies - zbierajú informácie o tom, ako používateľ využíva webovú stránku, o type webovej stránky, z ktorej bol návštevník presmerovaný, o počte návštev používateľa a o štatistikách webovej stránky.
Dynamické cookies - používajú sa na uloženie informácií o reláciách. Súbory s informáciami o reláciách umožňujú navádzanie po webovej stránke bez toho, aby používateľ musel zadávať rovnaké informácie, ktoré už predtým zadal.
Funkčné cookies: Zaisťujú, že určité časti webových stránok fungujú správne a že vaše preferencie používateľov zostanú známe. Umiestnením funkčných súborov cookie vám uľahčujeme návštevu našich webových stránok.
Nevyhnutné súbory cookie: Tieto súbory cookie sú nevyhnutné pre správne fungovanie webovej stránky. Bez nich by prakticky nebolo možné správne načítať webové stránky. V rámci nevyhnutných cookies spracúvame aj cookies, ktoré uchovávajú Vaše nastavenia cookies (PHPSESSID, cookie_consent_….). Spracúvame jedinečné ID používateľa, rozlišujeme používateľa a nového používateľa a ukladáme zvolené nastavenie cookies, ktoré sú nutné pre spustenie stránky.
Analytické alebo štatistické súbory cookie: Tieto súbory cookie umožňujú analyzovať všeobecné používanie webovej stránky užívateľmi na vyhodnotenie a zlepšenie výkonu (_ga, _gat, _gid). Poskytujú informácie o tom, ako sa webová stránka používa a pomáhajú tým uľahčiť akékoľvek propagácie alebo prieskumy. Spracúvame identifikáciu používateľa (cez jedinečné ID používateľa), miesto - krajinu (geolokácia), rozlišujeme používateľa a nového používateľa, priemerný čas strávený prehliadaním webovej stránky, rozlíšenie obrazovky používateľského zariadenia, operačný systém používateľského zariadenia, typ používateľského zariadenia, typ webového prehliadača používateľského zariadenia, jazyk navštívenej stránky a odkiaľ návštevník na stránku prichádza.

Creating a Cookie Banner, Improved functionallity

Legislatíva a súhlas s používaním cookies

Na základe nariadenia Európskej únie je potrebné od návštevníkov internetových stránok získavať súhlas s používaním cookies v prípade, že ukladáte údaje, ktoré nie sú anonymné, alebo údaje tretích strán. Z právneho hľadiska musí byť použitie súborov cookies najprv prekonzultované s právnym poradcom.

Ako informovať návštevníkov o zbere cookies

Na informovanie zákazníkov o zbere cookies môžete využiť rôzne služby. Jednou z možností je Osano Cookie Consent.

Návod na použitie Osano Cookie Consent:

Na stránkach Osano Cookie Consent kliknite na tlačidlo .
Position: Určuje, kde a ako sa bude na stránke oznam zobrazovať. Máte na výber z viacerých možností umiestnenia, ako "Banner bottom", "Banner top", "Floating right" a iné.
Layout: Vyberte si typ zobrazovania oznamu a buttonu v ozname. Užšie, širšie, so zaoblenými či ostrými rohmi.
Palette: Zvoľte si niektorú z ponúkaných farebných tém.
Learn more link: Zadajte adresu, na ktorú bude smerovať odkaz zobrazený vo vyskakovacom okne. Text tohoto odkazu si môžete nastaviť neskôr. Odkaz by mal smerovať na vašu stránku, kde bližšie popisujete používanie cookies na vašom webe. Príklad takejto informácie o používaní cookies nájdete na stránkach Slovenskej sporiteľne alebo na stránke cookiesandyou.com.
Compliance type: Zvoľte možnosť "Just tell users that we use cookies". Oznam tak bude iba informovať o používaní cookies.
Message: Vložte hlavný text, ktorý sa zobrazí vo vyskakovacom okne. Napríklad: "Táto webová stránka používa súbory cookies."
Dismiss button text: Názov tlačidla v paneli.
Policy link text: Text odkazu na stránku s podrobnými informáciami, ktorú ste nastavovali v bode 4.
Skontrolujte, či sa vám pop-up okno s informáciou zobrazuje správne a či vám niečo dôležité neprekrýva. Pokiaľ potrebujete iné zobrazenie, opakujte postup.

Banner súhlasu

Banner súhlasu je upozornenie na súbor cookie, ktoré sa zobrazí na webových stránkach pri prvej návšteve stránok používateľom.

Ako upraviť banner súhlasu:

Prejdite do ponuky nastavení webových stránok a posuňte sa na údaje súborov cookie a používateľov.
Prejdite na hornú časť svojej webovej stránky a upravte kópiu bannera súborov cookie. Môžete napríklad pridať „Ďalšie informácie nájdete v našich pravidlách ochrany osobných údajov“.
Umiestnite kurzor myši na odkaz na pravidlá ochrany osobných údajov a odkaz upravte.
Kliknutím na položku Zverejniť vykonáte zmeny.

Ako zapnúť cookies v prehliadači: podrobný návod

Väčšina prehliadačov má cookies predvolene zapnuté, ale v prípade, že ste ich vypli, alebo si nie ste istí, tu je návod, ako ich zapnúť v najpopulárnejších prehliadačoch:

Google Chrome

Otvorte prehliadač Chrome.
Kliknite na ikonu troch bodiek v pravom hornom rohu okna prehliadača a zvoľte "Nastavenia".
V ľavej časti okna kliknite na "Ochrana súkromia a zabezpečenie".
Kliknite na "Súbory cookie a údaje webu".
Uistite sa, že je prepínač vedľa "Povoliť všetky súbory cookie" zapnutý. Ak chcete prispôsobiť nastavenia, môžete použiť aj ďalšie možnosti, ako napríklad "Blokovať súbory cookie tretích strán v režime inkognito" alebo "Blokovať súbory cookie tretích strán".
Alternatívne, môžete kliknúť na "Lokality, ktoré môžu vždy používať súbory cookie" a pridať konkrétne webové stránky, ktorým chcete povoliť používanie cookies.

Mozilla Firefox

Otvorte prehliadač Firefox.
Kliknite na ikonu troch vodorovných čiar v pravom hornom rohu okna prehliadača a zvoľte "Nastavenia".
V ľavej časti okna kliknite na "Súkromie a bezpečnosť".
V časti "Ochrana proti sledovaniu" vyberte možnosť "Štandardné" alebo "Vlastné".

Príklad cookie banneru s použitím prístupu progressive enhancement

Takto vyzerá príklad cookie banneru s použitím prístupu progressive enhancement:

Akceptovali ste dodatočné súbory cookies.

Odmietli ste dodatočné súbory cookies.

Akceptovali ste analytické cookies.

Odmietli si analytické cookies.

Keď používateľ príjme alebo odmietne súbory cookie, zobrazí sa text potvrdzovacej správy, napr. "Vaše preferencie pre nastavenie súborov cookie sa uložili.". Každopádne, viditeľný indikátor zamerania sa nezobrazí okolo potvrdzovacej správy.

Správa predvolieb súborov cookie

V predvolenom nastavení by webová stránka nemala sledovať skúsenosti návštevníkov.

Zakázanie a zabránenie používaniu súborov cookie:

Dotknutá osoba môže kedykoľvek obmedziť, zablokovať alebo vymazať súbory cookie z týchto webových stránok zmenou konfigurácie svojho prehliadača na uvedených odkazoch:

V prípade, že dotknutá osoba zakáže všetky súbory cookie, pri každej návšteve týchto webových stránok sa zobrazí banner súborov cookie.

Dotknutá osoba ako návštevník týchto webových stránok má možnosť kedykoľvek zmeniť svoje rozhodnutie ohľadom udelenia alebo neudelenia súhlasu so spracúvaním súborov cookie.

Používané služby a nástroje

Používame niekoľko typov cookies, naše vlastné aj externé súbory získané od partnerov, s ktorými spolupracujeme. Na našom Webovom sídle využívame:

CookieYes: Správa súhlasov s používaním cookies (Cookie banner a preferencie).
Google Analytics: Analytický nástroj od spoločnosti Google LLC, ktorý sleduje návštevnosť a správanie používateľov na webe.
Elementor: Systém pre správu a tvorbu obsahu webu (tvorba stránok, formulárov a pod.).
Google reCAPTCHA: Nástroj na ochranu formulárov pred spamom a zneužitím (overuje, či je formulár vypĺňaný človekom).
WebSupport.sk: Poskytovateľ hostingových služieb, kde je prevádzkovaná webová stránka Prevádzkovateľa.
GoPay: Platobná brána na spracovanie online platieb.
WooCommerce: Používame na správa internetového obchodu.
Wordfence: Používame na zabezpečenie webových stránok.
WordPress: Používame na vývoj webových stránok.
Stripe: Používame na spracovanie platieb.
Complianz: Používame na správa súhlasu so súbormi cookie.
Sourcebuster JS: Používame na sledovanie návštevníkov.
LiteSpeed: Používame na hosting webových stránok.
Google Fonts: Používame na zobrazenie webfontov.

Práva dotknutej osoby

Návštevník webovej stránky má ako dotknutá osoba podľa nariadenia právo požadovať od Prevádzkovateľa prístup k osobným údajom, ktoré sú o nej spracúvané, právo na opravu osobných údajov, právo na vymazanie alebo obmedzenie spracúvania osobných údajov, právo namietať voči spracúvaniu osobných údajov, právo na neúčinnosť automatizovaného individuálneho rozhodovania vrátane profilovania, právo na prenosnosť osobných údajov, ako aj právo podať návrh na začatie konania dozornému orgánu.

V prípade ak Prevádzkovateľ spracúva osobné údaje na základe súhlasu dotknutej osoby, dotknutá osoba má právo kedykoľvek svoj súhlas so spracúvaním osobných údajov odvolať. Odvolanie súhlasu nemá vplyv na zákonnosť spracúvania osobných údajov založeného na súhlase pred jeho odvolaním.

Pokiaľ ide o vaše osobné údaje, máte nasledujúce práva:

Máte právo vedieť, prečo sú vaše osobné údaje potrebné, čo sa s nimi stane a ako dlho budú uchovávané.
Právo na prístup: Máte právo na prístup k svojim osobným údajom, ktoré sú nám známe.
Právo na opravu: máte právo kedykoľvek doplniť, opraviť, vymazať alebo zablokovať vaše osobné údaje.
Ak nám udelíte súhlas so spracovaním vašich údajov, máte právo tento súhlas odvolať a vymazať vaše osobné údaje.
Právo na prenos vašich údajov: máte právo požadovať od správcu všetky svoje osobné údaje a preniesť ich v celom rozsahu k ďalšiemu prevádzkovateľovi.
Právo namietať: môžete vzniesť námietku proti spracovaniu vašich údajov. Dodržiavame to, pokiaľ neexistujú odôvodnené dôvody na spracovanie.

Ak chcete uplatniť tieto práva, kontaktujte nás. Ak máte sťažnosť na to, ako narábame s vašimi údajmi, radi by sme vás počuli, ale máte tiež právo podať sťažnosť dozornému orgánu (úradu na ochranu údajov).

Tipy a triky pre efektívny cookie banner

Prehľadnosť a zrozumiteľnosť: Uistite sa, že váš cookie banner je ľahko zrozumiteľný pre všetkých používateľov, bez ohľadu na ich technické znalosti.
Možnosť odmietnuť: Ponúknite používateľom jasnú možnosť odmietnuť všetky nepovinné súbory cookie.
Podrobné informácie: Poskytnite odkaz na stránku s podrobnými informáciami o používaných súboroch cookie, ich účele a dobe uchovávania.
Respektujte preferencie: Uložte preferencie používateľa a aplikujte ich pri každej ďalšej návšteve webovej stránky.
Pravidelná kontrola: Pravidelne kontrolujte a aktualizujte svoj cookie banner, aby ste zabezpečili súlad s aktuálnou legislatívou a používanými súbormi cookie.
Blokovanie skriptov: Nezávisle od toho aký nástroj na blokovanie cookies používate, úlohou cookie bannera je zastaviť spustenie iných kúskov kódu, ktoré si ukladajú cookies pre neskoršie využitie. Pre konkrétne riešenia odporúčam prejsť použité skripty na stránke v spolupráci s developerom a určiť kategórie pre časti kódu, ktoré ukladajú cookies.

Najpoužívanejšie nástroje na správu cookies

Cookiebot: Spolu s Google Tag Managerom ponúka prednastavenú šablónu, ktorá pracuje s najnovšou verziou Consent módu. Rozhranie nastavenia je prehľadné, zrozumiteľné a ideálne pre stredne veľké a väčšie spoločnosti, ktoré potrebujú spravovať viacero domén.
Jednoduché nastavenie cookie lišty: Jednoduché nastavenie cookie lišty v prehľadnom rozhraní zvládne aj začiatočník. Je preto ideálnym riešením pre menšie spoločnosti a jednotlivcov. Základné nastavenie ponúka veľmi jednoduchý a zrozumiteľný cookie banner pre dve domény zadarmo.
Najkomplexnejšie riešenie: Najkomplexnejšie riešenie pre veľké spoločnosti spravujúce viacero domén. Dashboard je pre začiatočníkov trochu komplikovaný, ponúka však prehľad nastavenia podľa lokalizácie domény. Môžete teda nastaviť viacero právnych predpisov, ktoré bude banner dodržiavať v závislosti od krajiny návštevníka vašej stránky.

Cookie banner a jeho nastavenie

V DASE sa venujeme správnemu nastaveniu cookie bannera už dlho a za tú dobu sme mali veľa možností otestovať, ako by mal fungovať tento nástroj na správu ukladania súborov cookies na stránke. Je to v skratke kus kódu, tzv. skript, ktorý má za úlohu zobraziť upozornenie, zaznamenať interakciu a oznámiť systémom na stránke výber používateľa. Skript môže mať podobu od jedného riadku až po viacero funkcií, ktoré sú spoločne zabalené v HTML elemente . To, ako vyzerá dizajn lišty a aké funkcie ponúka, závisí vždy od konkrétneho nástroja. Vo všeobecnosti by však mala ponúkať prehľadný zoznam použitých cookies a zrozumiteľne používateľovi odkomunikovať ich nastavenie. Dôležitou súčasťou cookie lišty je aj rozhranie, v ktorom nastavujete domény, kategórie, pravidlá, spúšťate skeny stránky a ovládate ďalšie potrebné prvky.

Cookiebot: Spolu s Google Tag Managerom ponúka prednastavenú šablónu, ktorá pracuje s najnovšou verziou Consent módu. Pri interakcii návštevníka nástroj odosiela do GTM detailné informácie v niekoľkých udalostiach. Rozhranie nastavenia je prehľadné, zrozumiteľné a ideálne pre stredne veľké a väčšie spoločnosti, ktoré potrebujú spravovať viacero domén.
Jednoduché nastavenie cookie lišty: Jednoduché nastavenie cookie lišty v prehľadnom rozhraní zvládne aj začiatočník. Je preto ideálnym riešením pre menšie spoločnosti a jednotlivcov. Kód cookie lišty je síce potrebné vložiť priamo na stránku alebo prostredníctvom systému na správu tagov, ale po interakcii s používateľom lišta odosiela do DataLayeru event pre každú kategóriu cookies s informáciou o povolení, či zamietnutí nastavenia, na ktorú sa ľahšie nastavuje odpaľovanie tagov. Základné nastavenie ponúka veľmi jednoduchý a zrozumiteľný cookie banner pre dve domény zadarmo.
Najkomplexnejšie riešenie pre veľké spoločnosti: Najkomplexnejšie riešenie pre veľké spoločnosti spravujúce viacero domén. Dashboard je pre začiatočníkov trochu komplikovaný, ponúka však prehľad nastavenia podľa lokalizácie domény. Môžete teda nastaviť viacero právnych predpisov, ktoré bude banner dodržiavať v závislosti od krajiny návštevníka vašej stránky. Zároveň nástroj ponúka hĺbkový sken použitých cookies, ich automatickú kategorizáciu a správu skupín.

Kategórie cookies

Nezávisle od toho aký nástroj na blokovanie cookies používate, úlohou cookie bannera je zastaviť spustenie iných kúskov kódu, ktoré si ukladajú cookies pre neskoršie využitie. Základ každého nastavenia banneru a ďalšieho fungovania je počiatočný sken webu. Ten indexuje všetky stránky a podstránky spojené s konkrétnou doménou. Výsledkom by mal byť kompletný zoznam uložených cookies zaradený v kategóriách.

Medzi kategórie cookies patria:

Cookies, bez ktorých stránka nemôže správne pracovať.
Cookies, bez ktorý stránka nemôže používať konkrétne funkcie. Sem zaraďujeme rôzne rozšírenia stránky, ako komentárová sekcia alebo chat.
Cookies, ktoré slúžia len na vyhodnotenie používania stránky. Ak nástroj nepozná názov cookie, tak ju automaticky zaradí to tejto kategórie.

Ak používate analytickú knižnicu analytics.js, gtag.js alebo iné riešenie, ktoré posiela dáta zo stránky priamo do analytického, alebo marketingového nástroja, tak niektoré cookie lišty ponúkajú možnosť zastaviť označené skripty ešte pred schválením nastavenia cookies používateľom. Pre konkrétne riešenia odporúčam prejsť použité skripty na stránke v spolupráci s developerom a určiť kategórie pre časti kódu, ktoré ukladajú cookies.

V prípade, že skripty ukladajúce cookies spúšťate na stránke prostredníctvom kontajnera GTM, alebo iného systému na manažment značiek (Tag Management System), tak je potrebné urobiť niekoľko nastavení, ktoré budú reagovať na voľbu používateľa. Väčšinou bude vaša cookie lišta v podobe skriptu, ktorý sa musí spustiť pri prvej návšteve používateľa po načítaní stránky. Po výbere nastavenia používateľom, by malo dôjsť k zaznamenaniu interakcie do systému. Do dátovej vrstvy sa potom pridá nová udalosť alebo aj niekoľko udalostí. Systém by mal obsahovať premennú, ktorá bude na výber nastavenia cookies reagovať a blokovať skripty s príslušnou kategóriou cookies. Systém by nemal spustiť žiadne skripty skôr, než dôjde k interakcii používateľa.

Každá cookie lišta by mala používateľovi ponúkať aj možnosť zmeniť vybrané nastavenie. V taktom prípade sa by sa mala opáliť dedikovaná udalosť, alebo aspoň opäť spustiť štandardná udalosť oznamujúca zmenu nastavenia. Niektoré nástroje blokovania cookies ponúkajú aj možnosť dodatočne zmazať všetky cookies z odmietnutej kategórie.

Odporúčam preto nastavenie bannera, ktorý blokuje použitie stránky až do momentu výberu nastavenia, aby sa všetky potrebné značky mohli spustiť hneď na začiatku návštevy. Dizajn bannera by mal byť čo najviac prehľadný a zbytočne nemiasť používateľov. Užívatelia, ktorí si chcú svoje súkromie strážiť, dávajú súhlas so spracovaním osobných údajov pozorne.

Ako pridať cookies pomocou HTML

Samotný HTML jazyk neslúži na priame pridávanie cookies. Cookies sa pridávajú pomocou server-side skriptov (napr. PHP, Python) alebo pomocou JavaScriptu na strane klienta. HTML slúži na štruktúru a obsah webovej stránky, ale nie na manipuláciu s cookies. Avšak, HTML môže byť použitý na zobrazenie informácií o cookies prostredníctvom JavaScriptu.

Príklad použitia JavaScriptu na pridanie a zobrazenie cookies

Nasledujúci príklad ukazuje, ako môžete použiť JavaScript na pridanie cookie a následne zobraziť informácie o cookies na webovej stránke.

Pridanie a zobrazenie cookies

Cookies v HTML

V tomto príklade:

pridajCookie() funkcia pridá cookie s názvom "meno", hodnotou "Janko", dátumom expirácie a cestou.
zobrazCookie() funkcia prečíta hodnotu cookie a zobrazí ju v div elemente s id "cookieInfo".

HTML: Jazyk pre tvorbu webových stránok

HTML (HyperText Markup Language) je jazyk používaný na vytváranie webových stránok a ich obsahu. HTML kód opisuje, ako je stránka štruktúrovaná a aké prvky obsahuje. Sústreďuje sa na informácie ako odseky, nadpisy, odkazy, zoznamy, formuláre a podobne. Každá stránka na internete pozostáva z takýchto kódov. Tento jazyk rozlišuje spôsob zobrazenia informácií, nie samotný obsah.

Základné prvky HTML

Každý dokument HTML začína deklaráciou <!DOCTYPE html>, ktorá ho definuje ako dokument HTML5. Koreňovým prvkom stránky HTML je <html>, ktorý obsahuje dve hlavné časti: <head> a <body>. Prvok <head> obsahuje title dokumentu a metadáta, ktoré sa nezobrazujú, ako napríklad odkazy CSS a deklarácie znakovej sady.

Atribúty poskytujú dodatočné informácie o prvkoch HTML.

Textové zobrazenia v HTML

V tejto časti sa dozviete, ako používať značky HTML na vytváranie efektívnych a rozmanitých textových zobrazení na vašich webových stránkach.

Odseky a nadpisy:

Na definovanie odsekov použite značku <p>, čím vytvoríte bloky textu oddelené okrajmi. Pre nadpisy použite značky <h1>...<h6>.

tags: #ako #vytvoriť #cookie #banner #javascript