Dokumentácia / Inštalácia skriptu

Inštalácia skriptu Cookienovo

Technické informácie o banneri Cookienovo pre vývojárov: ako vložiť skript, konfigurovať značky, blokovať skripty podľa kategórie a napojiť Google Consent Mode v2.

Vloženie skriptu

Aby vaša webová stránka zobrazovala banner Cookienovo a zbierala súhlasy so súbormi cookie, vložte do zdrojového kódu stránky náš skript. Nájdete ho vo svojom účte Cookienovo (dostali ste ho aj e-mailom pri registrácii). Skript vložte do sekcie <head>, čo najvyššie — pred Google Tag Manager a ostatné meracie skripty.

Inštalácia má dve časti: (1) inline skript, ktorý synchrónne nastaví predvolené súhlasy Google Consent Mode v2 pred spustením akýchkoľvek Google tagov, a (2) samotný skript banneru:

<!-- Krok 1: predvolené súhlasy PRED akýmikoľvek Google tagmi -->
<script>
window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}
gtag('consent','default',{'ad_storage':'denied','ad_personalization':'denied','ad_user_data':'denied','analytics_storage':'denied','functionality_storage':'denied','personalization_storage':'denied','security_storage':'granted','wait_for_update':500});
gtag('set','ads_data_redaction',true);
</script>
<!-- Krok 2: banner Cookienovo (možno použiť defer) -->
<script site-token="<site-token>" type="text/javascript" src="https://cookienovo.com/assets/client.js" defer></script>

Používate optimalizačný alebo cache plugin (WP Rocket, LiteSpeed Cache, Autoptimize, SG Optimizer, W3 Total Cache…)? Vylúčte skript Cookienovo z jeho úprav — najmä z minifikácie/kombinovania JavaScriptu a z odloženého spustenia (Delay JavaScript). Do zoznamov výnimiek pridajte cookienovo a po zmene vyčistite cache pluginu. Inak sa cookie lišta nemusí zobraziť.

Značky skriptu

Skript banneru Cookienovo podporuje tieto atribúty:

site-token — povinné. UUID vašej stránky z účtu Cookienovo (dostali ste ho aj e-mailom). Bez správneho tokenu sa banner nezobrazí. Token je nezávislý od URL a schémy webu — pri prechode z http:// na https:// (alebo inej zmene URL webu v účte) ostáva rovnaký, takže netreba re-inštaláciu ani výmenu snippetu.
theme — voliteľné. Vynúti motív banneru: "light" alebo "dark".
consent-mode — voliteľné. Prepíše režim súhlasu banneru. Predvolene "true"; nastavte "false", ak nechcete odosielať súhlasy.

Blokovanie skriptov podľa kategórie

Aby sa meracie a marketingové skripty spustili až po súhlase, priraďte im kategóriu cez atribút cn-category. Banner Cookienovo ich potom spustí len vtedy, keď návštevník danú kategóriu povolí:

<script type="text/javascript" cn-category="analytics">
  // analytický skript
</script>

Možné hodnoty atribútu cn-category: necessary (nevyhnutné), functional (funkčné), analytics (analytika), marketing.

Spracovanie udalostí

Ak chcete stav súhlasu spracovať vo vlastných skriptoch, počúvajte udalosť CookienovoUserConsentChanged:

<script type="text/javascript">
  document.addEventListener("CookienovoUserConsentChanged", (e) => {
    console.log("súhlas zmenený", e.detail);
  });
</script>

V objekte detail nájdete stav súhlasu pre každú kategóriu (kategória + boolovská hodnota, či ju používateľ povolil):

{
  "detail": [
    { "category": "necessary",  "allowed": true  },
    { "category": "analytics",  "allowed": false },
    { "category": "functional", "allowed": true  },
    { "category": "marketing",  "allowed": true  }
  ]
}

Google Consent Mode v2

Cookienovo plne vyhovuje Google Consent Mode v2 a nastavuje ho automaticky — bez zásahu používateľa či administrátora. Predvolené súhlasy sa nastavia hneď pri načítaní stránky a po voľbe návštevníka sa aktualizujú.

Vďaka dvojdielnej inštalácii (inline predvolené súhlasy + skript banneru) sú signály ad_storage, analytics_storage, ad_user_data a ad_personalization predvolene nastavené na 'denied' ešte pred spustením Google tagov. Prístup sleduje priemyselné štandardy a funguje aj s asynchrónne načítanými Google tagmi. Predvolené nastavenia zahŕňajú wait_for_update:500 a ads_data_redaction:true pre maximálnu ochranu súkromia.

Viac v dokumentácii Google.

Debug funkcie

Na overenie implementácie Consent Mode v2 poskytuje Cookienovo debug funkcie, ktoré spustíte v konzole prehliadača. Otvorte konzolu (F12) na ľubovoľnej stránke s nainštalovaným Cookienovo a spustite:

// zapni debug režim a spusti plnú validáciu
window.cookienovoDebug.enableDebugMode()

// len validačné kontroly
window.cookienovoDebug.runFullValidation()

// report súladu
window.cookienovoDebug.generateComplianceReport()

// stav Consent Mode
window.cookienovoDebug.checkConsentMode()

// test implementácie
window.cookienovoDebug.testConsentModeImplementation()

// kontrola Shopify integrácie
window.cookienovoDebug.checkShopifyIntegration()

Funkcie vypíšu detailné informácie o vašej implementácii: skóre súladu, zistené Google tagy, problémy a konkrétne odporúčania. Diagnostiku viete spustiť aj z dashboardu bez otvárania konzoly.

Automatické blokovanie trackerov

Cookienovo dokáže automaticky neutralizovať trackery tretích strán mimo Googlu (napríklad Facebook Pixel, Hotjar či Microsoft Clarity) pred udelením súhlasu a znovu ich aktivovať v okamihu, keď návštevník povolí príslušnú kategóriu. Google tagy sa riešia samostatne cez Consent Mode v2, takže ich netreba blokovať ručne.

Pri podporovaných trackeroch nie sú potrebné žiadne zmeny v kóde. Blokovanie je best-effort: pokrýva zoznam známych trackerov a skripty vložené priamo v <head> môžu raz vystreliť skôr, než sa blokovač spustí. Pre isté blokovanie akéhokoľvek skriptu ho označte ručne podľa návodu vyššie. Automatické blokovanie si zapnete alebo vypnete sami v nastaveniach lišty svojho webu — prepínač „Automatické blokovanie sledovačov". Pri nových weboch je predvolene zapnuté.

Content Security Policy (CSP)

Ak na svojom webe používate Content Security Policy, banner Cookienovo funguje bez toho, aby ste museli povoliť externé zdroje. Lišta neťahá žiadny externý stylesheet ani webfont — CSS vkladá inline priamo na stránku a používa systémové písmo (system-ui). Direktívy font-src ani externý style-host preto netreba. Stačí povoliť tieto direktívy:

script-src — host, ktorý servíruje client.js (napríklad cookienovo.com).
connect-src — API origin, kam banner posiela požiadavky (cookienovo.com): konfigurácia /api/config a consent endpointy (/consents, /consents/event).
img-src 'self' data: <logo-host> — data: pre vstavanú ikonu a maskota (vložené priamo v skripte ako data: URI) a host externej URL, ak používate vlastné logo z inej domény.
style-src 'unsafe-inline' — lišta injektuje na stránku vlastný blok <style> a používa inline atribúty style.

Prečo tie dve uvoľnenia: ikony a maskot sú v skripte zapečené ako data: URI (žiadny externý obrázok), preto v img-src stačí pridať data:. Štýly banneru sa vkladajú cez injektovaný <style> blok a inline style atribúty, čo vyžaduje 'unsafe-inline' v style-src.

Odkaz v pätičke: znovuotvorenie nastavení cookies

Predvolene malé plávajúce tlačidlo „Cookies" umožňuje návštevníkom znovu otvoriť ich preferencie. Ak ho chcete skryť (nastavte ikonu na Skryté v nastaveniach banneru) a otvárať preference center z vlastného odkazu — napríklad „Nastavenia cookies" v pätičke — pridajte na ľubovoľný prvok atribút data-cookienovo-settings:

<a href="#" data-cookienovo-settings>Nastavenia cookies</a>

Alebo ho otvorte programovo z vlastného JavaScriptu:

window.cookienovo.showConsentSettings()