Метрика

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

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

За згодою відвідувача на передавання інформації, код лічильника завантажується стандартним способом. В іншому випадку код не завантажується. Вибір відвідувача може враховуватися під час відвідування всіх сторінок сайту (домену).

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

Приклад
..
<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 — номер вашого лічильника.