Vlastní web
Pokročilá implementace Consentio pro vývojáře
Základní implementace
Pro základní implementaci stačí vložit jeden řádek kódu:
<script src="https://consentio.cz/widget/YOUR_SCRIPT_KEY/consentio.min.js" async></script>
Widget se automaticky inicializuje a zobrazí cookie lištu při prvním načtení stránky.
Váš unikátní SCRIPT_KEY najdete v dashboardu v sekci Nastavení → Instalace.
lang na elementu <html>
nebo z hlavičky Accept-Language prohlížeče.
JavaScript API
Po načtení widgetu je dostupný globální objekt window.Consentio pro programatické ovládání.
Dostupné metody
| Metoda | Popis |
|---|---|
show() |
Zobrazí cookie banner |
hide() |
Skryje cookie banner |
showPreferences() |
Zobrazí nastavení preferencí |
getConsent() |
Vrátí aktuální stav souhlasů |
updateConsent(updates) |
Aktualizuje stav souhlasů |
onConsentChange(callback) |
Registruje listener na změny souhlasů |
getBlockedScripts() |
Vrátí počet blokovaných skriptů |
getBlockedIframes() |
Vrátí počet blokovaných iframe |
Zobrazení lišty
// Zobrazit cookie lištu
Consentio.show()
// Skrýt cookie lištu
Consentio.hide()
// Zobrazit nastavení preferencí
Consentio.showPreferences()
Získání stavu souhlasů
// Získat aktuální stav souhlasů
const consent = Consentio.getConsent()
// { necessary: true, analytics: false, marketing: false, functionality: false }
// Zkontrolovat konkrétní kategorii
if (consent.analytics) {
// Spustit analytické skripty
loadGoogleAnalytics()
}
if (consent.marketing) {
// Spustit marketingové skripty
loadFacebookPixel()
}
Aktualizace souhlasů
// Aktualizovat konkrétní kategorie
Consentio.updateConsent({
analytics: true,
marketing: false
})
Event listenery
Reagujte na změny souhlasů pomocí event listenerů:
// Možnost 1: Použití onConsentChange
Consentio.onConsentChange((consent) => {
console.log('Souhlas změněn:', consent)
if (consent.analytics) {
loadGoogleAnalytics()
}
if (consent.marketing) {
loadFacebookPixel()
}
})
// Možnost 2: Použití window event listeneru
window.addEventListener('consentio:consent', (event) => {
const consent = event.detail
console.log('Souhlas změněn:', consent)
})
Google Consent Mode v2
Consentio automaticky podporuje Google Consent Mode v2. Pro správnou funkci se ujistěte, že widget je načten před Google Analytics a dalšími Google skripty.
<!-- 1. Nejprve Consentio -->
<script src="https://consentio.cz/widget/YOUR_SCRIPT_KEY/consentio.min.js" async></script>
<!-- 2. Pak Google tag -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXX');
</script>
Mapování kategorií na Consent Mode
| Consentio kategorie | Google Consent Mode |
|---|---|
| necessary | functionality_storage, security_storage |
| analytics | analytics_storage |
| marketing | ad_storage, ad_user_data, ad_personalization |
| functionality | personalization_storage |
Blokování skriptů
Pro blokování skriptů před udělením souhlasu použijte atribut type="text/plain"
s datovým atributem data-category:
<!-- Skript se spustí až po udělení souhlasu s analytics -->
<script type="text/plain" data-category="analytics">
// Google Analytics kód
gtag('config', 'G-XXXXXXX');
</script>
<!-- Skript se spustí až po udělení souhlasu s marketing -->
<script type="text/plain" data-category="marketing">
// Facebook Pixel kód
fbq('init', 'XXXXXXX');
</script>
<!-- Skript se spustí až po udělení souhlasu s functionality -->
<script type="text/plain" data-category="functionality">
// Personalizační kód
initPersonalization();
</script>
Dostupné kategorie
| Kategorie | Popis |
|---|---|
necessary |
Nezbytné cookies (vždy povoleny) |
analytics |
Analytické cookies |
marketing |
Marketingové cookies |
functionality |
Funkční cookies pro personalizaci |
Tlačítko pro otevření preferencí
Umístěte na web tlačítko pro opětovné otevření cookie preferencí (vyžadováno GDPR):
<!-- V patičce webu -->
<a href="#" onclick="Consentio.showPreferences(); return false;">
Nastavení cookies
</a>
<!-- Nebo jako button -->
<button onclick="Consentio.showPreferences()">
Upravit preference cookies
</button>
Single Page Applications (SPA)
Pro React, Vue, Angular a další SPA frameworky widget funguje automaticky. Widget detekuje změny URL a aktualizuje se podle potřeby.
// Příklad: Kontrola stavu souhlasů při změně route (Vue Router)
router.afterEach(() => {
if (window.Consentio) {
const consent = Consentio.getConsent()
if (consent.analytics) {
// Analytické skripty jsou povoleny
}
}
})