Ako vám Google Tag Manager pomôže s GDPR?

Od zajtra vstúpi do platnosti nová podoba zákona o ochrane osobných údajov, nazývaná inak aj GDPR. Na základe tohto nariadenia je potrebné vykonať viacero zmien na webových stránkach. Dôležitou zmenou je nastavenie, aby sa meracie kódy (tagy), ktoré zbierajú údaje o cookies súboroch za účelom personalizácie reklám v prehliadačoch užívateľov, spúšťali až po vykonaní súhlasu užívateľa na webovej stránke.

Na jednoduché spravovanie meracích kódov odporúčam využívať nástroj s názvom Google Tag Manager (GTM). O tomto bezplatnom a efektívnom nástroji som písal už viacero článkov. Ak ešte len začínate s týmto nástrojom, odporúčam si tieto články najprv prečítať: Úvod do Google Tag Manager-u, Úvod do Google Tag Manager-u II

Aby ste mohli kontrolovať, ktoré meracie kódy (tagy) sa zobrazia až po aktívnom súhlase užívateľa, tak sme pre vás pripravili export Google Tag Manager-u, ktorý môžete veľmi rýchlo a jednoducho importovať. Poďme si zhrnúť, čo by mal tento export obsahovať a ako si ho upraviť tak, aby aj na vašej webovej stránke fungovalo všetko, ako má.

Export obsahuje:

Značky (tags)

cHTML - Zapísanie cookie. Tento tag vytvára súbor cookie v prehliadači užívateľa. Cookies, ktoré sú tu nastavené sa vymazávajú po uplynutí 30 dní. Časovú platnosť súboru si môžete jednoducho upraviť v značke a nastaviť dlhšie obdobie. Nastavíme to tak, keď zmeníme údaj s dobou expirácie v sekundách, ktorá sa nachádza vo 4 riadku. Vďaka cookies sa po opätovnom vrátení užívateľa na stránku môžu spúšťať meracie kódy (tags) automaticky, ku ktorým už užívateľ dal súhlas pri predchádzajúcej návšteve.
cHTML - Popup. Tu sa nachádza príklad, ako môže vyzerať pop-up okno s oznámením a vyžiadaním súhlasu so spracovaním osobných údajov pri prehliadaní. Tento tag môžete odstrániť, ak už máte hlásenie na webe implementované. V tagu je možné vykonať viaceré zmeny, ktoré si prejdeme nižšie.
AW remarketing - Príklad. Tu môžeme nájsť príklad tagu, ktorý sa bude spúšťať iba užívateľom, ktorí dali súhlas.

Spúšťače (triggers)

Click – Cookie – Accept. Tento spúšťač je nastavený na odkliknutie súhlasu v popup okne. Ak využívate iné oznámenie, tak je potrebné tento spúšťač zmeniť. Presné nastavenie sa môže vždy líšiť v závislosti od typu stránky
DOM – With cookie. Spúšťa značky (tagy) v prípade, ak užívateľ na webovej stránke vyslovil svoj súhlas so spracovaním údajov a má zapísaný súbor cookie.

Premenné (variable)

Cookie. Identifikuje, či bol alebo nebol udelený súhlas so spracovaním osobných údajov a následne uložený súbor cookie v prehliadači užívateľa.

Import Exportu do GTM

Importovanie Exportu spravíme tak, že v službe GTM vyberieme v hornej záložke admin, Import Kontajneru a nahráme tam stiahnutý export. Export si stiahneme TU. Odporúčam tento export pripojiť ku GTMku a nie prepísať, aby sme neprišli o všetky značky, ktoré už máme nastavené.

Google Tag Manager – záložka Admin na import exportovaného kontajnera

Google Tag Manager – administrácia kontajnera s položkou Import Container

Google Tag Manager – import kontajnera so súborom exportu, výberom workspace a možnosťou Merge

Úprava a nastavenie ďalších značiek

Po importovaní nastavení je potrebné upraviť vzhľad popup okna. Môžeme si vygenerovať vlastný popup, keď rozklikneme tlačidlo nižiše, kde si môžme navoliť farby, text a stránku, na ktorej máme pravidlá o osobných údajoch. Je dôležité ponechať v texte link tagy (<a> </a>).

Vygenerujte si vlastný cookie notice

Vyplňte texty, vyberte farby a nižšie sa vám priebežne skladá hotový kód. Skopírujte ho a vložte do svojej stránky.

Text lišty

Tlačidlo Súhlasím Tlačidlo Nesúhlasím

Pozadie lišty Tlačidlo Súhlasím Text Odkazy

Náhľad

HTML

<style>
    .invelity-cookie-notice {
        position: fixed;
        left: 20px;
        bottom: 20px;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 350px;
        padding: 20px;
        background-color: #f4f9fa;
        color: #717982;
        box-shadow: 0 5px 18px 0 rgba(26, 23, 24, .07);
        font-family: sans-serif;
        text-align: center;
    }

    .invelity-cookie-notice p {
        margin: 0 0 10px;
    }

    .invelity-cookie-notice a {
        color: #000000;
        text-decoration: underline;
    }

    .invelity-cookie-notice .actions {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
    }

    .invelity-cookie-notice button {
        font: inherit;
        cursor: pointer;
    }

    .invelity-cookie-notice .accept {
        padding: 7px 17px;
        border: 0;
        border-radius: 500px;
        background: #e23b73;
        color: #fff;
    }

    .invelity-cookie-notice .decline {
        padding: 7px;
        border: 0;
        background: none;
        color: inherit;
        font-size: 14px;
        text-decoration: underline;
    }
</style>

<div class="invelity-cookie-notice" id="cookie-notice" hidden>
    <p>Na zlepšenie našich služieb používame cookies. O ich používaní a možnostiach nastavenia sa dozviete viac v <a href="/zasady-ochrany-osobnych-udajov">Zásadách ochrany osobných údajov</a>.</p>
    <div class="actions">
        <button type="button" class="accept" data-cookie="accepted">Súhlasím</button>
        <button type="button" class="decline" data-cookie="declined">Nesúhlasím</button>
    </div>
</div>

<script>
    (function () {
        var notice = document.getElementById('cookie-notice');
        var KEY = 'cookie-consent';

        // Already answered — leave the visitor alone.
        if (localStorage.getItem(KEY)) {
            return;
        }

        notice.hidden = false;

        notice.addEventListener('click', function (event) {
            var choice = event.target.dataset.cookie;

            if (!choice) {
                return;
            }

            localStorage.setItem(KEY, choice);
            notice.hidden = true;

            // Load your analytics here when choice === 'accepted'.
        });
    })();
</script>

Vložte tento kód do svojej stránky tesne pred koniec značky </body>.

Ak už využívate iné riešenie, tento tag môžete odstrániť, no je potrebné upraviť spúšťač (trigger) s názvom “Click – Cookie – Accept“, tak aby bol nastavený na odkliknutie súhlasu s vašim aktuálnym hlásením.

AW remarketing – Príklad

Táto značka (tag) slúži iba pre ilustráciu, ak chcete aby fungovala, tak ako má, je potrebné upraviť premenné v rámci nastavenia značky. Je napojená na spúšťač, ktorý bude spúšťať značku iba po zadaní súhlasu a po dobu platnosti cookie súboru. Ak máte vo vašom GTM už takýto kód nastavený, odporúčam ho odstrániť a pôvodnému kódu len upraviť špúšťač.

Iné značky

Všetky ostatné značky (tagy) a meracie kódy, vyžadujúce si aktívny súhlas je potrebné napojiť na spúšťač (trigger) “DOM – With cookie“, ktorý tieto značky zapne jedine v prípade návštevníka, ktorý súhlas dal. Je to v podstate to isté, ako značka „AW remarketing – Príklad”, ktorá slúži ako príklad.

Takto môžeme nastaviť, napr. retargetingové značky, prípadne Google Analytics property so zapnutým nastavením remarketingu. Viac o tomto nastavení a ako si ho skontrolovať si môžete prečítať na stránkach podpory Google. Odporúčame pri aktuálne využívanom property toto nastavenie vypnúť. V prípade, že o tieto možnosti nechcete prísť, tak vytvorte nové Google Analytics vlastníctvo (property), kde toto nastavenie budete mať povolené, no značku (tag) daného vlastníctva budete spúštať iba užívateľom so súhlasom.

Tak tu to máme. Ukázali sme si všetko, čo potrebujeme na to, aby sme pomocou nástroja Google Tag Manager mohli vytvárať a čítať cookies, a tiež ako na základe nich spúšťať značky.

Na záver by som sa chcel poďakovať Juliusovi Fedovi za blog, z ktorého som použil časť HTML kódu. Tiež moje poďakovanie patrí programátorom, ktorí mi pomohli pri úprave scriptov a pri vytvorení custom HTML pre popup a Jakubovi Gombárovi, ktorý celé toto riešenie navrhol.

Autor

Jakub Gombár

Co-Founder

K online marketingu som sa dostal vďaka vlastnému internetovému projektu v roku 2011. V poslednej dobe sa špecializujem hlavne na výkonnostný online marketing - teda platenú reklamu vo vyhľadávaní na sociálnych sieťach a propagáciu prostredníctvom bannerov na rôznych webových stránkach. Veľmi rád sa venujem vzdelávaniu nových zamestnancov resp. stážistov, pričom svoje skúsenosti pravidelne prezentujem aj na odborných školeniach a worskhopoch.