Cookie consent lišta pre lemaxsk.eu

Jeden JS súbor, ktorý sa do webu vloží jedným <script> tagom. Nič sa neinštaluje ani nekompiluje a v behu nesťahuje žiadny ďalší súbor — knižnica, štýly aj texty sú zabalené vnútri (~68 kB).

Postavené na vanilla-cookieconsent v3 a vystavuje rozhranie kompatibilné s Cookiebotom, takže sa dá nasadiť ako jeho náhrada bez prepisovania kódu webu.

Vloženie do webu

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lemax-cookie-consent.js"></script>

Patrí do <head>, pred meracie skripty — pri načítaní nastaví Google Consent Mode v2 na denied, takže musí bežať skôr než ony.

Verzia je pripnutá na konkrétne číslo. Obsah súboru sa tak nikdy sám nezmení; nová verzia vyjde pod novým číslom a nasadí sa prepísaním čísla v src. Bez čísla verzie by CDN servírovalo vždy poslednú, čo pre produkciu nechceme.

Konfigurácia

Predvolené odkazy vedú na stránky webu a bežne ich netreba nastavovať. Ak sa niektorý zmení, prepíše sa pred načítaním skriptu:

<script>
  window.LEMAX_COOKIE_CONSENT = {
    privacyUrl:     '/ochrana-osobnych-udajov/',
    cookiesInfoUrl: '/cesta/k/informaciam-o-cookies.pdf',
    contactUrl:     '/kontakt/',
    autoShow:       true
  };
</script>

| Voľba | Kde sa prejaví | |---|---| | privacyUrl | pätička lišty, sekcia „Viac informácií“ | | cookiesInfoUrl | sekcia „Viac informácií“ | | contactUrl | pätička lišty, sekcia „Viac informácií“ | | autoShow | false = lišta sa neotvorí sama |

Cez npm

npm i lemax-cookie-consent

Balík obsahuje ten istý jeden súbor. Je to skript pre prehliadač, nie Node modul — require() v Node spadne na chýbajúcom window. V bundleri stačí import 'lemax-cookie-consent', skript sa spustí sám. Pre bežný web je jednoduchší script tag vyššie.

Kategórie

Názvy sú zhodné s Cookiebotom, takže sa nikde neprekladajú.

| Kategória | Toggle | Popis | |---|---|---| | necessary | vždy zapnuté | košík, prihlásenie, priebeh objednávky, bezpečnosť | | preferences | voliteľné | naposledy prezerané produkty, wishlist, zobrazenie katalógu | | statistics | voliteľné | Google Analytics (_ga, _gid, _gat) | | marketing | voliteľné | Facebook Pixel (_fbp, _fbc), remarketing |

Pri odvolaní súhlasu sa cookies príslušnej kategórie automaticky vymažú.

Rozhranie pre kód webu

Lišta vystavuje window.Cookiebot s rovnakým tvarom, aký používa Cookiebot, takže kód postavený na ňom funguje bez zásahu:

["CookiebotOnAccept"].forEach(function (evt) {
  window.addEventListener(evt, function () {
    if (Cookiebot.consent.marketing || Cookiebot.consent.statistics) {
      /* meracie skripty */
    }
  });
});

| Volanie | Význam | |---|---| | Cookiebot.consent | { necessary, preferences, statistics, marketing, method } | | Cookiebot.consented | true, ak je povolená aspoň jedna voliteľná kategória | | Cookiebot.declined | true, ak používateľ rozhodol a všetko odmietol | | Cookiebot.hasResponse | true, ak rozhodnutie už existuje | | Cookiebot.renew() | otvorí okno s nastaveniami | | Cookiebot.show() / hide() | zobrazí / skryje lištu | | Cookiebot.withdraw() | odvolá súhlas | | Cookiebot.submitCustomConsent(p, s, m) | nastaví súhlas programovo |

Udalosti na window: CookiebotOnLoad, CookiebotOnDialogInit, CookiebotOnDialogDisplay, CookiebotOnAccept, CookiebotOnDecline.

window.Cookiebot sa nastaví len vtedy, ak ešte neexistuje — počas prechodu tak môžu obe riešenia koexistovať bez toho, aby si prepisovali rozhranie.

Blokovanie skriptov do udelenia súhlasu

<script type="text/plain" data-cookieconsent="statistics">
  /* spustí sa až po súhlase so štatistikami */
</script>

Funguje aj natívny zápis knižnice data-category="statistics".

Odkaz „Nastavenia cookies“

<a href="#cookie-nastavenia">Nastavenia cookies</a>
<button type="button" data-cc="show-preferences">Nastavenia cookies</button>
<button type="button" onclick="Cookiebot.renew();return false;">Nastavenia cookies</button>

Google Consent Mode a dataLayer

Pri načítaní odíde gtag('consent', 'default', …) so všetkým denied, po rozhodnutí používateľa gtag('consent', 'update', …). Do dataLayer sa pri každej zmene pošle udalosť, na ktorú sa dá v GTM naviazať trigger:

{ event: 'lemax_consent_update',
  lemax_consent: { necessary: true, preferences: false, statistics: true, marketing: false } }

Doplnkové API

window.cookieConsent.acceptedCategory('statistics');
window.cookieConsent.showPreferences();
window.cookieConsent.getUserPreferences();

window.cookieConsent.whenAccepted('marketing', function () {
  // zavolá sa hneď, ak súhlas už je, inak až keď ho používateľ udelí
});

window.lemaxConsent je alias na to isté. Staršie názvy kategórií sú akceptované ako aliasy: analytics a performance → statistics, advertisement → marketing, functional a personalization → preferences.

Grafický štýl

| | | |---|---| | primárna | #d74b28, hover #b84123 | | text | #282216, tlmený #696b78 | | svetlé plochy | #f8f8f8, hover #f0f0f0, orámovanie #dfdfdf | | toggle zapnutý | #45985b | | rádius | 2px | | font | 'Open Sans', arial, sans-serif | | výška tlačidiel | 42px, font-weight: 700 |

Licencia

Kód v src/ — MIT. Zabalená knižnica vanilla-cookieconsent — MIT, © Orest Bida.