Installing a tag on a site with CSP
The tag code generated by Yandex Metrica is intended for inline insertion in the pages' HTML code. On sites that use Content Security Policy technology, this code will not run unless you take specific steps. In particular, you'll have 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 offers another way of enabling the code snippet: placing only the contents of the noscript
element in the HTML code of the pages and moving the contents of the script
element to an external script (for example, to 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.uz
https://mc.webvisor.com
https://mc.webvisor.org
https://yastatic.net
Inserting the tag code in the HTML code of site pages
Alert
The examples don’t list all of the addresses that are necessary for Yandex Metrica to work. See the full list.
If you want to 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 thescript
element for the counter code on the site's pages.... <!-- Yandex.Metrika counter --> <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 for processing the
noscript
element contents.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 maps, link maps, and scroll maps to work properly.Content-Security-Policy: child-src blob: https://mc.yandex.ru;
-
frame-src with the string
blob: https://mc.yandex.ru
for Session Replay, click maps, link maps, and scroll maps to work properly.Content-Security-Policy: frame-src blob: https://mc.yandex.ru;
-
frame-ancestors with the string
blob: https://mc.yandex.ru
for Session Replay, click maps, link maps, and scroll maps to work properly.Content-Security-Policy: frame-ancestors 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 tag code
Alert
The examples don’t list all of the addresses that are necessary for Yandex Metrica to work. See the full list.
If you're using this method, the Content-Security-Policy
or Content-Security-Policy-Report-Only
HTTP header can have a general set of directives, including rules for data import 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 for processing the
noscript
element contents.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 maps, link maps, and scroll maps to work properly.Content-Security-Policy: child-src blob: https://mc.yandex.ru;
-
frame-src with the string
blob: https://mc.yandex.ru
for Session Replay, click maps, link maps, and scroll maps to work properly.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 Settings > Tag and copy the contents of the
script
element from the field. -
Add this code 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 });
Where
XXXXXX
is a Yandex Metrica tag number. -
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>
Useful links |
Online training |
The code snippet consists of two parts: JavaScript code in the script
element, and HTML code in the noscript
element.