Chceš mít na webu správně nastavený Cookie Consent? Fajn. Tady je kompletní návod, jak si to udělat. Nastavíme si spolu Cookie Lištu, Tag Manager a v něm konfiguraci analytiky, marketingových tagů a personalizaci webu.
Nelekej se, článek obsahuje hodně obrázků a proto se zdá být dlouhý. Uvař si kafe a pojďme se do toho pustit.
Mrazivá noc
Je temná a mrazivá noc. Cookie lišty na většině webech se hrůzou třesou v zápatí stránky a čekají na svůj obvykle rychlý konec kliknutím na tlačítko OK, souhlasím. Většina z nás už to ani nevnímá, je to takový šum, který automaticky odklikáváme, stejně jako čekáme na přeskočení reklamní vložky mezi videi tlačítkem Skip Ad.
To některé weby na to jdou chytřeji. Nenutí nás klikat jako polorobotizovaní šimpanzi, ale dají nám na výběr. Říkají a konají jasně.
“Používáme cookies k anonymním statistickým účelům. Pokud budete nadále prohlížet naše stránky předpokládáme, že s použitím cookies souhlasíte.”
Někde na to jdou zase pěkně z ostra. Prostě přes celou stránku zobrazí bránu a dožadují se souhlasu či ne, hlavně se rozhodni, jinak nesmíš do webového sídla. Jak z Pána prstenů.
Jinde na to zase úplně kašlou. Buď žádný souhlas nechtějí, nebo sice ano, ale v reálu se nic neděje a stejně se data sbírají jako zlato na Klondiku.
Chladný nález ÚOOÚ
Cookies a jiné prvky sledující aktivitu uživatelů webových stránek mohou být použity pouze s výslovným souhlasem subjektů údajů. Pouhé prohlížení webových stránek uživatelem nelze interpretovat jako jeho souhlas s použitím cookies. Jinými slovy, pokud je uživateli dána pouze možnost akceptovat sledování nebo ze stránek odejít, nelze takto udělený souhlas považovat za svobodný a souladný s právem.
Cookies lišty jen na parádu, scroll consent, cookie wally, žádné lišty… Nic z toho už není správné použít?
To je teda pecka. Koukám na náš optimicsí web. Máme fantasticky udělanou stránku s informacemi o tom, jaké technologie pro práci s daty používáme, jak se ze sběru dat opt-outovat, detailně popisujeme všechno co nás kdy napadlo.
Jenže máme scroll-consent. Dávno z doby než kdy kdo určil, jak to má vypadat. Přišlo nám to tehdy elegantní.
Vždyť přijdeme o data
Jenže pokud budeme čekat, až uživatel dá souhlas a do té doby nebudeme sbírat žádná data, tak o spoustu dat přijdeme.
Máme to nastavené docela dobře a zatím si nikdo nestěžoval.
Jak chcete takhle dělat analytiku? Jak asi chcete provozovat remarketing? Jak chcete vyhodnocovat konverze z kampaní? Je doba datová! Na čele se mi dělá vráska. Venku mrzne.
Ten kdo ví – setkání s Transparency Consent Frameworkem
V širším plénu specialistů na online marketing technologie jsme se shodli, že na internetu jsou nejvíce bičované reklamní technologie. Přeci kvůli špehování lidí. Včera jsem si prohlížel kávovar a dneska toho mám plnej internet. A kdo za to může? Google. A Facebook. A nadnárodní korporace. A publisheři.
Hned nás napadá Transparency Consent Framework. Protože jestli je někdo nejvíc bičovanej, tak jsou to publisheři a kdo má nepřísnější guidelines? Publisheři. Takže od koho si vzít low level mustr jak to dělat nejlépe?
TCFv2. Magic. Transparency Consent Framework ve své druhé inkarnaci.
Z něho si bereme potřebu granulárních consentů podle účelu použití. Pro náš web to bude stačit, ale Publisheři to budou mít složitější. Budou muset implementovat i Vendor Groups, ne jen Purpose Groups a TCF Stringy a _tcfapi. O tom ale jindy.
Výprava začíná
Vybírám tedy nějakou Cookie Consent Platformu, Cookie Consent Management Platform, CMP, Cookie Manager nebo cokoliv, co uspokojí mojí potřebu nabídnout správně nastavené skripty pro digital marketing v roce 2021.
Jsem línej. Brouzdám po netu a hledám řešení, které bude hned, bude free a dělá všechno co chci.
Upřímně, docela narážím. Drtivá většina nástrojů je cool a fancy, jako CookieBot, OneTrust a další, ale mají jen Free tier a pak chtějí prachy. Za pitomou cookie lištičku. Blbej kus Javascriptu, co pop-upne okénko s “OK, souhlasím” a pošle event.
A pak, světlo na konci tunelu. https://www.cookieconsent.com/
Netvrdím, že to je to nejlepší řešení na světě, ale rozhodně je free, umí spoustu jazykových mutací, umí granulárně přidávat consenty, má pěkné UI, je srozumitelné a vypadá to, že za tím je opravdu jen úmysl dělat cookie consenty správně.
Do toho jdu! Musím to předělat.
Hrdý buď, žes implementátor!
Asi je dobré si v tento moment ujasnit, co a jak s tím vlastně chci dělat.
Chci na webu Google Analytics 4, protože jsou free, mají streaming do BigQuery a jsou cool.
Chci na webu konverzní pixely Google Floodlight, protože je používáme.
Chci na webu mít Google Optimize, protože na základě historie přečtených článků personalizujeme s použitím Machine Learningu nabídku dalších doporučených článků.
Mohl bych toho chtít víc, ale na začátek si myslím, že to stačí.
Nebudu vám lhát, mám rád Google Tag Manager. Pracuju s ním 9 let od jeho první verze, znám se s vývojovým týmem osobně z návštěvy Googlu v San Franciscu a podle mě dnes na trhu neexistuje lepší Tag Manager. Sorry Adobe Launch, sorry Tealium IQ, sorry Matomo.
Takže můj kámoš pro implementaci bude Google Marketing Platform stack a Cookie Consent.
Cookie Consent
Základní funkcionalita
GDPR+ePrivacy – řeší za nás obě problematiky, které chceme řešit. Pro nás jasná volba.
Vzhled dialogu
Myslel jsem si, že je to jen o vkusu, ale je třeba být pozorný. Formy vzhledu Interstitial dialog a Interstitial Standalone jsou v rozporu s nálezem ÚOOÚ, protože zakrývají celou stránku a nedávají uživateli možnost používat službu bez souhlasu.
Tudíž můžeme vybírat ze Simple dialog a Headline dialog. Já jsem si vybral Headline dialog, protože se mi víc líbí. Uživatele i více motivuje se vyjádřit, jelikož je otravnější, ale pokud jej uživatel chce ignorovat, tak může a to je důležité.
Štelování detailů
Barvu nechám na vašem designu webu, mně se líbí světlý motiv, už jen proto, že má zelené tlačítko OK, souhlasím a to je pro mě UX barva na souhlas.
Takhle pak vypadá na webu
Language Czech je jasný, ale na chvíli se tu zastavím.
Script, který tento web vygeneruje obsahuje následující část:
cookieconsent.run({"notice_banner_type":"headline","consent_type":"express","palette":"light","language":"cs","website_name":"Optimics.cz","change_preferences_selector":"#changePreferences","cookies_policy_url":"https://www.optimics.cz/podminky-pouziti/"});
});
Pro nás je důležitý parametr language : „cs“. On totiž ten consent by měl být poplatný zemi, ve které je ta služba nabízena. Pokud máte jen obyčejný info web v Maďarštině a přistupuje na něj někdo z Čech, tak je OK že je Consent jen v Maďarštině. Pokud ale máte eshop a dodáváte z Maďarska do České republiky, pak by i Consent měl být v Češtině a také nakonfigurovaný podle české legislativy.
Zde je tedy malé vodítko pro ty, kteří by si chtěli tento consent parametrizovat pro více jazykových mutací webu.
Možnost změnit consenty po jejich udělení
Toto je také důležité. ÚOOÚ uvádí, že přijetí souhlasu by mělo být stejně náročné, jako jeho odebrání, tudíž budeme muset vytvořit tlačítko, které nás vždy a snadno hodí přímo do konfigurace consentů. K tomu budeme potřebovat znát DOM Selector (adresu) toho tlačítka, které si později vyrobíme.
Stránka s Cookies Policy
Tak bez toho se také neobejdeme. Už třeba jen proto, že v licenčních podmínkách Google Analytics je toto vyžadováno. Že uživatel bude podrobně seznámen s tím, jak a kam jsou jeho data posílána. Tedy i kdyby nám doposud stačilo rozhraní Cookie Consent nástroje, podmínky, ke kterým jste se zavázali při vytváření Google Analytics property vyžadují více. Předpokládám, že jste je četli, ale kdyby ne, tak tohle tam píšou.
Přidání callbacků pro Consent Groups
Jelikož jsem si zvolil Google Tag Manager, tak pro komunikaci s ním budeme používat jeho API jménem dataLayer. To se chová jako běžné JavaScriptové pole, do kterého zapisujeme metodou push().
Mým cílem tedy v tento moment je instruovat Cookie Consent tak, aby mi po odsouhlasení jednotlivých Consent Groups volal patřičné dataLayer.push() podle přidělených consentů, díky čemuž si potom v Tag Manageru mohu granulárně spouštět jednotlivé Tagy podle potřeby.
Personalizace
<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({
event:"addConsent",
consentType:"personalizace"
});
</script>
Tracking
<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({
event:"addConsent",
consentType:"tracking"
});
</script>
Reklamy
<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({
event:"addConsent",
consentType:"ads"
});
</script>
Špica, mám vygenerovaný script a teď co s ním?
<script type="text/javascript" src="//www.cookieconsent.com/releases/3.1.0/cookie-consent.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
cookieconsent.run({"notice_banner_type":"headline","consent_type":"express","palette":"light","language":"cs","website_name":"Optimics.cz","change_preferences_selector":"#changePreferences","cookies_policy_url":"https://www.optimics.cz/podminky-pouziti/"});
});
</script>
<!-- Personalizace -->
<script type="text/plain" cookie-consent="functionality">
var dataLayer = window.dataLayer || [];
dataLayer.push({
event:"addConsent",
consentType:"personalizace"
});
</script>
<!-- end of Personalizace-->
<!-- Tracking -->
<script type="text/plain" cookie-consent="tracking">
var dataLayer = window.dataLayer || [];
dataLayer.push({
event:"addConsent",
consentType:"tracking"
});
</script>
<!-- end of Tracking-->
<!-- Ads -->
<script type="text/plain" cookie-consent="targeting">
var dataLayer = window.dataLayer || [];
dataLayer.push({
event:"addConsent",
consentType:"ads"
});
</script>
<!-- end of Ads-->
<noscript>ePrivacy and GPDR Cookie Consent by Cookie Consent
<!-- End Cookie Consent by https://www.CookieConsent.com -->
Vložím ho do webu přes Tag Manager.
Google Tag Manager
Instalace
Uff, ale jak dostat Tag Manager na web? Huh? Na stránce https://tagmanager.google.com/ si založím nový kontejner pro Web.
Vygeneruje mi to script, který musím vložit do svých stránek. Toto je jediná situace, kdy potřebujeme součinnost kodéra či administrátora webu.
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->
Šupa, máme TagManager.
Integrace Cookie Consentu
Vytvořím nový Tag typu Custom HTML a vložím do něj to, co mi online generátor vytvořil.
Odstranil jsem z něj ale posledních pár řádků, které říkají, co se má stát když nebude zaplý JavaScript, tedy tag noscript. Tag Manager je JavaScriptová technologie, tudíž bez něj se tento příkaz nikdy nevykoná, a proto jej zbytečně nahráváme.
<noscript>ePrivacy and GPDR Cookie Consent by Cookie Consent</noscript>
<!-- End Cookie Consent by https://www.CookieConsent.com -->
Triggerem bude All pages, ale klidně si tam dejte DOM Ready.
Pecka! Máme na webu implementované rozhraní pro Cookie Consent. Myslím, že je čas na další kafe, protože se teprve rozehříváme.
Zlý kompilátor
Zkouším to celé Publikovat a co se nestane, Error!
GTM Linteru (kontrola “pravopisu”) se nelíbí použití nestandardního HTML parametru.
<script type="text/plain" cookie-consent="functionality">
var dataLayer = window.dataLayer || [];
dataLayer.push({
event:"addConsent",
consentType:"personalizace"
});
</script>
Parametr jménem cookie-consent neprojde přes GTM Linter.
Založil jsem na Google Support ticket. Nyní se však budu muset vrátit o krok zpátky a implementovat Cookie Consent natvrdo do stránky. Fungovat to bude tak jako tak, jen jsem doufal, že to všechno dokážu z GTM.
Prostě jej akorát místo do GTM vložím do webu, třeba hned vedle místa kde načítám GTM.
Update ke Google Support
Odpověď z Google Supportu: Přes Custom HTML Template lze vkládat pouze obvyklé HTML atributy a cookie-consent není obvyklý atribut. Obraťte se na svého vývojáře webu.
Komentář
Takže nám prostě nezbývá nic jiného, než k tomu Tag Manager nepoužít. Nutno podotknout, že z hlediska validátoru je to korektní chování, takže tady asi nemá smysl plakat. Ještě napíšu na Cookie Consent, jestli by to nechtěli předělat na data-cookie-consent. To už by bylo validní.
Propojení Cookie Consent s Tag Managerem
Cookie Consent pak takhle krásně komunikuje s dataLayerem.
Vytvoříme si triggery, které budou reagovat na Consenty zaslané na dataLayer.
Variable
K tomu budeme ještě potřebovat Variable, která nám bude číst z dataLayeru typ consentu.
Triggery
Teď postupně tři triggery pro jednotlivé consenty.
Consent – personalization granted
Consent – tracking granted
Consent – ads granted
Asynchronní Trigger Groups
Tak teď máme granulárně triggery pro přidělené consenty. Teď si z nich uděláme asynchronní triggery pro pageviews. Použijeme k tomu Trigger Groups.
Consented Page view Tracking
Consented Page view Personalization
Consented Page view Ads
Přidělení Consentovaných Trigger Groups k Tagům.
A teď si naše Consent Groups přidělíme jako Triggery k našim tagům.
Google Analytics 4 – Tracking Group
Google Optimize – Personalization Group
Google Floodlight – Ads Group
Stažení konfigurace triggerů
Nastavení Custom Triggerů si můžete do svého GTM kontejneru nahrát z připraveného exportního JSON souboru.
Rekapitulace
Takže náš setup se aktuálně skládá z:
Tagů
Triggerů
Variables
Test run
Spouštím stránku, zobrazuje se Cookie Consent Overlay a já klikám na volbu “Upravit mé předvolby”.
Granulární přidělení Consentů
Nastavuji granulárně Consent Groups pro Tracking, Personalizaci, ale ne pro Ads.
DataLayer
Do dataLayer se korektně propíše jen addConsent pro tracking a personalizace.
GTM Debugger
GTM Debugger následně říká, že se spustily Trigger Groups pro Optimize a Google Analytics 4, nikoli však pro Floodlight Promo. Což přesně odpovídá naším Consent Groups.
Floodlight si stěžuje, že nemá consent, což je správně.
Proxy debugger
Ještě kontrola přes Proxy debugger, že se vše posílá tak jak má…
Google Analytics 4 – checked
Optimize – checked
Floodlight – checked
Tak a máme to. Téměř ukázková implementace!
Legal Info Page
Google Analytics
Tak Terms of Conditions, odstavec 7 říká:
Společnosti Google nesmíte předávat žádné informace, které by mohla využít jako údaje umožňující zjištění totožnosti nebo by je za takové mohla považovat. Zároveň nesmíte s takovým jednáním pomáhat žádné třetí straně ani jí je umožnit. Musíte dodržovat příslušné zásady ochrany soukromí i všechny platné zákony, zásady a předpisy, které se vztahují na shromažďování informací od uživatelů. Musíte zveřejnit zásady ochrany soukromí a tyto zásady musí obsahovat upozornění na používání cookies, identifikátorů pro mobilní zařízení (např. inzertní identifikátor Android nebo inzertní identifikátor pro iOS) nebo podobných technologií, které slouží ke shromažďování údajů. Musíte zveřejnit používání služby Google Analytics a to, jak shromažďuje a zpracovává data. Tuto podmínku lze splnit zobrazením nápadného odkazu na stránku „Jak Google používá data, když používáte weby a aplikace našich partnerů“ (na adrese www.google.com/policies/privacy/partners/ nebo na jiné adrese URL, kterou vám může Google čas od času poskytnout). Vynaložíte z komerčního hlediska rozumné úsilí na to, aby uživateli byly poskytnuty jasné a srozumitelné informace a mohl vyjádřit souhlas s ukládáním a používáním souborů cookies a dalších informací na uživatelově zařízení při aktivitách probíhajících v souvislosti se službou Google Analytics a ve chvílích, kdy je poskytování takových informací a získání zmíněného souhlasu požadováno zákonem.
Nesmíte obcházet žádné funkce ochrany soukromí (např. odhlášení), které jsou součástí služby Google Analytics. Budete dodržovat všechny zásady Google Analytics v platném znění („zásady služby Google Analytics“), které naleznete na adrese www.google.com/analytics/policies/ (nebo na jiné adrese URL, kterou může Google poskytnout).
Můžete se podílet na integrované verzi Google Analytics a určitých reklamních službách DoubleClick a Google („reklamní funkce Google Analytics“). Pokud používáte reklamní funkce Google Analytics, musíte dodržovat zásady reklamních funkcí Google Analytics (uvedené na stránce support.google.com/analytics/bin/answer.py?hl=cs&topic=2611283&answer=2700409). Přístup k reklamním službám Google i jejich používání podléhá příslušným podmínkám ujednaným mezi vámi a Googlem, které se na dané služby vztahují.
Pokud používáte hlavní stránku sady služeb Platform, budou se na vaše používání této hlavní stránky vztahovat Dodatečné smluvní podmínky hlavní stránky sady služeb Platform (případně později přejmenované) uvedené na stránce https://support.google.com/marketingplatform/answer/9047313 (nebo na jiné adrese URL, kterou může Google poskytnout) v aktuálně platném znění (the „smluvní podmínky hlavní stránky sady služeb Platform“).
V rámci svého používání služby souhlasíte vy a Google s podmínkami zpracování reklamních údajů Google uvedenými na stránce https://privacy.google.com/businesses/processorterms („podmínky zpracování“). Google nebude podmínky zpracování měnit, vyjma způsobů výslovně povolených v podmínkách zpracování.
Důsledky pro naše Podmínky použití
Takže z toho vyplývá, že ještě musíme upgradovat naše Podmínky použití. Pamatujete ten odkaz v Cookie Consentu, když jste to na začátku nastavovali? Tak teď je ten čas to nastavit.
Final boss – tlačítko pro změnu
#changePreferences
Do Tag Manageru vložím následující kus kódu.
<style>
div#changePreferencesWrapper {
bottom: 20px !important;
background: #eeeeee;
position: fixed;
padding: 5px;
}
div#changePreferencesWrapper button {
color: #111111;
text-decoration: underline;
border: 0;
}
div#changePreferencesWrapper button:hover {
color: #cc0000;
text-decoration: none;
cursor: pointer;
}
</style>
<div id="changePreferencesWrapper">
<button id="changePreferences">Změnit nastavení cookies</button>
</div>Můžu jej vložit do samostatného Custom HTML Tagu, nebo implementovat spolu s Cookie Consentem přímo do webu, jelikož nám stále nejde vkládání přes Tag Manager, tak ať je to pohromadě.
Teď, když na něj kliknu, tak se mi opět zobrazí nabídka změny Consentů.
Master blaster! Je to tam celý!!!
Komplet nastavená analytika podle směrnic. Elegantně přes Consent Groups. Nestojí mě to ani cent. Plně asynchronní díky Trigger Groups. Lepší už to být snad ani nemůže.
Co když mi lidi ty souhlasy opravdu neudělí?
Google Consent Mode
Pojďme udělat dohodu že to teď nebudeme implementovat. Consent Mode má jednu zásadní výhodu. Umí to trackovat Google Analytics aniž byste udělili consent, nepoužívá žádný identifikátor mezi stránkami a navíc umožňuje dopočítat poměrově, kolik lidí vám ten consent nedalo. Je to fakt pěkný. Ale jindy.
2022
Já vím, že až to přijde, až skončí cookies v roce 2022, já jsem silný a že to dám. Mám v zádech Optimics. Nevadí mi že mrzne, tady je vřelá a hřejivá nálada. My vám ty Privacy Sandboxy přivezeme!
Cookie consent bereme v Optimics vážně a vy byste měli taky.
Pomůžeme vám s analýzou vaší stávající situace kolem cookies, vývojem vlastního řešení, případně upravením existujícího a implementací do vašeho webu či tag manageru.
Také vám poradíme s UX; jak má lišta ideálně vypadat, aby ji uživatelé akceptovali a vy jste tak neztratili důležitá data.
