Встановлення лічильника на сайт CSP

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

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

Під час вибору будь-якого методу необхідно додати в HTTP-заголовок дозвіл на звернення до Яндекс.Метрики за адресами: https://mc.yandex.ru (для загальної роботи лічильника) і 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 із зазначенням адреси Яндекс.Метрики mc.yandex.ru для дозволу обробки вмісту елемента noscript.

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

    Content-Security-Policy: connect-src 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 із зазначенням адрес https://mc.yandex.ru і https://yastatic.net для дозволу обробки скриптів.

    Content-Security-Policy: script-src https://mc.yandex.ru https://yastatic.net;
  • img src із зазначенням адреси Яндекс.Метрики mc.yandex.ru для дозволу обробки вмісту елемента noscript.

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

    Content-Security-Policy: connect-src 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> 

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