Почему сайт обязан предупреждать о cookie, Яндекс.Метрике и обработке персональных данных

С 2017 года в России действуют поправки в Федеральный закон «О персональных данных» (152-ФЗ), которые требуют получать явное согласие пользователя на сбор и обработку его персональной информации. А использование сервисов веб-аналитики, таких как Яндекс.Метрика, подпадает под эти требования, поскольку они собирают IP-адреса, данные о браузере, поведении на сайте — всё это признаётся персональными данными. Кроме того, европейский GDPR (General Data Protection Regulation) и ePrivacy директива также обязывают сайты запрашивать разрешение на установку cookie-файлов.

Что нужно сделать владельцу сайта?

• Уведомить пользователя о том, какие данные собираются и с какой целью.
• Запросить согласие до начала обработки (до установки аналитических cookie).
• Предоставить ссылку на политику конфиденциальности с подробными условиями.
• Сохранить выбор пользователя, чтобы не показывать предупреждение повторно.

Ниже приведён готовый пример такого решения — cookie-попап с текстом, адаптированным под российские реалии и использование Яндекс.Метрики.

<!-- COOKIE POPUP -->
<style>
    .cookie-popup {
        position: fixed;
        left: 20px;
        right: 20px;
        bottom: 20px;
        z-index: 9999;
        display: none;
    }

    .cookie-popup.-show {
        display: block;
    }

    .cookie-popup__content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        background: #ffffff;
        border-radius: 16px;
        padding: 20px 24px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        border: 1px solid #e5e5e5;
    }

    .cookie-popup__text {
        font-size: 14px;
        line-height: 1.5;
        color: #222;
    }

    .cookie-popup__text a {
        color: #1f6bd8;
        text-decoration: underline;
    }

    .cookie-popup__btn {
        flex-shrink: 0;
        border: none;
        background: #1f6bd8;
        color: #fff;
        border-radius: 10px;
        padding: 12px 20px;
        font-size: 14px;
        cursor: pointer;
        transition: 0.2s;
    }

    .cookie-popup__btn:hover {
        opacity: 0.9;
    }

    @media (max-width: 768px) {
        .cookie-popup {
            left: 10px;
            right: 10px;
            bottom: 10px;
        }

        .cookie-popup__content {
            flex-direction: column;
            align-items: flex-start;
            padding: 16px;
        }

        .cookie-popup__btn {
            width: 100%;
        }
    }
</style>

<div class="cookie-popup" id="cookiePopup">
    <div class="cookie-popup__content">
        <div class="cookie-popup__text">
            Наш сайт использует файлы cookie для удобства пользованием, таргетирования рекламы и сбора статистики в метрической программе Яндекс.Метрика в соответствии с Политикой конфиденциальности в отношении обработки персональных данных. Продолжая пользоваться сайтом, вы даете согласие на использование файлов cookie и соглашаетесь с Политикой конфиденциальности.
            <a href="/privacy_policy.pdf" target="_blank">Подробнее</a>
        </div>
        <button type="button" class="cookie-popup__btn" id="cookieAccept">
            Принять
        </button>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var cookiePopup = document.getElementById('cookiePopup');
        var cookieAccept = document.getElementById('cookieAccept');

        if (!cookiePopup || !cookieAccept) return;

        function getCookie(name) {
            var matches = document.cookie.match(new RegExp(
                "(?:^|; )" + name.replace(/([.$?*|{}()[\]\\/+^])/g, '\\$1') + "=([^;]*)"
            ));
            return matches ? decodeURIComponent(matches[1]) : undefined;
        }

        function setCookie(name, value, days) {
            var date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            document.cookie = name + "=" + encodeURIComponent(value) + "; path=/; expires=" + date.toUTCString();
        }

        if (!getCookie('cookieAccepted')) {
            cookiePopup.classList.add('-show');
        }

        cookieAccept.addEventListener('click', function () {
            setCookie('cookieAccepted', '1', 365);
            cookiePopup.classList.remove('-show');
        });
    });
</script>
<!-- /COOKIE POPUP -->

Иногда данный код не работает (например в joomla). Используйте этот:

<!-- COOKIE POPUP -->
<style>
    .cookie-popup {
        position: fixed;
        left: 20px;
        right: 20px;
        bottom: 20px;
        z-index: 9999;
        display: none;
    }

    .cookie-popup.-show {
        display: block;
    }

    .cookie-popup__content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        background: #ffffff;
        border-radius: 16px;
        padding: 20px 24px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        border: 1px solid #e5e5e5;
    }

    .cookie-popup__text {
        font-size: 14px;
        line-height: 1.5;
        color: #222;
    }

    .cookie-popup__text a {
        color: #1f6bd8;
        text-decoration: underline;
    }

    .cookie-popup__btn {
        flex-shrink: 0;
        border: none;
        background: #1f6bd8;
        color: #fff;
        border-radius: 10px;
        padding: 12px 20px;
        font-size: 14px;
        cursor: pointer;
        transition: 0.2s;
    }

    .cookie-popup__btn:hover {
        opacity: 0.9;
    }

    @media (max-width: 768px) {
        .cookie-popup {
            left: 10px;
            right: 10px;
            bottom: 10px;
        }

        .cookie-popup__content {
            flex-direction: column;
            align-items: flex-start;
            padding: 16px;
        }

        .cookie-popup__btn {
            width: 100%;
        }
    }
</style>

<div class="cookie-popup" id="cookiePopup">
    <div class="cookie-popup__content">
        <div class="cookie-popup__text">
            Наш сайт использует файлы cookie для удобства пользованием, таргетирования рекламы и сбора статистики в метрической программе Яндекс.Метрика в соответствии с Политикой конфиденциальности в отношении обработки персональных данных. Продолжая пользоваться сайтом, вы даете согласие на использование файлов cookie и соглашаетесь с Политикой конфиденциальности.
            <a href="/polzs.pdf" target="_blank">Подробнее</a>
        </div>
        <button type="button" class="cookie-popup__btn" id="cookieAccept">
            Принять
        </button>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    var cookiePopup = document.getElementById('cookiePopup');
    var cookieAccept = document.getElementById('cookieAccept');

    if (!cookiePopup || !cookieAccept) return;

    function getCookie(name) {
        var cookies = document.cookie ? document.cookie.split('; ') : [];

        for (var i = 0; i < cookies.length; i++) {
            var parts = cookies[i].split('=');
            var key = parts.shift();
            var value = parts.join('=');

            if (key === name) {
                return decodeURIComponent(value);
            }
        }

        return null;
    }

    function setCookie(name, value, days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        document.cookie = name + "=" + encodeURIComponent(value) + "; path=/; expires=" + date.toUTCString();
    }

    if (!getCookie('cookieAccepted')) {
        cookiePopup.classList.add('-show');
    }

    cookieAccept.addEventListener('click', function () {
        setCookie('cookieAccepted', '1', 365);
        cookiePopup.classList.remove('-show');
    });
});
</script>
<!-- /COOKIE POPUP -->