Установка счетчика на сайт с CSP

Код счетчика, генерируемый Яндекс.Метрикой, предназначен для размещения внутри HTML-кода страниц (inline). На сайтах, которые используют технологию Content Security Policy, такой код будет исполняться только в том случае, если предприняты специальные действия. А именно, необходимо передавать браузеру в HTTP-заголовке разрешение на обработку данных: директивы src-script с атрибутом nonce (это требует подписывания содержимого элемента script) и img-src для обработки содержимого элемента noscript.

Кроме этого, Яндекс.Метрика допускает другой способ подключения кода счетчика. Вы можете разместить в HTML-коде страниц только содержимое элемента noscript, а содержимое элемента script вынести во внешний скрипт (например, в JS-файл).

При выборе любого способа необходимо добавить в HTTP-заголовок разрешение на обращение к Яндекс.Метрике.

Список адресов
  • 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

Размещение кода счетчика в HTML-коде страниц сайта

Внимание. В примерах прописаны не все адреса, необходимые для работы Метрики. См. общий список.
Если вы используете этот способ, HTTP-заголовок Content-Security-Policy или Content-Security-Policy-Report-Only должен содержать директивы:
  • script-src с атрибутом nonce. Этот атрибут должен содержать строковое значение в виде случайной последовательности символов (латинские буквы и цифры). Это значение должно быть сформировано на сервере случайным образом отдельно при каждом запросе.

    Content-Security-Policy: script-src 'nonce-<последовательность символов>';

    Эту же последовательность символов должен содержать атрибут nonce в элементе script кода счетчика на страницах сайта.

    ...
    <!-- Yandex.Metrika counter -->
    <script type="text/javascript" nonce="<последовательность символов>">
        (function (d, w, c) {
            (w[c] = w[c] || []).push(function() {
    ...
  • img-src — для разрешения обработки содержимого элемента noscript.

    Content-Security-Policy: img-src https://mc.yandex.ru;
  • connect-src — для подключения к Яндекс.Метрике.

    Content-Security-Policy: connect-src https://mc.yandex.ru;
  • child-src с указанием строки blob: https://mc.yandex.ru для правильной работы Вебвизора, карт кликов, ссылок и скроллинга.
    Content-Security-Policy: child-src blob: https://mc.yandex.ru;
  • frame-src с указанием строки blob: https://mc.yandex.ru для правильной работы Вебвизора, карт кликов, ссылок и скроллинга.
    Content-Security-Policy: frame-src blob: https://mc.yandex.ru;

Пример HTTP-заголовка при использовании данного способа:

Content-Security-Policy:
 ...
 img-src https://mc.yandex.ru;
 script-src https://mc.yandex.ru https://yastatic.net 'nonce-<последовательность символов>';
 connect-src https://mc.yandex.ru;
 ...

Подключение кода счетчика с помощью внешнего скрипта

Внимание. В примерах прописаны не все адреса, необходимые для работы Метрики. См. общий список.

Если вы используете этот способ, HTTP-заголовок Content-Security-Policy или Content-Security-Policy-Report-Only может иметь общий набор директив, включая правила для загрузки данных от Яндекс.Метрики:

  • script-src для разрешения обработки скриптов.

    Content-Security-Policy: script-src https://mc.yandex.ru https://yastatic.net;
  • img-src — для разрешения обработки содержимого элемента noscript.

    Content-Security-Policy: img-src https://mc.yandex.ru;
  • connect-src — для подключения к Яндекс.Метрике.

    Content-Security-Policy: connect-src https://mc.yandex.ru;
  • child-src с указанием строки blob: https://mc.yandex.ru для правильной работы Вебвизора, карт кликов, ссылок и скроллинга.
    Content-Security-Policy: child-src blob: https://mc.yandex.ru;
  • frame-src с указанием строки blob: https://mc.yandex.ru для правильной работы Вебвизора, карт кликов, ссылок и скроллинга.
    Content-Security-Policy: frame-src blob: https://mc.yandex.ru;

Пример HTTP-заголовка при использовании данного способа:

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;
 ...

Ниже представлен пример подключения JavaScript-кода во внешнем JS-файле. При этом в HTML-код страниц сайта необходимо добавить только элемент script с атрибутом src. Этот атрибут должен содержать путь к файлу (например, metrika.js).

<script type="text/javascript" src="/metrika.js"></script>
  1. В интерфейсе Яндекс.Метрики перейдите в раздел Настройка (вкладка Код счётчика) и скопируйте из поля содержимое элемента script.
  2. Добавьте этот код в файл metrika.js.

    Пример содержимого файла
    (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");

    Где XXXXXX — номер счетчика Яндекс.Метрики.

  3. Чтобы счетчик собирал данные о посетителях, у которых отключен JavaScript, добавьте в HTML-код страниц сайта содержимое элемента noscript:

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

В данном случае проверка кода счетчика на сайте не будет работать. На странице со списком счетчиков у счетчика будет статус: «не установлен на главной странице, но данные поступают».