Плашка о использовании cookie файлов на сайте

Всем привет! Учитывая актуальность вопроса, решил выложить код всплывающей плашки…
Как уже многие знают, РКН всех поставил на уши по поводу обработки персональных данных посетителей наших сайтов, поэтому добавляем плашку, что бы наши заказчики спали спокойно и не боялись штрафов)

CSS:

#CookiesAlert {
    position: fixed;
    z-index: 9999999999;
    bottom: 0;
    left: 0;
    padding: 15px;
    width: 100%;
    text-align: center;
    align-items: center;
    display: none;
    color: #212731;
    margin: auto
}

#CookiesAlert.active {
    display: block
}

#CookiesAlert .content {
    max-width: 98%;
    padding: 15px;
    margin: auto auto auto 0;
    text-align: left;
    border-radius: 10px;
    background: white;
    box-shadow: 0 0 10px rgba(0,0,0,.2);
    max-width: 600px
}

#CookiesAlert .content h2 {
    margin: auto auto 10px;
    line-height: 1;
    font-size: 18px
}

#CookiesAlert .content p {
    margin: auto auto 25px;
    line-height: 1;
    font-size: 14px
}

#CookiesAlert .content .buttons {
    display: flex;
    align-items: flex-end
}

#CookiesAlert .content .buttons a {
    border-radius: 6px;
    margin: auto 15px auto auto;
    padding: 6px 15px;
    transition: .3s
}

#CookiesAlert .content .buttons a.CUAgree {
    margin: auto 0
}

@media (max-width: 768px) {
    #CookiesAlert {
        right:0;
        width: 95%
    }
}

HTML:

<div id="CookiesAlert" class="[[!#COOKIE.cookies_accepted:empty=`active`]]">
    <div class="content">
        <h2>Cookie файлы</h2>
        <p>
            На нашем сайте используются cookie–файлы, в том числе сервисов веб–аналитики. Используя сайт, вы соглашаетесь на обработку персональных данных при помощи cookie–файлов. Подробнее об обработке персональных данных вы можете узнать в Политике конфиденциальности.
        </p>
        <div class="buttons">
            <a href="#ссылка_на_политику_конфиденциальности" target="_blank" class="btn">Подробнее</a>
            <a href="javascript:void(0);" class="CUAgree btn">Принять</a>
        </div>
    </div>
</div>

JS:

<script>
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelector('.CUAgree').addEventListener('click', function() {
            document.cookie = 'cookies_accepted=1; path=/; max-age=' + (365 * 86400) + '; secure; samesite=lax';
            document.getElementById('CookiesAlert').classList.remove('active');
        });
    });
</script>

Вот и всё, статья больше конечно для новичков и для тех, кому срочно надо это реализовать.

P.S. В CSS не хватает стилей для кнопок, этот момент уже на ваше усмотрение, да и в целом, стилизация, дело индивидуальное.

Денис Усманов

29 мая 2025, 08:19

928

Комментарии: 7

Сергей Карпович

29 мая 2025, 10:05

Спасибо, эта тема уже поднималась, когда только за куки нахлобучивали, с тех пор использую такой вариант:

<style>
    .cookie-message {
        position: fixed;
        z-index: 100;
        bottom: 0;
        left: 0;
        max-width: 350px;
        padding: 0 20px 20px;
    }
    .cookie-message-inner {
        display: grid;
        justify-items: start;
        grid-gap: 10px;
        font-size: 14px;
        padding: 30px;
        line-height: 1.3;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.1);
    }
    .cookie-message-text {
        flex-grow: 2;
        color: #8d949e;
    }
    .cookie-message-inner .button{
        background: #e1e1e1;
        color: #878787;
    }
    .cookie-message-inner .button:hover{
        background-color: #01356f;
        color: #fff;
    }
</style>

<div class="cookie-message js-cookie-message" hidden>
    <div class="container">
        <div class="cookie-message-inner">
            <div class="cookie-message-text">
                Наш сайт использует сооkiе в том числе сервисов Веб-аналитики (файлы с данными о прошлых посещениях сайта). Продолжая пользоваться сайтом, вы соглашаетесь с 
                <a data-fancybox data-type="ajax" data-src="{198 | url}" data-filter="#content">политикой конфиденциальности</a>.
            </div>
            <button class="button js-cookie-message-confirm">ОК</button>
        </div>
    </div>
</div>

<script>
    if (!localStorage.getItem('cookieAccept')) {
        const el = document.querySelector('.js-cookie-message');
        el.style.display = 'block';
        el.querySelector('.js-cookie-message-confirm').addEventListener('click', (e) => {
            localStorage.setItem('cookieAccept', 1);
            el.style.display = 'none';
        }, true);
    }
</script>

Все запихано в один чанк и выведено на всех страницах

Андрей Степаненко

30 мая 2025, 08:11

Оба вариант что выше, не работают)))

перегенерировал

<style>
        .cookie-message {
            position: fixed;
            z-index: 1000;
            bottom: 20px;
            left: 20px;
            right: 20px;
            max-width: 350px;
            padding: 0;
            font-family: Arial, sans-serif;
            animation: fadeIn 0.5s ease-in-out;
            display: none;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .cookie-message-inner {
            display: grid;
            justify-items: start;
            grid-gap: 15px;
            font-size: 14px;
            padding: 20px;
            line-height: 1.5;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.15);
        }
        
        .cookie-message-text {
            color: #5a5a5a;
        }
        
        .cookie-message-link {
            color: #01356f;
            text-decoration: underline;
        }
        
        .cookie-message-inner .button {
            background: #e1e1e1;
            color: #878787;
            border: none;
            padding: 8px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s ease;
        }
        
        .cookie-message-inner .button:hover {
            background-color: #01356f;
            color: #fff;
        }
        
        @media (max-width: 480px) {
            .cookie-message {
                max-width: 100%;
                left: 10px;
                right: 10px;
                bottom: 10px;
            }
        }
    </style>

    <!-- Основное содержимое вашего сайта -->
    
    <!-- Блок уведомления о cookies -->
    <div class="cookie-message js-cookie-message">
        <div class="cookie-message-inner">
            <div class="cookie-message-text">
                Наш сайт использует cookies, включая сервисы веб-аналитики (файлы с данными о прошлых посещениях сайта). Продолжая пользоваться сайтом, вы соглашаетесь с
                <a href="/privacy-policy" class="cookie-message-link">политикой конфиденциальности</a>.
            </div>
            <button class="btn button js-cookie-message-confirm">Принять</button>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Проверяем, было ли уже принято соглашение
            if (!localStorage.getItem('cookieAccept')) {
                const cookieMessage = document.querySelector('.js-cookie-message');
                
                // Показываем сообщение
                cookieMessage.style.display = 'block';
                
                // Обработчик для кнопки подтверждения
                document.querySelector('.js-cookie-message-confirm').addEventListener('click', function(e) {
                    // Сохраняем согласие в localStorage
                    localStorage.setItem('cookieAccept', '1');
                    
                    // Скрываем сообщение с анимацией
                    cookieMessage.style.opacity = '0';
                    setTimeout(() => {
                        cookieMessage.style.display = 'none';
                    }, 300);
                });
                
                // Дополнительно: скрытие при клике вне блока
                document.addEventListener('click', function(e) {
                    if (!cookieMessage.contains(e.target) && e.target !== cookieMessage) {
                        cookieMessage.style.opacity = '0';
                        setTimeout(() => {
                            cookieMessage.style.display = 'none';
                        }, 300);
                    }
                });
            }
            
            // Проверяем, нужно ли загружать аналитику
            if (localStorage.getItem('cookieAccept')) {
                loadAnalytics();
            }
        });
        
        // Функция для загрузки аналитики (пример)
        function loadAnalytics() {
            console.log('Loading analytics...');
            // Здесь можно добавить код для загрузки Google Analytics, Yandex.Metrika и т.д.
        }
    </script>

Артур Шевченко

30 мая 2025, 18:05

// Дополнительно: скрытие при клике вне блока
                document.addEventListener('click', function(e) {
                    if (!cookieMessage.contains(e.target) && e.target !== cookieMessage) {
                        cookieMessage.style.opacity = '0';
                        setTimeout(() => {
                            cookieMessage.style.display = 'none';
                        }, 300);
                    }
                });

А вот это зачем?

Андрей Степаненко

04 июня 2025, 20:44

хз) гпт сгенерировал))
видимо так надо) раз начал сайтом пользоваться
потом докажи что ты не кликал)))

Miša Bulic

30 мая 2025, 20:49

при отложенной загрузке аналитики у вас метрика рекламы отвалится. Нужно при загрузке страницы нормально загрузать скрипт и потом уже отключать если не хотят.

Артур Шевченко

30 мая 2025, 21:09

А как её отключить?

Сергей Сергеевич

31 мая 2025, 12:39

Хорошая идея, так как я вижу по вебвизору на десктопе много людей смотрят сайт не кликая на закрытие плашки с уведомлением о куки. Т.е если с самого начала не загружать метрику, то я бы их не видел…

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.