Interaktivní správa, kódy a instrukce pro integraci na další weby
Upravte barvy tak, aby odpovídaly barevnému schématu cílového webu. Kódy se automaticky přepíší.
Zkopírujte kód z záložky 1. Head Script a vložte jej do šablony webu do sekce <head> co nejvýše (nad GTM).
Vložte HTML kód z záložky 2. HTML Banner na konec šablony před tag </body>. Dále přidejte odkaz pro správu do patičky (ID: openCookieSettingsLink) a na GDPR stránku (ID: gdprCookieSettingsLink).
Připojte CSS a JavaScript. U CSS můžete nastavit vlastní proměnné v postranním panelu. V JS upravte seznam aktivních služeb a cookies (proměnná window.cookieConsentServices).
Tento prompt můžete kompletně zkopírovat a předložit jakémukoliv AI kódovacímu asistentovi (ChatGPT, Claude, atd.) při implementaci na dalším webu.
<!-- Google Consent Mode v2 - Výchozí blokování cookies před souhlasem -->
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
// Pokus o načtení dříve uděleného souhlasu z prohlížeče (LocalStorage)
var savedConsent = null;
try {
savedConsent = JSON.parse(localStorage.getItem('cookie_consent'));
} catch(e) {}
// Nastavení výchozího stavu souhlasů: pokud neexistuje uložená volba, vše se zablokuje
gtag('consent', 'default', {
'ad_storage': (savedConsent && savedConsent.marketing) ? 'granted' : 'denied',
'ad_user_data': (savedConsent && savedConsent.marketing) ? 'granted' : 'denied',
'ad_personalization': (savedConsent && savedConsent.marketing) ? 'granted' : 'denied',
'analytics_storage': (savedConsent && savedConsent.analytics) ? 'granted' : 'denied',
'personalization_storage': 'granted', // technické / nezbytné cookies
'functionality_storage': 'granted',
'wait_for_update': 500
});
// Anonymizace reklamních dat v případě absence souhlasu
gtag('set', 'ads_data_redaction', true);
</script><!-- COOKIE CONSENT BANNER -->
<div id="cookieBanner" class="cookie-banner">
<div class="cookie-banner-main">
<div class="cookie-content">
<p class="cookie-text">
Tento web používá soubory cookies k analýze návštěvnosti a personalizaci reklam.
Více informací naleznete v sekci <a href="/ochrana-osobnich-udaju/">Ochrana osobních údajů</a>.
</p>
</div>
<div class="cookie-actions">
<button id="cookieSettingsBtn" class="cookie-btn cookie-btn-settings">Nastavení</button>
<button id="cookieRejectBtn" class="cookie-btn cookie-btn-reject">Odmítnout</button>
<button id="cookieAcceptBtn" class="cookie-btn cookie-btn-accept">Rozumím a přijímám</button>
</div>
</div>
<!-- COOKIE SETTINGS PANEL (EXPANDABLE) -->
<div id="cookieSettingsPanel" class="cookie-settings-panel" style="display: none;">
<div class="cookie-settings-title">Podrobné nastavení souborů cookies</div>
<div class="cookie-settings-options">
<div class="cookie-option">
<label class="cookie-switch-label">
<input type="checkbox" id="cookieOptNecessary" checked disabled>
<span class="cookie-switch-custom"></span>
<div class="cookie-option-info">
<span class="cookie-option-name">Nezbytné (Technické)</span>
<span class="cookie-option-desc">Nutné pro správný chod a bezpečnost webu. Nelze je vypnout.</span>
<span id="cookieListNecessary" class="cookie-services-list"></span>
</div>
</label>
</div>
<div class="cookie-option">
<label class="cookie-switch-label">
<input type="checkbox" id="cookieOptAnalytics" checked>
<span class="cookie-switch-custom"></span>
<div class="cookie-option-info">
<span class="cookie-option-name">Analytické</span>
<span class="cookie-option-desc">Pomáhají nám pochopit, jak návštěvníci používají web.</span>
<span id="cookieListAnalytics" class="cookie-services-list"></span>
</div>
</label>
</div>
<div class="cookie-option">
<label class="cookie-switch-label">
<input type="checkbox" id="cookieOptMarketing" checked>
<span class="cookie-switch-custom"></span>
<div class="cookie-option-info">
<span class="cookie-option-name">Marketingové</span>
<span class="cookie-option-desc">Slouží pro správné cílení a vyhodnocování reklam.</span>
<span id="cookieListMarketing" class="cookie-services-list"></span>
</div>
</label>
</div>
</div>
<div class="cookie-settings-actions">
<button id="cookieSaveSelectedBtn" class="cookie-btn cookie-btn-accept">Uložit vybrané</button>
</div>
</div>
</div>/* Zde se vygeneruje styl na základě nastavení barev... */document.addEventListener('DOMContentLoaded', function() {
// COOKIE CONSENT BANNER LOGIC
const cookieBanner = document.getElementById('cookieBanner');
const cookieAcceptBtn = document.getElementById('cookieAcceptBtn');
const cookieRejectBtn = document.getElementById('cookieRejectBtn');
const cookieSettingsBtn = document.getElementById('cookieSettingsBtn');
const cookieSettingsPanel = document.getElementById('cookieSettingsPanel');
const cookieSaveSelectedBtn = document.getElementById('cookieSaveSelectedBtn');
const openCookieSettingsLink = document.getElementById('openCookieSettingsLink');
const gdprCookieSettingsLink = document.getElementById('gdprCookieSettingsLink');
// Checkboxes
const optAnalytics = document.getElementById('cookieOptAnalytics');
const optMarketing = document.getElementById('cookieOptMarketing');
// Dynamické načítání služeb a cookies - upravte seznam podle cílového webu
window.cookieConsentServices = window.cookieConsentServices || {
necessary: [
{ name: 'Systémové cookies', cookies: ['sessionid', 'csrftoken'] }
],
analytics: [
{ name: 'Microsoft Clarity', cookies: ['_clck', '_clsk'] },
{ name: 'Google Tag Manager', cookies: ['_ga', '_gid'] }
],
marketing: [
{ name: 'Google Ads', cookies: ['gcl_au', '_gcl_aw'] },
{ name: 'Meta Pixel', cookies: ['_fbp', '_fbc'] }
]
};
if (cookieBanner) {
// Vykreslení aktivních služeb a cookies pod jednotlivými přepínači
function renderServices() {
const services = window.cookieConsentServices;
const elNecessary = document.getElementById('cookieListNecessary');
const elAnalytics = document.getElementById('cookieListAnalytics');
const elMarketing = document.getElementById('cookieListMarketing');
if (elNecessary && services.necessary) {
elNecessary.innerHTML = 'Služby a cookies: ' + services.necessary.map(s => `${s.name} (${s.cookies.join(', ')})`).join(', ');
}
if (elAnalytics && services.analytics) {
elAnalytics.innerHTML = 'Služby a cookies: ' + services.analytics.map(s => `${s.name} (${s.cookies.join(', ')})`).join(', ');
}
if (elMarketing && services.marketing) {
elMarketing.innerHTML = 'Služby a cookies: ' + services.marketing.map(s => `${s.name} (${s.cookies.join(', ')})`).join(', ');
}
}
renderServices();
// Pokud uživatel dosud neučinil volbu, zobrazí se lišta
if (!localStorage.getItem('cookie_consent')) {
cookieBanner.style.display = 'flex';
}
// Funkce pro aktualizaci stavu souhlasu
function updateConsent(consentState) {
localStorage.setItem('cookie_consent', JSON.stringify(consentState));
// 1. Aktualizace stavu v Google Consent Mode v2
if (typeof gtag === 'function') {
gtag('consent', 'update', {
'ad_storage': consentState.marketing ? 'granted' : 'denied',
'ad_user_data': consentState.marketing ? 'granted' : 'denied',
'ad_personalization': consentState.marketing ? 'granted' : 'denied',
'analytics_storage': consentState.analytics ? 'granted' : 'denied',
'personalization_storage': consentState.necessary ? 'granted' : 'denied',
'functionality_storage': consentState.necessary ? 'granted' : 'denied'
});
}
// 2. Push události do Google Tag Manager Data Layer
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'cookie_consent_update',
'cookie_consent_necessary': consentState.necessary,
'cookie_consent_analytics': consentState.analytics,
'cookie_consent_marketing': consentState.marketing
});
// 3. Odeslání nativního Javascript eventu (pro hardcoded měření v kódu)
window.dispatchEvent(new CustomEvent('cookie_consent_updated_event', { detail: consentState }));
// Skrytí lišty s plynulou animací
cookieBanner.style.opacity = '0';
setTimeout(() => {
cookieBanner.style.display = 'none';
if (cookieSettingsPanel) cookieSettingsPanel.style.display = 'none';
}, 400);
}
// Tlačítko "Přijmout vše"
if (cookieAcceptBtn) {
cookieAcceptBtn.addEventListener('click', function() {
updateConsent({ necessary: true, analytics: true, marketing: true });
});
}
// Tlačítko "Odmítnout vše"
if (cookieRejectBtn) {
cookieRejectBtn.addEventListener('click', function() {
updateConsent({ necessary: true, analytics: false, marketing: false });
});
}
// Tlačítko "Nastavení" (zobrazení/skrytí detailního panelu)
if (cookieSettingsBtn && cookieSettingsPanel) {
cookieSettingsBtn.addEventListener('click', function() {
cookieSettingsPanel.style.display = cookieSettingsPanel.style.display === 'none' ? 'block' : 'none';
});
}
// Tlačítko "Uložit vybrané" (v detailním nastavení)
if (cookieSaveSelectedBtn && optAnalytics && optMarketing) {
cookieSaveSelectedBtn.addEventListener('click', function() {
updateConsent({
necessary: true,
analytics: optAnalytics.checked,
marketing: optMarketing.checked
});
});
}
// Pomocná funkce pro zobrazení lišty a předvyplnění stavu z LocalStorage
function showSettings() {
const stored = localStorage.getItem('cookie_consent');
if (stored) {
try {
const parsed = JSON.parse(stored);
if (optAnalytics) optAnalytics.checked = !!parsed.analytics;
if (optMarketing) optMarketing.checked = !!parsed.marketing;
} catch (e) {}
}
cookieBanner.style.display = 'flex';
cookieBanner.style.opacity = '1';
if (cookieSettingsPanel) cookieSettingsPanel.style.display = 'block';
}
// Vyvolání z patičky (stálý odkaz)
if (openCookieSettingsLink) {
openCookieSettingsLink.addEventListener('click', function(e) {
e.preventDefault();
showSettings();
});
}
// Vyvolání z textu GDPR stránky
if (gdprCookieSettingsLink) {
gdprCookieSettingsLink.addEventListener('click', function(e) {
e.preventDefault();
showSettings();
cookieBanner.scrollIntoView({ behavior: 'smooth', block: 'end' });
});
}
}
});V GTM klikněte na libovolnou značku (např. Meta Pixel HTML tag), rozbalte Pokročilá nastavení -> Nastavení souhlasu a zvolte možnost Vyžadovat dodatečný souhlas se spuštěním značky. Jako souhlas přidejte ad_storage (pro marketingové tagy) nebo analytics_storage (pro analytické tagy).
Lišta po udělení souhlasu odesílá do GTM dataLayeru událost s názvem cookie_consent_update. Můžete tak vytvořit spouštěč (Trigger) typu Custom Event se stejným názvem a podmínkou cookie_consent_marketing se rovná true.
Vyplňte formulář níže. Generátor automaticky sestaví správný HTML skript pro GTM, který stačí zkopírovat a vložit jako **Vlastní HTML značku** spouštěnou na triggeru **Consent Initialization**: