Metrica

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 approach.-->
    <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>
    Website 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 session 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');

        // Displaying a placeholder if there aren't cookies
        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 the jQuery library 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, "");
        }

        // This function removes a class from the DOM element. You can use the jQuery library 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 notice
        function hideMessage () {
            addClass(messageElement, 'cookie-notification_hidden_yes');
        }

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

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

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

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

where

  • XXXXXX is your counter number.