Cookies lišta a implementace na webu

Úvod

Cookies lišty se v posledních letech staly standardním prvkem webových stránek po celém světě. Nejen že informují uživatele o použití cookies na webu, ale také zajišťují soulad s právními předpisy na ochranu osobních údajů.

V tomto článku se podíváme na to, co cookies vlastně jsou, kdo a proč musí mít cookies lištu, jaké existují kategorie cookies a jak můžete implementovat cookies lištu pomocí open source řešení.

Co jsou to cookies 🍪

Cookies jsou malé textové soubory, které webové stránky ukládají do vašeho prohlížeče při jejich návštěvě. Tyto soubory obsahují informace, které mohou být následně použity k různým účelům, jako je sledování uživatelských aktivit, ukládání preferencí nebo autentizace uživatele. Cookies mohou být dočasné (session cookies), které se vymažou po zavření prohlížeče, nebo trvalé (persistent cookies), které zůstávají uloženy po delší dobu.

Web extension

Pro čtení cookies v prohlížeči doporučuji doplněk Cookie editor pro prohlížeče.

Kdo a proč musí mít cookies lištu na webu

Evropská unie, prostřednictvím směrnice ePrivacy a obecného nařízení o ochraně osobních údajů (GDPR), stanovila přísné požadavky na používání cookies. Tyto předpisy vyžadují, aby webové stránky informovaly uživatele o použití cookies a získaly jejich souhlas před tím, než budou cookies uloženy v jejich zařízení. Toto opatření se týká všech webů, které cílí na uživatele v EU, bez ohledu na to, kde se samotný web nachází.

Cookies lišta je tedy nezbytná pro dodržení těchto právních předpisů. Nejen že chrání soukromí uživatelů, ale také zajišťuje, že webové stránky jsou v souladu s legislativou, čímž se vyhnou potenciálním pokutám.

Musím mít cookies lištu i když uživatele nesleduju?

Ne, a využiji k odpovědi citaci z webu úřadu pro ochranu osobních údajů:

Pokud užíváte pouze technická cookies, nemusíte mít cookies lištu. Jestliže však v rámci technických cookies dochází ke zpracování osobních údajů, musí být informační povinnost plněna jiným, vhodným způsobem, přístupným na webových stránkách, na kterých k takovému zpracování dochází.

-- Web úřadu pro ochranu osobních údajů

Jaké jsou cookies kategorie

Cookies můžeme rozdělit do několika kategorií, z nichž každá plní jiný účel:

Nejčastější chyby při implementaci cookies

Snadná implementace cookies lišty na webu

Připravil jsem si pro vás dvě open-source řešení, které vám podstatně usnadní práci s cookies lištou. Oba nástroje jsou zdarma, snadno konfigurovatelné a splňují požadavky GDPR (když si je správně otextujete a nalinkujete na své cookies policy).

📦 Řešení #1 - OrestBida/cookieconsent

Prověřená, funkční a vizuálně skvělá cookies lišta, která zároveň vyhovuje právním požadavkům. Než se pustíte do implementace tak si ji můžete prohlédnout na ukázce od autora.

Odkaz na ukázku

Kde si ji můžete zkustit jednoduše modifikovat a přizpůsobit, zároveň si na této stránce můžete vygenerovat konfigurační json, který posléze využijete při instalaci.

1. krok Vložte CSS a Javascript do stránek.

<script type="module" src="cookieconsent-config.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@3.0.1/dist/cookieconsent.css">

2. krok Označte kategorií javascriptové bloky na stránce a přepněte jejich type na hodnotu text/plain

<script
    type="text/plain"
    data-category="analytics"
    data-service="Google Analytics"
>
<!-- Google analytics code -->
<!-- ... -->
</script>

3. krok Stáhněte si a vložte do stránek cookieconsent-config.js z playgroundu a upravte si textace

4. krok Vložte si do patičky odkaz změnu nastavení cookies

<button type="button" data-cc="show-preferencesModal">View Preferences Modal</button>

📦 Řešení #2 - Osano/cookieconsent

1. Nejprve si vložte knihovnu CookieConsent do webu. Můžete ji najít na GitHubu nebo využít CDN.

<script src="
https://cdn.jsdelivr.net/npm/cookieconsent@3.1.1/build/cookieconsent.min.js
"></script>
<link href="
https://cdn.jsdelivr.net/npm/cookieconsent@3.1.1/build/cookieconsent.min.css
" rel="stylesheet">

2. Přizpůsobení vzhledu a chování

window.addEventListener("load", function() {
  window.cookieconsent.initialise({
    palette: {
      popup: { background: "#000" },
      button: { background: "#f1d600" }
    },
    theme: "classic",
    content: {
      message: "Tento web používá cookies k zajištění co nejlepšího zážitku.",
      dismiss: "Rozumím!",
      link: "Zjistit více",
      href: "/privacy-policy"
    }
  });
});

window.addEventListener("load", function() {
  window.cookieconsent.initialise({
    palette: {
      popup: {
        background: "#edeff5",
        text: "#838391"
      },
      button: {
        background: "#4b81e8"
      }
    },
    theme: "edgeless",
    type: "opt-in",
    content: {
      message: "Tento web používá cookies k zajištění co nejlepšího zážitku.",
      allow: "Povolit cookies",
      deny: "Zakázat",
      link: "Zjistit více",
      href: "/privacy-policy"
    },
    onInitialise: function (status) {
      var type = this.options.type;
      var didConsent = this.hasConsented();
      if (type == 'opt-in' && didConsent) {
        // enable cookies
      }
      if (type == 'opt-out' && !didConsent) {
        // disable cookies
      }
    },
    onStatusChange: function(status, chosenBefore) {
      var type = this.options.type;
      var didConsent = this.hasConsented();
      if (type == 'opt-in' && didConsent) {
        // enable cookies
      }
      if (type == 'opt-out' && !didConsent) {
        // disable cookies
      }
    },
    onRevokeChoice: function() {
      var type = this.options.type;
      if (type == 'opt-in') {
        // disable cookies
      }
      if (type == 'opt-out') {
        // enable cookies
      }
    }
  });
});

Checklist pro implementaci cookies lišty

Zpracoval jsem pro vás jednoduchý checklist, který vám pomůže zajistit, že vaše cookies lišta je v souladu s právními požadavky:

Checklist

• ⏹️ Souhlas uživatele je získán před uložením netechnických cookies.
• ⏹️ Cookies lišta umožňuje snadný přístup k cookies policy nebo privacy policy.
• ⏹️ Tlačítko „Přijmout vše“ a „Odmítnout vše“ jsou stejně snadno přístupná.
• ⏹️ Uživatelé mají možnost podrobně nastavit své preference cookies (např. podle kategorií).
• ⏹️ Cookies lišta nepřekáží v navigaci na webu, ale je zároveň dobře viditelná.
• ⏹️ Ikona nebo odkaz pro změnu nastavení cookies je vždy přístupný (např. v patičce webu).
• ⏹️ Cookies lišta je plně funkční i na mobilních zařízeních a různých prohlížečích.
• ⏹️ Kategorie cookies jsou správně označeny a odděleny dle účelu (nezbytné, preferenční, statistické, marketingové).
• ⏹️ Uživatelé mají možnost kdykoliv odvolat svůj souhlas nebo změnit preference.
• ⏹️ Při odvolání souhlasu jsou cookies správně odstraněny nebo deaktivovány.
• ⏹️ Uživatelé nejsou manipulováni přednastavenými volbami (např. předzaškrtnutými políčky).
• ⏹️ Uživatelé nejsou nuceni souhlasit s cookies pro přístup k základním funkcím webu.
• ⏹️ Detailní popis všech používaných cookies je součástí cookies policy.

Závěr

Cookies lišta je důležitým prvkem webových stránek, který zajišťuje soulad s právními předpisy na ochranu osobních údajů. Implementace cookies lišty vyžaduje pečlivé plánování a dodržování zásad transparentnosti, informovanosti a respektování soukromí uživatelů. Díky open source řešením můžete snadno a efektivně implementovat cookies lištu na svůj web a zajistit, že budete v souladu s legislativou a ochráníte se tak před potenciálními pokutami a právními problémy.

Užitečné odkazy

• Úřad pro ochranu osobních údajů
• Směrnice ePrivacy
• Open Source Orest Bida Cookies
• Cookies Rozšíření pro Chrome