Google Tag Manager
Google Tag Manager
Google Analytics
Google Analytics

Jak na cookies & cookie lištu pro web [update: consent 2.0]

Patrik KeblušekPatrik Keblušek,

Novela zákona o elektronických komunikacích nám prakticky od 1. ledna 2022 ukládá povinnost vkládat na web cookie lišty. Pokud samozřejmě cookies chceme sbírat. Ty potřebujeme například pro správné měření návštěvnosti webu.

Přestože tato novela zákona tady s námi už nejakú dobu je, tak stále mnoho webů tuto povinnost nesplňuje, nebo splňuje pouze na oko (je jedno jakou možnost v cookie liště zvolíte).

Některé cookies však můžete ukládat i bez toho, abyste si ptali od uživatelů souhlas. Pojďme se na to podívat blíže a rozebereme si, jak správně implementovat cookies pomocí Google Tag Manageru (GTM). Jak teda na to?

Vložte gtm na váš web

Cest jak nastavit správné cookie lišty je samozřejmě mnoho. Toto je cesta pomocí GTM, který již většína z vás jistě ve vašem webu má. Pokud ho tam nemáte, tak jej na web vložte zcela standardně, jak to doporučuje Google.

Kategorie cookies

V GTM se můžete odchytávat na jednu z 5 kategorií. Cookies jsou rozdělovány do těchto kategorií:

  • ad_storage
  • analytics_storage
  • functionality_storage
  • personalization_storage
  • security_storage

Na cookies, které spadají do kategorie functionality_storage a security_storage nepotřebujete žádný souhlas uživatele a můžete je bez obav dále ukládat.

Functionality_storage jsou cookies, které jsou bezprostředně nutné, aby vám fungovala aplikace. Může to být například cookies spojené s vložením produktu do košíku a následnou platbou v e-shopu (ale už ne k ukládání dat o zákazníkovi).

Noapak security_storage jak již název napovídá jsou cookies, které potřebujete využívat v rámci bezpečnosti a zabezpečení. Například k přihlášení uživatele.

Pro ad_storage, analytics_storage a personalization_storage již souhlas uživatele potřebujete. Jedná se o cookies, které jsou určeny pro reklamní, perzonalizační či analytické účely. Do těchto cookies samozřejmě spadá například oblíbený Google Analytics.

Update consent mode 2.0.

Od 1. března 2024 z důvodu nařízení EU došlo k rozšíření consentov o další 2 parametry a to:

  • ad_user_data
  • ad_personalization

Ad_user_data umožňuje ukládat informace jako jsou například telefonní číslo, e-mail a podobně. Ad_personalization slouží k nastavení personalizované inzerce.

Ve vašich cookie lištách můžete využít těchto 2 parametrů do sekce marketingového souhlasu. V dalších ukázkách kódu budeme počítat s těmito novými 2 parametry.

Nastavení GTM

Prvním krokem pro správné napojení cookie lišty na GTM je správně nastavit samotné GTM.

Je nutné, abyste všechny vaše scripty třetích stran, které využívají cookies, měly vkládané na váš web pomocí GTM. To je dobrá rada obecně, bez ohledu na to, zda využíváte cookie lištu nebo ne.

Pokud již máte vloženy skripty v GTM. Jako druhý krok potřebujete povolit přehled souhlasu v nastavení kontejneru GTM. Toto nastavení naleznete v GTM nastavení kontejneru → SprávceNastavení kontejneruPovolit přehled souhlasu.

Posílání souhlasů (consentů) z webu

Následně potřebujeme poslat do GTM informaci, že uživatel s cookies souhlasil nebo nesouhlasil nebo se ještě nerozhodl. Do GTM posíláme informací pomocí funkce gtag(), kterou jste si implementovali spolu s vložením GTM. Posíláme jednotlivé kategorie jako granted, v případě, že uživatel souhlas udělil nebo denied, v případě, že souhlas neudělil.

Uživatel přišel poprvé na web a nedal ještě souhlas

Při první návštěvě uživatele musíme do GTM poslat jednoznačnou informaci, že uživatel s cookies ještě nesouhlasil (consent default). Uděláme to tímto kódem:

gtag('consent', 'default', {
   'functionality_storage': 'granted',
   'security_storage': 'granted',
   'ad_storage': 'denied',
   'analytics_storage': 'denied',
   'personalization_storage': 'denied',
   'ad_user_data': 'denied',
   'ad_personalization': 'denied',
});

Do objektu ještě můžeme přihodit informaci, ať google čeká na update, takže finální volání vypadá takto:

gtag('consent', 'default', {
   'functionality_storage': 'granted',
   'security_storage': 'granted',
   'ad_storage': 'denied',
   'analytics_storage': 'denied',
   'personalization_storage': 'denied',
   'ad_user_data': 'denied',
   'ad_personalization': 'denied',
   'wait_for_update': 2000
});

V momentě, kdy se uživatel rozhodne, například pro všechny cookies, tak posíláme update cookies (consent update).

gtag('consent', 'update', {
   'functionality_storage': 'granted',
   'security_storage': 'granted',
   'ad_storage': 'granted',
   'analytics_storage': 'granted',
   'personalization_storage': 'granted',
   'ad_user_data': 'granted',
   'ad_personalization': 'granted',
});

V případě, že se rozhodne pouze pro některé cookies, tak musíme poslat ostatní označené jako denied.

Následně je dobré si vybrané hodnoty někam uložit (například do localStorage). Také doporučujeme po odeslání souhlasu/ nesouhlasu pomocí window.dataLayer.push posílat i event, že se změnily cookies. Můžete se náseledně v GTM odkazovat na tuto událost (vytvořit spouštěč v GTM):

window.dataLayer.push({ event: 'consent_update' });

Uživatel již v minulosti zvolil souhlas/ nesouhlas

V tomto případě je postup stejný jako v předchozím případě. Pokud víme uživatelovo rozhodnutí okamžitě při návštěvě webu, tak posíláme consent default s jeho nastavením.

gtag('consent', 'default', {
   'functionality_storage': 'granted',
   'security_storage': 'granted',
   'ad_storage': 'granted',
   'analytics_storage': 'granted',
   'personalization_storage': 'granted',
   'ad_user_data': 'granted',
   'ad_personalization': 'granted',
   'wait_for_update': 2000
});

Pokud ale jeho rozhodnutí nevíme okamžitě (například si to potřebujeme nejprve přečíst např. z localStorage), tak pošleme consent default (kód o pár řádků výše) s tím, že do consent default přidáme wait_for_update (kód o pár řádků výše). Jakmile víme uživatelské rozhodnutí, tak posíláme consent update, ukládáme volbu (např. do localStorage) a doporučuji posílat také consent_update event:

gtag('consent', 'update', {
   'functionality_storage': 'granted',
   'security_storage': 'granted',
   'ad_storage': 'granted',
   'analytics_storage': 'granted',
   'personalization_storage': 'granted',
   'ad_user_data': 'granted',
   'ad_personalization': 'granted',
});
window.dataLayer.push({ event: 'consent_update' });

To je už z pohledu nastavení všechno. Následně ještě potřebujeme nastavit jednotlivé značky v GTM.

Nastavení značek v GTM

U jednotlivých značek můžeme v GTM nastavit jaké souhlasy značka potřebuje proto, aby se spustila. Můžeme tak učinit v nastavení konkrétní značky v sekci Nastavení souhlasu.

Některé značky (jako například Google Analytics) již mají integrované své souhlasy, takže není třeba jim nastavovat další.

V momentě, kdy značky budou mít k dispozici dané souhlasy, tak se spustí.

Kontrolu či souhlasy odesíláte do GTM provedete přímo v GTM v režimu Ukázka. Případně vám pomůže plugin do prohlížeče, který zobrazuje odeslané eventy do GTM (například Dataslayer nebo Datalayer Checker) - náš článek o pluginech.

Jak by měla cookie lišta vypadat a na co si dát pozor?

Toto je již více diskuse s právníky. Moje zkušenosti z těchto diskusí se vám budu snažit ve stručnosti popsat:

- uživatele nesmíte "násilně" tlačit do toho, aby vám cookies povolil 
- tlačítka pro odmítnutí a povolení cookies by měla mít stejnou vizuální váhu (barvu, velikost písma, klikací plochu...) 
- uživateli umožněte cookie lištu zavřít bez možnosti si cookies zvolit (totožné s tlačítkem pro odmítnutí) 
- uživateli umožněte si vybrat konkrétní kategorie 
- uživatel by měl možnost své rozhodnutí změnit, ať už znovu otevřením cookie lišty nebo minimálně návodem jak to může udělat

To je všechno :)

Po implementaci výše byste měli mít správně implementovanou cookie lištu a reflektovat souhlas/ nesouhlas uživatelů. Je samozřejmě dobré myslet na to, že uživatel souhlas dát nemusí nebo vůbec nemusí kliknout na jakoukoli možnost a vám mohou přestat fungovat některé části webu (například analytiky).

Pokud byste měli s implementací problém, tak se určitě zastavte na náš Discord, kde implementaci můžeme prodiskutovat.