Metrica

Installing a counter on a site with CSP

The counter code generated by Yandex.Metrica is intended for inline insertion in the HTML code of pages. On sites that use the Content Security Policy technology, this code will not run unless you take specific steps. In particular, you need to use the HTTP header to give the browser permission to process data. The HTTP header should include the src-script directive with the nonce attribute (this requires signing the contents of the script element) and the img-src directive for processing the contents of the noscript element.

In addition, Yandex.Metrica allows you to use a different method for connecting the counter code
[no-highlight[

The counter code consists of two parts: JavaScript code placed in the script element, and HTML code in the noscript element.

]no-highlight]
. You can put just the contents of the noscript element in the HTML code of pages, and move the contents of the script element to an external script such as a JS file.

No matter which method you choose, you must modify the HTTP header to add permission to access Yandex.Metrica at the following addresses: https://mc.yandex.ru (for general counter operation) and https://yastatic.net (for WebVisor).

Putting the counter code in the HTML code of site pages

If you use this method, the Content-Security-Policy or Content-Security-Policy-Report-Only HTTP header must contain the following directives:

  • script-src with the nonce attribute. This attribute must contain a string value with a random sequence of characters (Latin letters and numbers). This value must be generated randomly on the server separately for each request.

    Content-Security-Policy: script-src 'nonce-<character sequence>';

    The same character sequence must be contained in the nonce attribute in the script element for the counter code on the site's pages.

    ...
    <!-- Yandex.Metrika counter -->
    <script type="text/javascript" nonce="<character sequence>">
        (function (d, w, c) {
            (w[c] = w[c] || []).push(function() {
    ...
  • img-src specifying the Yandex.Metrica address mc.yandex.ru to allow processing the contents of the noscript element.

    Content-Security-Policy: img-src https://mc.yandex.ru;
  • connect-src for connecting to Yandex.Metrica.

    Content-Security-Policy: connect-src https://mc.yandex.ru;

Example of the HTTP header when using this method:

Content-Security-Policy:
 ...
 img-src https://mc.yandex.ru;
 script-src https://mc.yandex.ru https://yastatic.net 'nonce-<character sequence>';
 connect-src https://mc.yandex.ru;
 ...

Using an external script to connect the counter code

If you use this method, the Content-Security-Policy or Content-Security-Policy-Report-Only HTTP header can have a general set of directives, including rules for loading data from Yandex.Metrica:

  • script-src specifying the addresses https://mc.yandex.ru and https://yastatic.net to allow processing scripts.

    Content-Security-Policy: script-src https://mc.yandex.ru https://yastatic.net;
  • img-src specifying the Yandex.Metrica address mc.yandex.ru to allow processing the contents of the noscript element.

    Content-Security-Policy: img-src https://mc.yandex.ru;
  • connect-src for connecting to Yandex.Metrica.

    Content-Security-Policy: connect-src https://mc.yandex.ru;

Example of the HTTP header when using this method:

Content-Security-Policy:
 ...
 img-src https://mc.yandex.ru;
 script-src 'self' https://mc.yandex.ru https://yastatic.net;
 connect-src https://mc.yandex.ru;
 ...

The example below connects the JavaScript code in an external JS file. Only the script element with the src attribute needs to be added to the HTML code of the site's pages. This attribute must contain the path to the file (for example, metrika.js).

<script type="text/javascript" src="/metrika.js"></script>
  1. In the Yandex.Metrica interface, go to the Counter code section in Settings and copy the contents of the script element.
  2. Add this code to the metrika.js file.

    Example of file contents
    (function (d, w, c) {
        (w[c] = w[c] || []).push(function() {
            try {
                w.yaCounterXXXXXX = new Ya.Metrika({id:XXXXXX,
                        clickmap:true,
                        trackLinks:true,
                        accurateTrackBounce:true});
            } catch(e) { }
        });
    
        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, "yandex_metrika_callbacks");

    Where XXXXXX is the Yandex.Metrica counter number.

  3. In order for the counter to collect data on users who have JavaScript disabled, add the content of the noscript element to the HTML code of the site's pages:

    <noscript><div><img src="https://mc.yandex.ru/watch/XXXXXX" style="position:absolute; left:-9999px;" alt="" /></div></noscript> 

In this case, the counter code on the site will not be checked. On the page with the list of counters, the counter will have the status: — “not installed on homepage, but data is being received”.