Наверх
К списку статей

Мой блог

Уведомление о использовании cookie на Ваш сайт

Думаю не для кого не секрет, что на каждом сайте должно быть уведомление об использовании cookie.

А с 1 марта даже какие-то санкции предусмотрены, но не будем о грустном 😁

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

cookie.js
document.addEventListener('DOMContentLoaded', function () {
    // Check if consent is already given
    if (!getCookie('cookie_consent')) {
        createCookieBanner();
    }

    function createCookieBanner() {
        const banner = document.createElement('div');
        banner.className = 'cookie-consent-banner';
        banner.innerHTML = `
            <div class="cookie-banner-content">
                <p>Мы используем файлы cookie. Продолжая использовать сайт, вы соглашаетесь с нашей <a href="/agreement.php" target="_blank">Политикой конфиденциальности</a>.</p>
                <button id="cookieConsentBtn" class="btn btn-primary">Согласен</button>
            </div>
        `;
        document.body.appendChild(banner);

        document.getElementById('cookieConsentBtn').addEventListener('click', function () {
            setCookie('cookie_consent', 'accepted', 365);
            banner.style.opacity = '0';
            setTimeout(() => {
                banner.remove();
            }, 300);
        });

        // Slight delay for animation entry
        requestAnimationFrame(() => {
            requestAnimationFrame(() => {
                banner.classList.add('show');
            });
        });
    }

    function setCookie(name, value, days) {
        let expires = "";
        if (days) {
            const date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + (value || "") + expires + "; path=/; SameSite=Lax";
    }

    function getCookie(name) {
        const nameEQ = name + "=";
        const ca = document.cookie.split(';');
        for (let i = 0; i < ca.length; i++) {
            let c = ca[i];
            while (c.charAt(0) == ' ') c = c.substring(1, c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
        }
        return null;
    }
});

Данный скрипт будет показывать внизу страницы уведомление, что сайт использует cookie до тех пор, пока не нажать на кнопку "Согласен". Что бы это уведомление было красивым, есть еще один файл: 

cookie.css

/* Cookie Consent Banner Styles */
.cookie-consent-banner {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    padding: 16px 24px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cookie-consent-banner.show {
    opacity: 1;
    transform: translateY(0);
}

.cookie-banner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.cookie-banner-content p {
    margin: 0;
    font-size: 0.95rem;
    color: #4b5563;
    line-height: 1.5;
}

.cookie-banner-content a {
    color: #2563eb;
    text-decoration: none;
}

.cookie-banner-content a:hover {
    text-decoration: underline;
}

.cookie-banner-content button {
    white-space: nowrap;
    padding: 10px 20px;
    border-radius: 8px;
    background: #111827;
    color: white;
    border: none;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.cookie-banner-content button:hover {
    background: #374151;
}

@media (max-width: 600px) {
    .cookie-banner-content {
        flex-direction: column;
        text-align: center;
    }

    .cookie-banner-content button {
        width: 100%;
    }
}

 

После подключения стилей, уведомление должно выглядеть следующим образом: 

Стоит еще сказать, что Вам нужно либо поменять ссылку на Политику конфиденциальности в файле cookie.jsлибо сделать файл с названием /agreement.php 

Собственно всё, теперь нужно только правильно подключить файл на всех страницах сайта согласно структуре сайт, для этого в верху сайта между тегами <head></head> вставить следующий код:

<link rel="stylesheet" href="/cookie.css">

а внизу до закрывающего тега </body> вставить код: 

<script src="/cookie.js" defer></script>

Если всё правильно сделано, то Вам не страшны проверки 😁 

Поделиться:
Полезная статья? Ваша оценка помогает автору писать лучше


Комментарии

0

Оставить комментарий

Комментарий появится на странице после проверки модератором.

Пока нет комментариев. Будьте первым!

К списку статей