Notice about collecting statistics

Yandex.Metrica allows you to notify your site users that session information will be collected, and defer loading the counter code on site pages.

If the user agrees to have information transmitted, the counter code loads normally. Otherwise, the counter code doesn't load. The user's choice can be remembered when opening all the other pages on the site or domain.

To enable this notice and implement deferred counter code loading, contact your webmaster.

Example
...
<head>
    <meta charset="UTF-8">
    <title>Page title</title>
    <!--The example uses the style reset.css. You can use your own style.-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    <!--The example uses the js cookie library for working with cookies. You can use your own approach-->
    <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>
    Site content
    <div class="cookie-notification cookie-notification_hidden_yes">
        <div class="cookie-notification__header">We use cookies</div>
        <div class="cookie-notification__body">We use cookies to collect statistics. By visiting this site, you agree to the use of cookies.</div>
        <div class="cookie-notification__buttons">
            <button class="cookie-notification__button" id="yes">I agree</button>
        </div>
    </div>
    <script type="text/javascript">
        var messageElement = document.querySelector('.cookie-notification');

        // If there aren't any cookies, show a placeholder
        if (!Cookies.get('agreement')) {
            showMessage();
        } else {
            initCounter();
        }
        // Loading the counter code immediately
        (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);

        // This function adds a class to the DOM element. You can use jQuery or another framework
 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, "");
        }

        //The function removes the class from the DOM element. You can use jQuery or another framework
        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 that hides the warning
        function hideMessage () {
            addClass(messageElement, 'cookie-notification_hidden_yes');
        }

        // Function that shows the warning
        function showMessage () {
            removeClass(messageElement, 'cookie-notification_hidden_yes');
        }

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

            // Setting 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 the counter code is loaded, initialize the counter immediately
                if (w.Ya && Ya.Metrika) {
                    _createCounter();
                } else {
                    // Otherwise use the standard approach
                    (w[c] = w[c] || []).push(function () {
                        _createCounter();
                    });
                }

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

        // Click on the "I Agree" button
        document.querySelector('#yes').addEventListener('click', function () {
            initCounter();
        });
    </script>
</body>
...

where

  • XXXXXX is your counter number.