# CookieKit — kompletní customizační příručka > Tenhle dokument je záměrně samostatný a „AI-ready". Můžeš ho celý vložit AI a říct např.: > *„Podle téhle příručky mi vygeneruj snippet pro cookie lištu: modal uprostřed, fialový akcent #6b4eff, zaoblení 20px, český text, GTM-ABC123, plovoucí tlačítko zapnuté."* — AI z toho složí hotový kód. CookieKit je hostovaná cookie lišta (Consent Mode v2 + blokování skriptů). Nasazuje se **jedním ` ``` To je vše, co je potřeba. Widget sám: nastaví Consent Mode default (vše zakázáno), načte GTM, vykreslí lištu, po volbě pošle souhlas. > ⚠️ **Umístění rozhoduje o tom, jestli lišta vůbec chrání.** CookieKit musí být **úplně první > skript v ``** — nad GTM, nad `gtag`, Clarity, Pixelem — a **bez `async` / `defer`**. > > Loader je malý (pár kB, z CDN s cache) a musí doběhnout dřív, než se spustí cokoli dalšího: > jen tak nastaví Consent Mode `default` **před** GTM a zachytí měřáky dřív, než se načtou. > S `async` ho inline GTM snippet předběhne — GTM pak běží bez stavu souhlasu (= jako by byl > udělen) a auto-block nezablokuje nic. Ověřeno v prohlížeči: s `async` proběhlo před souhlasem > 7 ze 7 testovacích měřáků, bez něj 0 ze 7. > > Co je v `` **nad** CookieKitem, zablokovat nejde. **Webflow:** vlož ho jako první řádek > do *Site settings → Custom code → Head code*. Nativní integrace Webflow (Google Analytics, > Clarity…) vkládá Webflow až za tento kód, takže na ně auto-block dosáhne. --- ## 1b. Embed režim — všechno řízené z aplikace (`data-config`) Místo dlouhého snippetu s atributy stačí **jeden řádek s ID uložené konfigurace**: ```html ``` Widget si podle ID **stáhne uloženou konfiguraci** (z CookieKit Studia) a sám ji aplikuje — barvy, layout, texty, GTM, vše. Vzhled i texty se mění **ve Studiu**, klient do kódu nesahá; po uložení se lišta sama aktualizuje (cache ~5 min). Consent Mode default se nastaví hned (měření je OK), vzhled naběhne o chlup později. Když config chybí/nenačte se, widget nespadne (fail-open). Zbytek příručky (§2–§12) popisuje **atributový režim** — buď ho použij přímo, nebo si ve Studiu naklikáš config a použiješ jednořádkový `data-config` embed výše. --- ## 2. Všechny atributy na ` ``` - `texts` — přepis/doplnění textů per jazyk (**jakýkoli** kód jazyka — cs/en/de/sk/pl jsou vestavěné, ostatní přidáš sem). Klíče viz výše. Widget podle `` sám vybere správný jazyk. Kromě klíčů výše jsou ještě pro výpis cookies (§6b): `cookieList`, `colName`, `colProvider`, `colPurpose`, `colExpiry`. - `policy` — odkaz na cookie stránku per jazyk (má přednost před `data-policy`). - `autoClear` — seznam cookies, které se smažou při odvolání dané kategorie (podporuje `*` na konci = prefix). **Jak widget vybere jazyk:** `data-lang` → `` → první segment URL (`/en/…`) → jazyk prohlížeče → `cs`. Vybere ale jen z jazyků, které **umí** — to jsou vestavěné balíčky (cs, en, de, sk, pl) **plus každý jazyk, pro který mu tady dodáš `texts`**. Kódy jsou dvoupísmenné (ISO 639-1); regionální varianty typu `pt-BR` se ořežou na `pt`. Pro jazyk bez vestavěného balíčku se jako základ vezmou české texty a přepíšou se tím, co dodáš — proto u vlastního jazyka vyplň **všechny** klíče. **Ve Studiu:** jazyk se přepíná vpravo v liště nad panelem (chipy `CS EN DE SK PL +`) — přepíná zároveň texty i náhled. Tlačítkem `+` přidáš vlastní jazyk (kód + název), tečka na chipu značí, že jazyk má vlastní texty, `×` ho odebere. URL cookie stránky se zadává pro právě zvolený jazyk a ukládá se do mapy `policies`. --- ## 6. Kategorie souhlasu → Google Consent Mode v2 Lišta má 3 kategorie a mapuje je takto: | Kategorie | Co povolí (Consent Mode signály) | |---|---| | **Nezbytné** (vždy zapnuto) | `security_storage`, `functionality_storage` | | **Analytické** | `analytics_storage`, `personalization_storage` | | **Marketingové** | `ad_storage`, `ad_user_data`, `ad_personalization` | Před souhlasem je vše `denied`. Po volbě widget zavolá `gtag('consent','update',…)` **a** pushne `dataLayer` event `ckit_consent_update` (klíče `consent_analytics`, `consent_marketing` s hodnotou `granted`/`denied`). --- ## 6b. Výpis konkrétních cookies v „Nastavení" Lišta umí pod každou kategorií vypsat **cookies, které sken na webu opravdu našel** — název, poskytovatel, účel a platnost, v rozbalovací tabulce (jako to dělá Cookiebot). Není to ručně psaný seznam: bere se z posledního skenu, takže **po každém skenu se sám aktualizuje** (měsíční cron nebo ručně ve Studiu). **Embed režim (`data-config`)** — zapni ve Studiu na záložce Layout přepínač *„V Nastavení vypsat konkrétní cookies z posledního skenu"* a ulož. Cookies se pak posílají spolu s konfigurací, klient do kódu nesahá. Bez skenu se nevypíše nic a lišta vypadá jako dosud. **Atributový režim** — seznam dodáš sám přes `window.CookieKit.cookies`: ```html ``` Klíče jsou zkrácené, protože se posílají každému návštěvníkovi: `n` = název, `p` = poskytovatel, `u` = účel, `d` = platnost. Kategorie jsou jen `necessary` / `analytics` / `marketing`; co sken neumí zařadit, spadne do `necessary` (nic se nezahazuje). > Popisky sloupců a odkaz „Zobrazit cookies" se překládají klíči `cookieList`, `colName`, > `colProvider`, `colPurpose`, `colExpiry` (§5). Účely z automatického skenu jsou česky — > pro cizojazyčný web si je přepiš přes `cookies` ručně. --- ## 7. Blokování měřáků do souhlasu **Google tagy** (GA4, Ads) přes GTM řídí Consent Mode automaticky. **Ne-Google tagy v GTM** (Clarity, Meta Pixel, Sklik, Hotjar) — v GTM u každého tagu nastav **Consent Settings → „Require additional consent"**: - Meta Pixel / Sklik → `ad_storage`, `ad_user_data` - Clarity / Hotjar → `analytics_storage` **Skripty vlepené napřímo do webu** (mimo GTM) — přeznač je, aby se spustily až po souhlasu: ```html ``` `data-ckit-category` = `analytics` nebo `marketing`. --- ## 8. Znovuotevření souhlasu Kdekoli na webu (patička, cookie stránka): ```html Nastavení cookies ``` Nebo zapni plovoucí kolečko atributem `data-reopen="true"`. JS API (na `window.CookieKit`): `CookieKit.show()` otevře lištu, `CookieKit.hide()` zavře, `CookieKit.getConsent()` vrátí uloženou volbu. --- ## 8b. Doklad o souhlasu — kdo ho vidí Každý souhlas se loguje a v záložce **Souhlasy** ve Studiu jde vyexportovat do CSV (doklad pro GDPR). Záznamy jsou **oddělené po účtech** — vidíš jen weby, které patří tobě; jiný účet se k nim nedostane. Přiřazení k účtu vzniká **při zápisu** souhlasu, a to takto (v tomto pořadí): 1. `data-config="slug"` (embed režim) — nejspolehlivější, souhlas se rovnou naváže na tvou konfiguraci; 2. jinak se hostname webu porovná s tím, co má konfigurace vyplněné (**Web → site**, případně URL ze záložky **Scan**). **Prakticky:** používej `data-config`, nebo si ve Studiu vyplň pole *site*. Když nesedí ani jedno, souhlasy se sice uloží, ale v dashboardu se ti neukážou (nejde je přiřadit k účtu). --- ## 9. Plně vlastní design (`data-css="off"`) Když chceš lištu nastylovat úplně od nuly, dej `data-css="off"` — widget nevloží žádné vlastní styly, jen vykreslí markup s těmito třídami (stabilní, neměnné): ``` #ckit kontejner (fixed) .ckit-banner karta .ckit-inner vnitřní padding .ckit-close křížek (jen modal) .ckit-title nadpis .ckit-desc popis .ckit-link odkaz „Více informací" .ckit-settings panel kategorií (skrytý dokud se neotevře) .ckit-cat řádek kategorie .ckit-cat-label / .ckit-cat-desc / .ckit-toggle .ckit-actions řádek tlačítek .ckit-manage odkaz „Nastavení" .ckit-btns .ckit-btn.ckit-btn-primary Přijmout .ckit-btn.ckit-btn-reject Odmítnout #ckit-save Uložit výběr #ckit-fab plovoucí kolečko (když data-reopen) ``` Třídy se nemění mezi verzemi → tvoje CSS drží. --- ## 10. Hotové příklady **Neopharma (zelená, cloud, plovoucí tlačítko):** ```html ``` **Modal, tmavý motiv (jedním atributem), fialový akcent:** ```html ``` **Tmavý s vlastními odstíny a fontem (přes CSS proměnné):** ```html ``` **Box vlevo nahoře, bez vlastního designu:** ```html ``` --- ## 11. Kam s tím ve Webflow - **Snippet** → Webflow → Site Settings → Custom Code → **Head Code**. - **Cookie stránka** — Studio (záložka Scan) umí z detekovaných měřáků vygenerovat hotovou HTML tabulku cookies → vložíš do **Webflow Embed** na stránku (např. `/informace-o-cookies`). - Případný **GTM noscript** (fallback bez JS) do Footer Code — nepovinné. --- ## 11b. Sken webu — co umí Záložka **Scan** ve Studiu otevře web v **reálném headless prohlížeči**, projde několik stránek téhož webu a zaznamená: - **jaké nástroje se opravdu načetly** — podle hostů, na které web sáhne (Adform, Clarity, Leady…), - **co je uvnitř GTM** — kontejner je veřejný, takže se z něj přečtou i tagy, které vystřelí až po souhlasu (Google Ads, custom HTML s pixely). Tohle statický sken HTML nikdy neuvidí. - **jaké cookies se skutečně nastaví** — přes CDP, tedy včetně third-party a HttpOnly, s kategorií, dobou platnosti a doménou. Co neumíme pojmenovat, ukážeme jako *neklasifikované* i s doménou — nikdy to nezmizí. Sken **vlastní uložené konfigurace** běží se **simulovaným souhlasem** (nastaví se `ckit_consent`), aby bylo vidět i to, co naběhne až po odsouhlasení. Ad-hoc sken cizí URL běží **bez souhlasu** — cizí cookie lištu nikdy neodklikáváme. Když se prohlížeč nepodaří spustit, sken **nespadne**: přepne se do nouzového režimu (statické HTML) a Studio to napíše. > Když sken najde měřák, který lišta neblokuje, zapni **Auto-block** (záložka Layout). > Auto-block zná mj. Adform, Clarity, Meta Pixel, Sklik, Hotjar, Smartlook, Criteo, > Glami/Heureka/Zboží, Ecomail a HubSpot. --- ## 12. Rychlá reference pro AI (shrnutí) - Nasazení = 1 `