Предупреждение о сборе статистики

Яндекс.Метрика позволяет предупредить посетителя сайта о сборе информации о посещении и отложить загрузку кода счетчика на страницах сайта.

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

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

Пример
...
<head>
    <meta charset="UTF-8">
    <title>Заголовок страницы</title>
    <!--В примере используется стиль reset.css. Вы можете использовать свое решение.-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    <!--В примере используется библиотека js-cookie для работы с cookie. Вы можете использовать свое решение-->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.2/js.cookie.js"></script>
    <style>
        * {
            box-sizing: border-box;
        }
        body {
            width: 100%;
            height: 100%;
        }
        .cookie-notification {
            position: fixed;
            background-color: rgba(0, 0, 0, .8);
            bottom: 0;
            width: 100%;
            color: white;
            padding: 15px;
        }

        .cookie-notification_hidden_yes {
            display: none;
        }

        .cookie-notification__header {
            margin-bottom: 10px;
            font-size: 23px;
        }

        .cookie-notification__body {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    Контент сайта
    <div class="cookie-notification cookie-notification_hidden_yes">
        <div class="cookie-notification__header">Мы используем cookies</div>
        <div class="cookie-notification__body">Мы собираем статистику о посещениях сайта с помощью cookies. Посещая сайт, вы соглашаетесь с этим</div>
        <div class="cookie-notification__buttons">
            <button class="cookie-notification__button" id="yes">Я согласен</button>
        </div>
    </div>
    <script type="text/javascript">
        var messageElement = document.querySelector('.cookie-notification');

        // Если нет cookies, то показываем плашку
        if (!Cookies.get('agreement')) {
            showMessage();
        } else {
            initCounter();
        }
        // Загружаем сам код счетчика сразу
        (function (d, w) {
            var n = d.getElementsByTagName("script")[0],
                s = d.createElement("script"),
                f = function () { n.parentNode.insertBefore(s, n); };
            s.type = "text/javascript";
            s.async = true;
            s.src = "https://mc.yandex.ru/metrika/watch.js";

            if (w.opera == "[object Opera]") {
                d.addEventListener("DOMContentLoaded", f, false);
            } else { f(); }
        })(document, window);

        // Функция добавляет класс к DOM-элементу. Вы можете использовать библиотеку jQuery или другой фреймворк
        function addClass (o, c) {
            var re = new RegExp("(^|\\s)" + c + "(\\s|$)", "g");

            if (!o || re.test(o.className)) {
                return;
            }

            o.className = (o.className + " " + c).replace(/\s+/g, " ").replace(/(^ | $)/g, "");
        }

        // Функция удаляет класс из DOM-элемента. Вы можете использовать библиотеку jQuery или другой фреймворк
        function removeClass (o, c) {
            var re = new RegExp('(^|\\s)' + c + '(\\s|$)', 'g');
            if (!o) {
                return;
            }
            o.className = o.className.replace(re, '$1').replace(/\s+/g, ' ').replace(/(^ | $)/g, '');
        }

        // Функция, которая прячет предупреждение
        function hideMessage () {
            addClass(messageElement, 'cookie-notification_hidden_yes');
        }

        // Функция, которая показывает предупреждение
        function showMessage () {
            removeClass(messageElement, 'cookie-notification_hidden_yes');
        }

        function saveAnswer () {
            // Прячем предупреждение
            hideMessage();

            // Ставим cookies
            Cookies.set('agreement', '1');
        }

        function initCounter () {
            (function (w, c) {
                function _createCounter () {
                    try {
                        w.yaCounterXXXXXX = new Ya.Metrika({
                            id:XXXXXX,
                            clickmap:true,
                            trackLinks:true,
                            accurateTrackBounce:true,
                            webvisor:true
                        });
                    } catch (e) {}
                }

                // Если код счетчика загружен, то сразу инициализируем счетчик
                if (w.Ya && Ya.Metrika) {
                    _createCounter();
                } else {
                    // Иначе по стандартной схеме
                    (w[c] = w[c] || []).push(function () {
                        _createCounter();
                    });
                }

                saveAnswer();
            })(window, "yandex_metrika_callbacks");
        }

        // Нажатие кнопки "Я согласен"
        document.querySelector('#yes').addEventListener('click', function () {
            initCounter();
        });
    </script>
</body>
...

где

  • XXXXXX — номер вашего счетчика.