Автор: Александр Дружный · Опубликовано: 2025-04-23 · Содержание проверено: 15.10.2026
Чтобы добавить уведомление о cookie на сайт, скопируйте готовый код HTML, CSS и JavaScript и вставьте его перед закрывающим тегом </body> в общий шаблон. Баннер появится при первом посещении и сохранит выбор пользователя. Дополнительные плагины и библиотеки не нужны.
Нужно ли предупреждать об использовании cookie
Cookie - небольшие файлы, которые браузер сохраняет при посещении сайта. Они помогают поддерживать авторизацию, работу корзины, сохранять настройки и собирать статистику.
В России нет закона, обязывающего каждый сайт устанавливать cookie-баннер. Однако использование некоторых технологий может подпадать под действие Федерального закона № 152-ФЗ «О персональных данных».
Если обработка данных требует согласия посетителя, его необходимо получить до начала такой обработки. Простого уведомления недостаточно.
Готовый HTML-код предупреждения о cookie
Этот скрипт работает на обычных HTML-сайтах, WordPress, OpenCart, Laravel и других CMS с возможностью вставки пользовательского кода.
По умолчанию он показывает уведомление с кнопкой «Понятно». Если указать номер Яндекс Метрики, появятся кнопки «Разрешить» и «Отказаться», а счётчик будет запускаться только после согласия.
Скопируйте код целиком:
<style>
#cookieNotice[hidden],#cookieSettings[hidden],#cookieNo[hidden]{display:none!important}
#cookieNotice{position:fixed;bottom:12px;left:12px;right:12px;max-width:460px;z-index:99999;padding:16px;background:#fff;color:#222;border-radius:10px;box-shadow:0 4px 24px #0003;font:14px/1.5 Arial,sans-serif}
#cookieNotice button,#cookieSettings{border:1px solid #bbb;border-radius:6px;padding:9px 12px;margin:10px 8px 0 0;cursor:pointer;background:#fff;color:#222}
#cookieYes{background:#1764b8!important;color:#fff!important;border-color:#1764b8!important}
#cookieSettings{position:fixed;bottom:12px;left:12px;z-index:99998;margin:0}
#cookieNotice a{color:#1764b8}
</style>
<div id="cookieNotice" role="region" aria-label="Уведомление о cookie" hidden>
<span id="cookieMessage">Сайт использует необходимые cookie.</span>
<a href="/privacy/">Подробнее</a>.
<div>
<button type="button" id="cookieYes">Понятно</button>
<button type="button" id="cookieNo">Отказаться</button>
</div>
</div>
<button type="button" id="cookieSettings" hidden>Настройки cookie</button>
<script>
(() => {
const id = 0; // Номер Яндекс Метрики. 0 - без аналитики.
const key = 'cookie-choice-v2-' + id;
const box = document.getElementById('cookieNotice');
const settings = document.getElementById('cookieSettings');
const yes = document.getElementById('cookieYes');
const no = document.getElementById('cookieNo');
if (id) {
document.getElementById('cookieMessage').textContent =
'Сайт использует необходимые cookie. Разрешите аналитику посещений?';
yes.textContent = 'Разрешить';
} else no.hidden = true;
let choice = null;
try {
const saved = JSON.parse(localStorage.getItem(key));
if (saved && (saved.value === 'yes' || saved.value === 'no') &&
Number.isFinite(saved.time) && Date.now() >= saved.time &&
Date.now() - saved.time < 180 * 86400000) choice = saved.value;
} catch (e) {}
function show(open) {
box.hidden = !open;
settings.hidden = open || !id;
}
function metrika() {
if (!id || window.ym) return;
window.ym = function(){
(window.ym.a = window.ym.a || []).push(arguments);
};
window.ym.l = Date.now();
const s = document.createElement('script');
s.async = true;
s.src = 'https://mc.yandex.ru/metrika/tag.js';
document.head.append(s);
window.ym(id, 'init', {
clickmap: true,
trackLinks: true,
accurateTrackBounce: true
});
}
function save(value) {
const previous = choice;
choice = value;
try {
localStorage.setItem(key, JSON.stringify({
value, time: Date.now()
}));
} catch (e) {}
show(false);
if (previous === 'yes' && value === 'no') location.reload();
else if (value === 'yes' && previous !== 'yes') metrika();
}
yes.onclick = () => save('yes');
no.onclick = () => save('no');
settings.onclick = () => show(true);
show(!choice);
if (choice === 'yes') metrika();
})();
</script>Как установить уведомление на сайт
Откройте общий HTML-шаблон сайта. В WordPress можно использовать инструмент вставки пользовательского кода, в OpenCart - общий шаблон подвала, в Laravel - основной Blade-шаблон.
Вставьте весь код перед
</body>, чтобы уведомление работало на всех страницах.Замените
/privacy/на ссылку на политику обработки персональных данных вашего сайта.Для подключения Яндекс Метрики замените
const id = 0;на номер своего счётчика, напримерconst id = 12345678;.
Сохраните изменения. Если на сайте включено кеширование, очистите кеш.
Важно: при использовании встроенного подключения Метрики удалите её старый код из шаблона или плагина, включая noscript-блок. Иначе счётчик может запускаться до согласия.
Другие аналитические и рекламные скрипты этот пример автоматически не блокирует. Для них потребуется отдельная настройка.
Как проверить cookie-баннер
Откройте сайт в режиме инкогнито. Уведомление должно появиться внизу страницы.
Если Яндекс Метрика подключена, нажмите «Отказаться» и обновите страницу. Баннер не появится повторно, а встроенный в пример счётчик не должен загружаться.
Чтобы изменить выбор, нажмите «Настройки cookie». При разрешении аналитики скрипт загрузит Метрику.
Проверить сетевые запросы можно через инструменты разработчика Chrome: F12 → Network.
Решение сохраняется в localStorage на 180 дней. Для повторного тестирования удалите запись cookie-choice-v2-... в Application → Local Storage.
Обратите внимание: этот код предназначен для простого уведомления и управления встроенной аналитикой. Сохранение решения в браузере не заменяет подтверждаемого согласия, если оно необходимо по статье 9 Федерального закона № 152-ФЗ. Отзыв согласия также не удаляет автоматически ранее установленные сторонние cookie и уже переданные данные.
Политика BoostSEO · Обсудить внедрение на сайте
