Dokumentace

Vložení na web

Z generátoru máte vytvořenou vlastní adresu pro přístup k skriptům. To je z toho důvodu, abychom při aktualizacích negativně neovlivnili váš web, pokud by došlo k nějaké změně, která není zpětně kompatibilní, nebo abychom mohli vyhovět nějakým individuálním požadavkům. Kód vypadá nějak takto:

<script src="https://cmpts.proweb.cz/cookie-consent/v1/cookie-consent.js"></script>

a je potřeba ho vložit do HTML vaší stránky.

Zpracování souhlasu vašimi skripty

document.addEventListener('cookie-consent', function (event) {
    /**
     * Pokud uzivatel prichazi bez ulozeneho souhlasu, je udalost nejdrive vyvolana s vychozim nastavenim (pouze nezbytne).
     * 
     * Nasledne, jakmile ulozi svoji volbu, je udalost vyvolana podruhe a zde bude false.
     */
    const isDefault = event.detail.isDefault;
    
    /**
     * Obsahuje pole ID kategorii, s jejichz ulozenim uzivatel souhlasil.
     */
    const consents = event.detail.consents;
    
    // ... Zde bude nasledovat vase zpracovani (ne)souhlasu. ...
});

Ukázka na konkrétním příkladu nastavení souhlasu v Google Tag Manageru:

document.addEventListener('cookie-consent', function (event) {
    const isDefault = event.detail.isDefault;
    const consents = event.detail.consents;
    
    gtag('consent', isDefault ? 'default' : 'update', {
        'ad_user_data':       consents.includes('advertising') ? 'granted' : 'denied',
        'ad_personalization': consents.includes('advertising') ? 'granted' : 'denied',
        'ad_storage':         consents.includes('advertising') ? 'granted' : 'denied',
        'analytics_storage':  consents.includes('analytical') ? 'granted' : 'denied',
    });
});

V příkladu jsou použity kategorie souhlasu viz Režimy souhlasu na Google.

Při načtení stránky se vyvolá událost cookie-consent s isDefault=true. Pokud uživatel dříve již uložil souhlas, tyto uložené hodnoty se načtou do proměnné consents. V opačném případě bude v poli consents výchozí nastavení (tj. pouze functional cookies).

Jakmile uživatel uloží svoji volbu, vyvolá se událost cookie-consent znovu, tentokrát s isDefault=false.

Odkazy na příklady implementace

V následujícím seznamu je několik příkladů implementace souhlasů. Máme v plánu průběžně přidávat další, pokud si přejete něco konkrétního, můžete nám o to napsat na mail podpora@proweb.cz.

Volitelné inicializační atributy

Preferovaný způsob, jak nastavit lištu, je pomocí našeho generátoru. Ten můžete využít, i když už máte lištu na webu, budete k tomu potřebovat přístupové údaje zaslané v mailu po zaplacení. Pokud si přejete, lze skripty konfigurovat i explicitně nastavenými atributy v kódu. Viz následující přehled.

data-banner-heading

Hlavní nadpis lišty.

<script ... data-banner-heading="Souhlas s uložením cookies" ... src=".../cookie-consent.js"></script>

data-banner-text

Text na liště pod nadpisem. Lze používat HTML.

<script ... data-banner-text="Prosíme o umožnění uložení cookies.<br>Udělá nám to radost." ... src=".../cookie-consent.js"></script>

data-banner-open-settings-button-label

Popisek tlačítka, které otevírá dialogové okno pro výběr kategorií cookies, které uživatel umožní uložit.

<script ... data-banner-open-settings-button-label="Nastavení" ... src=".../cookie-consent.js"></script>

data-banner-only-necessary-button-label

Popisek tlačítka, které uloží nastavení souhlasu na nutné minimum a skryje panel.

<script ... data-banner-only-necessary-button-label="Jen nezbytné" ... src=".../cookie-consent.js"></script>

data-banner-enable-all-button-label

Popisek tlačítka, které uloží nastavení souhlasu s uložením všech cookies a skryje panel.

<script ... data-banner-enable-all-button-label="Povolit vše" ... src=".../cookie-consent.js"></script>

data-settings-heading

Nadpis okna s nastavením.

<script ... data-settings-heading="Podrobné nastavení cookies" ... src=".../cookie-consent.js"></script>

data-settings-text

Text okna s nastavením pod nadpisem. Lze používat HTML.

<script ... data-settings-text="Prosim, odklepnete nam to." ... src=".../cookie-consent.js"></script>

data-settings-only-necessary-button-label

Popisek tlačítka v okně s nastavením, které uloží nastavení souhlasu na nutné minimum a zavře okno.

<script ... data-settings-only-necessary-button-label="Jen nezbytné" ... src=".../cookie-consent.js"></script>

data-settings-enable-all-button-label

Popisek tlačítka v okně s nastavením, které uloží nastavení souhlasu s uložením všech cookies a zavře okno.

<script ... data-settings-enable-all-button-label="Povolit vše" ... src=".../cookie-consent.js"></script>

data-settings-enable-selected-button-label

Popisek tlačítka v okně s nastavením, které uloží nastavení souhlasu s vybranými kategoriemi a zavře okno.

<script ... data-settings-enable-selected-button-label="Potvrdit výběr" ... src=".../cookie-consent.js"></script>

data-background-color

Barva pozadí lišty, okna s nastavením a výchozího tlačítka pro změnu nastavení.

<script ... data-background-color="#ff0000" ... src=".../cookie-consent.js"></script>

data-font-color

Barva písma lišty, okna s nastavením a výchozího tlačítka pro změnu nastavení.

<script ... data-font-color="#ffffff" ... src=".../cookie-consent.js"></script>

data-button-background-color

Barva pozadí sekundárních tlačítek.

<script ... data-button-background-color="#000000" ... src=".../cookie-consent.js"></script>

data-button-font-color

Barva písma sekundárních tlačítek.

<script ... data-button-font-color="#ffffff" ... src=".../cookie-consent.js"></script>

data-primary-button-background-color

Barva pozadí primárních tlačítek.

<script ... data-primary-button-background-color="#ffffff" ... src=".../cookie-consent.js"></script>

data-primary-button-font-color

Barva písma primárních tlačítek.

<script ... data-primary-button-font-color="#000000" ... src=".../cookie-consent.js"></script>

data-hide-after

Nastavení prodlevy, po kolika sekundách se má lišta automaticky skrýt.

<script ... data-hide-after="60" ... src=".../cookie-consent.js"></script>

data-cookie-category-<ID kategorie>-heading

Nastavení nadpisu kategorie.

<script ... data-cookie-category-functional-heading="Funkční" ... src=".../cookie-consent.js"></script>

data-cookie-category-<ID kategorie>-text

Nastavení nadpisu kategorie.

<script ... data-cookie-category-functional-text="Tyto soubory cookie jsou povinné a umožňují základní funkce webu. Bez nich by web nemohl fungovat." ... src=".../cookie-consent.js"></script>

data-hide-after

Doba v sekundách, po které se lišta automaticky skryje, když uživatel nereaguje.

<script ... data-hide-after="30" ... src=".../cookie-consent.js"></script>

data-emit-default-on

Události, při kterých se při načtení stránky vyvolá událost s výchozími hodnotami. Lze zadat hodnoty oddělené čárkami, pak se výchozí hodnota oznámí vícekrát.

Podporované hodnoty:

  • DOMContentLoaded - Výchozí hodnoty se oznámí během události document: DOMContentLoaded.
  • immediately - Výchozí hodnoty se oznámí ihned, jak je javascript načtený.
  • prázdný řetězec - Výchozí hodnoty se neoznamují.
  • nenastaveno - Stejné jako nastavení DOMContentLoaded.

<script ... data-emit-default-on="DOMContentLoaded" ... src=".../cookie-consent.js"></script>

Webové stránky zdarma