Installing a tag on a site with CSP

Creating and installing a tag

The code snippet generated by Yandex Metrica is intended for inline insertion in the HTML code of pages. On sites that use 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.

Yandex Metrica also lets you enable code snippets a different way: you can put just the contents of the noscript element in the HTML code of pages and move the contents of thescript element to an external script, like a JS file.

No matter which method you choose, you must modify the HTTP header to add permission to access Yandex Metrica.

List of addresses

https://mc.yandex.ru
https://mc.yandex.az
https://mc.yandex.by
https://mc.yandex.co.il
https://mc.yandex.com
https://mc.yandex.com.am
https://mc.yandex.com.ge
https://mc.yandex.com.tr
https://mc.yandex.ee
https://mc.yandex.fr
https://mc.yandex.kg
https://mc.yandex.kz
https://mc.yandex.lt
https://mc.yandex.lv
https://mc.yandex.md
https://mc.yandex.tj
https://mc.yandex.tm
https://mc.yandex.ua
https://mc.yandex.uz
https://mc.webvisor.com
https://mc.webvisor.org
https://yastatic.net

Inserting the code snippet in the HTML code of site pages

Attention. The examples don't list all of the addresses that are necessary for Yandex Metrica to work. See the full list.

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 code snippet on the site's pages.
```
...

<script type="text/javascript" nonce="character sequence">
    (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||
    []).push(arguments)};
...
```
img-src to allow noscript element contents to be processed.
```
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;

child-src with the string blob: https://mc.yandex.ru for Session Replay, click map, link map, and scroll map to work correctly.
```
Content-Security-Policy: child-src blob: https://mc.yandex.ru;
```
frame-src with the string blob: https://mc.yandex.ru for Session Replay, click map, link map, and scroll map to work correctly.
```
Content-Security-Policy: frame-src blob: 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 code snippet

Attention. The examples don't list all of the addresses that are necessary for Yandex Metrica to work. See the full list.

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 to allow scripts to be processed.

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

img-src to allow noscript element contents to be processed.
```
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;

child-src with the string blob: https://mc.yandex.ru for Session Replay, click map, link map, and scroll map to work correctly.
```
Content-Security-Policy: child-src blob: https://mc.yandex.ru;
```
frame-src with the string blob: https://mc.yandex.ru for Session Replay, click map, link map, and scroll map to work correctly.
```
Content-Security-Policy: frame-src blob: 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 enables 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>

In the Yandex Metrica interface, go to the Tag section in Settings and copy the contents of the script element.

Add this snippet to the metrika.js file.

Example of file contents

(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||
[]).push(arguments)};
    m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)
[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
    (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym")
    ym(XXXXXX, "init", {
        id:XXXXXX,
        clickmap:true,
        trackLinks:true,
        accurateTrackBounce:true,
        ut:"noindex"
    });

Where XXXXXX is the Yandex Metrica tag ID.

In order for the tag 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 code snippet on the site isn't checked. On the page with the list of tags, the tag has the status: — “not installed on homepage, but data is being received”.

If you were unable to independently check the tag, follow the recommendations below.

Data is not sent to the consoleThere is data in the console, but the reports do not appear

This might happen for the following reasons:

The tag is installed incorrectly. For example, the CMS modified the code snippet. Reinstall the tag or contact the support service for your CMS.
Broken scripts are preventing the Yandex Metrica tag from working on the site. You can check this in the browser console.

This means that information is being transmitted to Yandex Metrica. However, the data might not be shown in reports for any of the following reasons:

Data is sent to a tag with a different number.
The Filters tab in the tag settings has overly strict filters defined. Remove unneeded filters.
The Filters tab in the tag settings has the Don't count my sessions filter enabled. This means that the tag doesn't register your own sessions. Try accessing the site with your browser in “incognito” mode.

Installing a tag on a Turbo page

Installing and setting up a tag on a site with AMP

Useful links

Contents

Inserting the code snippet in the HTML code of site pages Using an external script to connect the code snippet

Installing a tag on a Turbo page

Installing and setting up a tag on a site with AMP