Установка счетчика на сайт с 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.uz
- https://mc.webvisor.com
- https://mc.webvisor.org
- https://yastatic.net
Размещение кода счетчика в HTML-коде страниц сайта
script-src с атрибутом nonce. Этот атрибут должен содержать строковое значение в виде случайной последовательности символов (латинские буквы и цифры). Это значение должно быть сформировано на сервере случайным образом отдельно при каждом запросе.
Content-Security-Policy: script-src 'nonce-<последовательность символов>';
Эту же последовательность символов должен содержать атрибут nonce в элементе script кода счетчика на страницах сайта.
... <!-- Yandex.Metrika counter --> <script type="text/javascript" nonce="<последовательность символов>"> (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a|| []).push(arguments)}; ...
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;
- frame-ancestors с указанием строки blob: https://mc.yandex.ru для правильной работы Вебвизора, карт кликов, ссылок и скроллинга.
Content-Security-Policy: frame-ancestors 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>
- В интерфейсе Яндекс Метрики перейдите в раздел Настройка (вкладка Счетчик) и скопируйте из поля содержимое элемента
script
. Добавьте этот код в файл metrika.js.
Пример содержимого файла(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 });
Где
XXXXXX
— номер счетчика Яндекс Метрики.Чтобы счетчик собирал данные о посетителях, у которых отключен JavaScript, добавьте в HTML-код страниц сайта содержимое элемента noscript:
<noscript><div><img src="https://mc.yandex.ru/watch/XXXXXX" style="position:absolute; left:-9999px;" alt="" /></div></noscript>