Centralizovaná správa a evidence souhlasů s cookies

Kompletní řešení pro získávání, správu a evidenci souhlasů s použitím cookies dle nejnovějších českých nařízení, vycházejících z GDPR. Tato služba nezahrnuje pouze cookies lištu pro použití na webu, ale i serverovou část s evidencí použitých cookies a se záznamy o souhlasech. Službu je možné využít na libovolných webech MU, po domluvě i mimo ni, pouze však pro akademickou sféru.

Tato služba zahrnuje

Cookies lišta v designu MU	Tuto lištu lze vložit na web pomocí jednoduchého JS kódu
JS framework	Slouží k ovládání spouštění a zakazování skriptů či vložených iframe prvků, které vystavují cookies, na něž se vztahuje souhlas
Aplikace na správu cookies	Serverová aplikace, ve které evidujete cookies použité na webu. Obsahuje také databázi nejčastěji používaných služeb (Google analytics, Hotjar atd.)
Databáze souhlasů	Do této databáze se ukládají údaje o všech udělených souhlasech pro případné řešení sporů.

Nastavení služby

Pro nastavení služby se na nás obraťte. Je třeba zřídit záznam v evidenci a přidělit vašemu webu unikátní API klíč. Poté dostanete přístup do aplikace, kde si nastavíte informace o cookies, použitých na vašem webu.

Nastavení cookies vašeho webu

Aplikace pro správu cookies vašeho webu je v rámci Umbraca na adrese https://webcentrum.muni.cz/redakce. Zde rozbalíte uzel External Webs Config pomocí šipečky a vyberete web, který chcete spravovat.

Nastavení domén webu

Ve správě cookies webu pak na záložce Nastavení zadáte všechna doménová jména vašeho webu. Je třeba zadat jen ta jména, na kterých web reálně běží, není potřeba vkládat aliasy pro přesměrování – tedy např. pro web MU by stačilo vložit www.muni.cz. Toto nastavení slouží k ochraně před zneužitím vaší cookies lišty na jiném webu.

Výběr cookies externích služeb

Na záložce Cookies je pak kompletní nastavení cookies vašeho webu. V první části je nastavení služeb třetích stran, které na webu používáte. Zde můžete vybrat služby z databáze, která je pro vás připravena. Pokud nějaká služba v databázi chybí, obraťte se na nás prosím na adrese webcentrum@ics.muni.cz a my ji doplníme.

V databázi máme pro každou službu evidenci všech cookies, které používá, a také je zde každá služba zařazena do jedné z kategorií marketing, analytiky, sociální sítě, nebo nezbytné cookies.

Databáze je udržována ručně, je tedy možné, že nám v ní nějaká cookie bude chybět, nebo nebudou informace aktuální. Pokud na tuto situaci narazíte, opět se nám prosím ozvěte.

Zadání vlastních cookies webu

Dále je potřeba nastavit všechny cookies, které si web vytváří sám. V první části nastavte název vaší společnosti a odkaz na vaši cookies politiku. Pro MU je obojí možné ponechat prázdné, doplní se automaticky

V druhé části pak zadejte seznam všech cookies, které web vystavuje sám. Každý záznam obsahuje:

název cookie,
expiraci: čas životnosti cookie, formát řetězce je uveden v nápovědě u políčka,
popis významu cookie: stručná informace, k čemu je cookie dobrá
typ: zařazení cookie do jednoho z typů analytika, marketing, sociální sítě, nezbytné.

Přidání lišty na web

Základem je vložit do patičky webu těsně před </body> kód, kterým lištu zprovozníte:

<script>
!function(i,c){i.muniCookies=c;var s=document.createElement("script");s.src=c.scriptUrl+"main.js",document.head.appendChild(s)}(window,{
scriptUrl: 'https://cdn.muni.cz/Scripts/libs/muni-cookies/',
lang: 'cs',
key: '<API klíč>'})
</script>

Tento kód zajistí, že návštěvníkům bez uděleného souhlasu či nesouhlasu se při každém načtení stránky zobrazí ve spodní části cookies lišta. Lišta obsahuje pouze základní možnosti a po rozkliknutí odkazu Další možnosti se pak otevře dialog s kompletním seznamem cookies dle nastavení daného webu s možností udělit souhlas či nesouhlas po jednotlivých typech.

Možnosti nastavení lišty

V rámci kódu, kterým se lišta na web vkládá, je možné předat několik parametrů:

Parametr	Popis	Výchozí hodnota
key	API klíč pro přístup k vašemu účtu	Nutno vložit
lang	jazyk lišty – podporované hodnoty jsou cs a en	Nutno vložit
customStyle	boolean, kde true znamená web v jiném designu než MuniWeb – cookie lišta v takovém případě načte další dodatečné CSS nutné pro svoji funkci pozn.: pokud by po přidání na váš web lišta správně nefungovala, dejte nám vědět a chyby opravíme	false
replaceIframes	boolean, kterým lze potlačit automatické nahrazení iframe prvků placeholdery	true
placeholderClass	název třídy placeholderu pro možnost přizpůsobení jeho stylů	mc-iframe-placeholder
colors	Objekt s vlastním nastavením barev elementů v liště	undefined

Konfiguraci barev je možné provést pomocí následujících parametrů:

Parametr	Popis	Výchozí hodnota
primary	Hlavní barva, která je použita v tlačítcích a záhlaví dialogu	#0000dc
primaryText	Barva textu uvnitř elementů v hlavní barvě	#fff
link	Barva textu odkazů	#0000dc

Ukázka plné konfigurace:

<script>
!function(i,c){i.muniCookies=c;var s=document.createElement("script");s.src=c.scriptUrl+"main.js",document.head.appendChild(s)}(window,{
scriptUrl: 'https://cdn.muni.cz/Scripts/libs/muni-cookies/',
lang: 'cs',
key: '<API klíč>',
customStyle: true,
replaceIframes: false,
colors: {
  primary: '#112233',
  primaryText: '#fff',
  link: '#ff00ff'
}})
</script>

Blokování cookies vytvářených skripty

Obecně není technicky možné zablokovat vytvoření cookie v javascriptu, je tedy třeba zablokovat skripty, které cookies vytvářejí. Blokování však musí být platné pouze do chvíle udělení souhlasu. Za tímto účelem je třeba u každého skriptu, který generuje cookies jež vyžadují souhlas, nastavit typ na text/plain a přidat mu třídu odpovídající typu jím vytvářených cookies:

mc-analytics: analytické cookies
mc-socials: cookies sociálních sítít
mc-marketing: marketingové cookies
Pro skripty vytvářející cookies nutné k běhu webu není třeba nic měnit. Tyto skripty se mohou spouštět bez omezení.

<script type="text/plain" class="mc-analytics">
    window.alert("Povoleny analytické cookies!");
</script>

<script async src="//platform.twitter.com/widgets.js" type="text/plain" class="mc-socials"></script>

Blokování cookies z iframe prvků

Podobně jako u skriptů je potřeba iframe prvky zablokovat až do chvíle udělení souhlasu. Toto je možné provést tak, že se u daného iframe nastaví místo atributu src atribut data-mc-src a opět přiřadí třída odpovídající typu cookies tohoto iframu.

<iframe data-mc-src="https://www.youtube.com/embed/ChHx-D7J27g?rel=1&amp;modestbranding=1"
    class="mc-socials"
    frameborder="0"
    allowfullscreen=""></iframe>

Placeholder pro iframe

Na rozdíl od skriptů by u iframe prvků jejich nezobrazení způsobilo výpadek v layoutu stránky. Z toho důvodu je možné je nahradit placeholderem. Stačí přidat třídu mc-has-placeholder na daný iframe. Placeholder obsahuje obecný text o tom, že je třeba udělit souhlas pro zobrazení odkazu a dále odkaz, který otevře cookies dialog.

Obecný placeholder by nebyl pro uživatele příliš srozumitelný, je proto možné mu pomocí atributu data-mc-placeholder-title nastavit nadpis.

Opětovné zobrazení dialogu

Po udělení souhlasu či nesouhlasu zmizí cookies lišta z webu a již se neobjeví. Aby uživatel mohl svůj souhlas změnit, je potřeba v rámci šablony webu umístit odkaz pro její opětovné otevření. Obvyklé místo pro tento odkaz je zápatí webu. Danému elementu stačí přidat třídu mc-open-dialog:

<a href="#" class="mc-open-dialog">Cookies</a>

Spuštění skriptů a iframů po udělení souhlasu

Bezprostředně po udělení souhlasu jsou všechny skripty a iframe prvky, které odpovídají povoleným typům, automaticky ihned spuštěny. Při opakované návštěvě se již cookie lišta nezobrazí a vše povolené je ihned spuštěno.

Pokročilé scénáře

Databáze souhlasů

Po udělení souhlasu či nesouhlasu je tato událost vždy zaznamenána do databáze. Každý záznam obsahuje:

datum souhlasu
unikátní identifikátor: je uložen také v cookie na straně uživatele pro možnost pozdějšího spárování
typy cookies, ke kterým byl souhlas udělen
znění textů, se kterými byl uživatel v době souhlasu seznámen

Tato databáze může sloužit pro sporné případy, kdy by si uživatel stěžoval na to, že s nějakou cookie nesouhlasil a dále také jako statistika udělování (ne)souhlasů.

Spuštění skriptů a iframů již ze serveru

Data souhlasu jsou uloženy v cookie muni-cookies. Tuto cookie je možné již na serveru načíst a povolené skripty vypsat bez úprav tak, aby byly spuštěny ihned, bez čekání na jejich zpracování kódem cookies lišty. Formát uložené hodnoty je následující:

<seznam typů cookies oddělených čárkou>[|<id souhlasu>]

Načíst seznam povolených typů je tedy možné přes split dle znaku svislítka a následně opět split první hodnoty podle čárky. Hodnota je URL enkódovaná, před načtením je tedy potřeba ji dekódovat.

U elementů je možné ponechat třídy mc-socials atd.

Využití placeholderu i pro skript

Některé služby mohou vložený obsah zobrazovat nikoliv přes iframe, ale přes speciální skript. To je např. případ Twitteru. Pro takovéto případy je možné vložit placeholder element i na jiné prvky než iframe. Pro zprovoznění platí stejná pravidla jako pro iframe: třída dle typu cookies, třída mc-has-placeholder a možnost vložit nadpis přes data-mc-placeholder-title.

<a class="twitter-timeline mc-socials mc-has-placeholder"
    data-mc-placeholder-title="Twitter Feed"
    data-height="400"
    data-theme="light"
    href="https://twitter.com/test">Tweets by test</a>
<script async src="//platform.twitter.com/widgets.js" type="text/plain" class="mc-socials"></script>

Uložení souhlasu v Safari

Prohlížeč Safari bohužel uplatňuje politiku sedmidenní životnosti veškerých dat vytvářených na klientské straně. Z tohoto důvodu musí po uplynutí sedmi dnů bez návštěvy webu uživatel znovu odklikávat souhlas s cookies.

Jediná prevence tohoto chování je ukládat cookies ze serveru. V případě cookies lišty je možné řešit posloucháním události mc-can-save-consent a následným zavoláním vlastního server-side API, které cookie muni-cookies přeuloží na straně serveru. Při zavolání této události cookie již obsahuje všechna data souhlasu a je možné ji přeuložit tak jak je.

Více typů souhlasu u jednoho prvku

Coookie služba umožňuje jeden skript či iframe prvek označit více typy souhlasů. Takový skript či iframe se spustí pouze v situaci, kdy uživatel udělil všechny uvedené typy souhlasů s cookies.

<script type="text/plain" class="mc-analytics mc-marketing">
    window.alert("Povoleny analytické i marketingové cookies zároveň!");
</script>

Tato funkcionalita se typicky hodí v situaci, kdy máte na webu Google Tag Manager skript, který zároveň propojuje více externích služeb různých typů a není jednoduše možné ho upravit na vlastní callback na udělení souhlasu.

Vlastní callback na udělení souhlasu

Lišta po udělení souhlasu zavolá událost, na kterou je možné se napojit a vykonat nějaké vlastní nastavení:

window.addEventListener('mc-consent', function (e) {
    const allowed = e.detail;
    for (var i = 0; i < allowed.length; i++) {
        window.alert('Povolený typ: ' + allowed[i]);
    }
});

Detail události obsahuje seznam názvů povolených typů cookies.

Událost je zavolána ihned po udělení souhlasu a dále také při každém spuštění stránky, pokud je souhlas již udělen.

Může se hodit např. pro Google Tag Manager, kde v rámci jednoho skriptu nastavujete více různých typů služeb.

Vlastní callback na spuštění prvku po udělení souhlasu

Pro velmi specifické případy, kdy je např. celý placeholder iframe prvku nějak uzpůsoben, je také možné poslouchat událost při spuštění daného prvku bezprostředně po udělení souhlasu:

window.addEventListener('mc-consent-run-content', function (e) {
    switchIframeWithPlaceholder(e.detail.elem);
    window.alert('Typ: ' + e.detail.type);
});

Detail události obsahuje objekt se dvěma klíči: elem (HTML element daného prvku) a type (název typu daného prvku).

Zobrazení náhledu YouTube videa místo placeholderu

Přímo cookie lišta tuto funkcionalitu v současné chvíli nenabízí, ale je možné ji implementovat na straně serveru. YouTube na adrese http://img.youtube.com/vi/{youtubeId}/{file}.jpg nabízí pro každé video jeho obrázkové náhledy, kde

{youtubeId} je id videa z YouTube
{file} je jedno z ["maxresdefault", "hqdefault", "mqdefault"] – ne každé video má všechny velikosti k dispozici, je tedy třeba provést kontrolu na straně serveru

Google Analytics Consent Mode

V rámci Google Analytics 4 je možné pomocí nastavení tzv. Consent Mode trackovat i uživatele, kteří cookies nemají povolené. Toto nastavení ale cookies lišta neprovádí a je potřeba ho implementovat vlastními silami. Jako základ zde bude muset sloužit poslouchání události mc-consent a následně zavolání GA.

Zdrojové kódy lišty

Front end část lišty je možné prozkoumat na https://gitlab.ics.muni.cz/DIS/muni-cookie-dialog (pro přidělení přístupu se prosím obraťte na webcentrum@ics.muni.cz). Serverová část je součástí Umbraca, její zdrojové kódy tedy nejsou přístupné.