Cookie lišta na web krok za krokem

Proč cookie lišta vůbec je (a proč ji řešit)

Než začneme kódit, ať víme proč. Cookies umí návštěvníka sledovat – zapamatovat si ho a měřit jeho pohyb, někdy i napříč různými weby. Proto zákon vychází z jednoduché myšlenky: o svých datech má rozhodovat sám návštěvník, ne web za něj. Z toho plyne pár principů, které lišta v praxi naplňuje:

• Souhlas předem (opt-in). Dokud návštěvník neklikne na „Souhlasím", žádné nenutné cookies se neukládají. Stará věta „používáním webu souhlasíte" dnes nestačí.
• Svobodná volba. Odmítnout musí jít stejně snadno jako souhlasit – jinak to není opravdový souhlas, ale nátlak.
• Průhlednost. Návštěvník má vědět, co a proč ukládáte – proto na liště bývá odkaz na víc informací.

A proč to řešit i na malém webu? Jednak je to zákon (za porušení hrozí pokuta), jednak je to slušnost vůči návštěvníkům, která buduje důvěru. Cookie lišta je prostě způsob, jak tyhle principy splnit technicky správně.

Potřebuju cookie lištu vůbec?

Ne vždycky. Záleží, jaké cookies web ukládá:

• Nutné (technické) cookies – např. přihlášení nebo obsah košíku. Ty souhlas nepotřebují.
• Nenutné cookies – měření návštěvnosti (Google Analytics, TOPlist), reklama, cílení. Ty vyžadují souhlas předem.

Pokud tedy máte na webu jen statické stránky bez měření, lištu nepotřebujete. Jakmile ale přidáte třeba počítadlo návštěv, platí podle novely zákona o elektronických komunikacích (ZEK, od 1. 1. 2022) režim opt-in:

• měření se smí spustit až po aktivním souhlasu (ne hned při načtení),
• odmítnout musí jít stejně snadno jako souhlasit (rovnocenná tlačítka, žádné triky).

Z čeho se lišta skládá

Spojíme tři věci, které znáte z předchozích návodů (plus novinku – JavaScript):

• HTML – samotná lišta (text a dvě tlačítka),
• CSS – jak vypadá (okno dole na stránce),
• JavaScript – logika: ukázat lištu, zapamatovat volbu a spustit měření až po souhlasu. JavaScript je jazyk, který přidává webu interaktivitu.

1. HTML – kostra lišty

Do stránky (nejlépe těsně před </body>) vložíme lištu. Všimněte si id u prvků – přes ně na ně sáhne JavaScript:

<div id="cookie-bar" class="cookie-bar">
  <p>
    <strong>Cookies pro měření návštěvnosti.</strong>
    Statistické cookies uložíme jen s vaším souhlasem.
    <a href="informace.html">Více informací</a>
  </p>
  <div class="cookie-buttons">
    <button id="cc-reject">Odmítnout</button>
    <button id="cc-accept">Souhlasím</button>
  </div>
</div>

2. CSS – vzhled

Lištu „přilepíme" dolů na obrazovku a učešeme tlačítka. Důležitý řádek je display:none – lišta je defaultně skrytá a ukáže ji až JavaScript, když bude potřeba:

.cookie-bar {
  display: none;                 /* JS ji ukáže, až bude třeba */
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  max-width: 640px; margin: 0 auto;
  background: #fff;
  border: 1px solid #e0eaf6;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.15);
  padding: 1.2rem 1.4rem;
  gap: 1rem; align-items: center; flex-wrap: wrap;
}
.cookie-bar p { flex: 1 1 240px; margin: 0; font-size: .9rem; }
.cookie-buttons { display: flex; gap: .6rem; }
.cookie-buttons button {
  border: 0; cursor: pointer; font-weight: 600;
  padding: 10px 22px; border-radius: 50px;
}
#cc-accept { background: #005bb5; color: #fff; }
#cc-reject { background: #fff; color: #005bb5; border: 1px solid #cddcf0; }

Takhle pak lišta vypadá:

3. JavaScript – logika (to nejdůležitější)

Teď lištu „oživíme". JavaScript zajistí čtyři věci: ukázat lištu jen když ještě není rozhodnuto, uložit volbu, schovat lištu a spustit měření až po souhlasu. Volbu si zapamatujeme do localStorage (malá „paměť" prohlížeče), aby lišta příště neotravovala:

<script>
  var KEY = "cookie_souhlas";
  var bar = document.getElementById("cookie-bar");

  // Lištu ukážeme jen když ještě není rozhodnuto
  if (!localStorage.getItem(KEY)) {
    bar.style.display = "flex";
  }

  // Tlačítko „Souhlasím"
  document.getElementById("cc-accept").addEventListener("click", function () {
    localStorage.setItem(KEY, "ano");
    bar.style.display = "none";
    spustitMereni();               // měření se spustí AŽ teď
  });

  // Tlačítko „Odmítnout"
  document.getElementById("cc-reject").addEventListener("click", function () {
    localStorage.setItem(KEY, "ne");
    bar.style.display = "none";
  });

  // Když návštěvník souhlasil už dřív, spustíme měření i po návratu
  if (localStorage.getItem(KEY) === "ano") {
    spustitMereni();
  }

  function spustitMereni() {
    // sem přijde kód počítadla / analytiky (např. TOPlist)
  }
</script>

Klíč: měření spustit až po souhlasu

Všimněte si, že spustitMereni() se volá jen po kliknutí na „Souhlasím" (a při návratu, když souhlas už dřív padl). Nikdy ne hned při načtení stránky. To je celé jádro souladu se zákonem: bez souhlasu žádné měření. Kód počítadla proto nikdy nedávejte natvrdo do stránky – vložte ho dovnitř funkce spustitMereni().

Časté chyby

• Měření běží hned při načtení. Nejčastější a právně nejzávažnější chyba. Kód počítadla musí být uvnitř spustitMereni(), ne natvrdo ve stránce.
• Lišta naskakuje pořád dokola. Zapomněli jste uložit volbu do localStorage, nebo ji při startu nečtete.
• „Odmítnout" je schované nebo těžší než „Souhlasím". Zákon chce rovnocenná tlačítka – dejte je vedle sebe a stejně výrazná.
• Chybí odkaz na víc informací. Návštěvník má vědět, co a proč ukládáte – odkažte na stránku s informacemi o cookies.

Co dál?

Tohle je funkční základ. Dá se vylepšit – například lištu ukázat jen jednou za návštěvu, přidat odkaz „Nastavení cookies" pro změnu volby, nebo styly vkládat rovnou z JavaScriptu. Přesně takhle vylepšenou lištu používám i na tomhle webu.