Ako vytvoriť cookie banner v JavaScripte: Komplexný sprievodca

Rate this post

Súbory cookie sú malé textové súbory, ktoré webové stránky ukladajú v počítači používateľa. Používajú sa na zapamätanie informácií o používateľovi, ako sú prihlasovacie údaje alebo preferencie jazyka. 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ú to súbory cookie?

Súbor cookie je malý textový súbor, ktorý webové stránky ukladajú vo vašom osobnom počítači, telefóne alebo inom zariadení. Obsahuje informácie o vašej činnosti na tejto webovej stránke a uľahčuje prehľadávanie. Cieľom je poskytnúť vám informácie o tom, aké osobné údaje vo forme cookies spracúvame, ako s nimi zaobchádzame, na aké účely ich používame, komu ich môžeme poskytnúť, kde môžete získať informácie o vašich osobných údajoch a uplatniť vaše práva pri spracúvaní osobných údajov.

Typy súborov cookie

Existuje niekoľko typov cookies, ktoré sa používajú na rôzne účely:

  • 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.
  • 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. Takto nemusíte pri návšteve našich webových stránok opakovane zadávať rovnaké informácie a napríklad položky zostanú vo vašom nákupnom košíku, kým nezaplatíte.
  • Cookies tretích strán: Súbory cookie umiestňujú aj tretie strany, ktoré sme zapojili.

Je dôležité si uvedomiť, že pre základné alebo kľúčové cookies nepotrebujete súhlas od používateľa.

Ako vytvoriť cookie banner

Tu je postup, ako vytvoriť cookie banner pomocou JavaScriptu:

Prečítajte si tiež: Návod na Mikulášsky balíček

  1. Vytvorte HTML štruktúru pre banner:

    Cookie banner umiestnite za otvárací tag <body>, pred odkaz "prejsť na hlavný obsah". Kód banneru obsahuje všetky možné správy, ktoré sú skryté pomocou HTML.

  2. Napíšte JavaScript kód na zobrazenie bannera:

    • Pri prvej návšteve stránky by mal mať prednastavené povolenie cookies ako „zakázané“.
    • Vložte všetky možné správy, ktoré používateľ môže vidieť, keď sa stránka načíta.
    • Stačí napísať krátky JS kód, ktorý umožní používateľom zvoliť si možnosť a zabráni stránke opätovne sa načítavať.
  3. Implementujte funkčnosť pre ukladanie súhlasu používateľa:

    • 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.
  4. Prispôsobte vzhľad a správanie bannera:

    Prečítajte si tiež: Slovenská slovotvorba: Slovo "variť"

    • Dizajn bannera by mal byť čo najviac prehľadný a zbytočne nemiasť používateľov.
    • Text správy cookie banneru by mal byť čo najkratší. Zároveň by mal presne a zrozumiteľne informovať používateľa o účele a použití súborov cookies na danej stránke.
  5. Zabezpečte súlad s legislatívou (GDPR):

    • Používajte stránku cookies, keď chcete používateľa informovať o cookies alebo iných podobných technológiách, ktoré vaša služba / stránka používa a ukladá na zariadenie používateľa. Stránku s cookies musíte vypublikovať v čase aktivácie alebo publikovania vašej služby / stránky v beta verzii.
    • Z právneho hľadiska musí byť použitie súborov cookies najprv prekonzultované s právnym poradcom.

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:

  • <p>Akceptovali ste dodatočné súbory cookies.</p>
  • <p>Odmietli ste dodatočné súbory cookies.</p>
  • <p>Akceptovali ste analytické cookies.</p>
  • <p>Odmietli si analytické cookies.</p>

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. Návštevník má možnosť udeliť súhlas so spracovaním akýchkoľvek osobných údajov zhromaždených počas prehliadania webových stránok.

Dotknutá osoba má takisto možnosť priamo vo svojom webovom prehliadači zakázať spracúvanie akýchkoľvek súborov cookie.

Prečítajte si tiež: Ako si vytvoriť recept na koláč

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:

  • Firefox
  • Internet Explorer
  • Chrome
  • Safari
  • Opera
  • Microsoft Edge

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. Zároveň nástroj ponúka hĺbkový sken použitých cookies, ich automatickú kategorizáciu a správu skupín.