Код Яндекс Метрики: разбираем в деталях

В сегодняшнем выпуске разберем детально код счетчика Яндекс Метрики – из каких функций состоит, как его оптимизировать и настроить для быстрой загрузки на сайте.

Содержание

Как подключить счетчик Яндекс Метрики?
Оптимизация кода Яндекс Метрики
Код Яндекс Метрики

Как подключить счетчик Яндекс Метрики?

Подключить Яндекс Метрику к сайту очень просто. Переходим по ссылке https://metrika.yandex.ru/ и кликаем по кнопке “Добавить счетчик”:

Далее стандартно указываем домен, задаем настройки счетчика:

Нажимаем “Создать счетчик” и Яндекс Метрика выдаст веб-код, который нужно поместить на сайте между тегами <head></head> или <body></body>.

Этот код будет отслеживать количество посетителей на сайте, источник трафика и действия: переходы, время пребывания, “шаринг” в соцсетях, отказы и многое другое.

Оптимизация кода Яндекс Метрики

Скажу сразу, что код Метрики лучше помещать не в начале, а в конце страницы, перед закрывающим тегом </body>, чтобы не замедлялся рендеринг хедера, в котором обычно размещается подключение основных скриптов и модулей веб-сайта.

Рекомендую не включать Вебвизор, карту скроллинга и аналитику форм, если в этом нет особой необходимости – все это замедляет загрузку страниц сайта, что может негативно сказаться на ранжировании в Google.

Для сайтов, рассчитанных на аудиторию в Украине, где сервисы Яндекса заблокированы, рекомендуется включить опцию “Альтернативный СDN”:

Таким образом, основной java script Яндекс Метрики будет загружаться через альтернативный сервер, который не заблокирован в Украине. В коде это строка s.src=. При включенной опции “Альтернативный CDN” она будет выглядеть так:

s.src = "https://cdn.jsdelivr.net/npm/yandex-metrica-watch/watch.js";

В случае, если код Яндекс Метрики все ровно грузится с задержкой или ошибками (проверить это можно в режиме Консоли браузера – вызов CTRL+SHIFT+I), веб-разработчики предлагают такой код:

s.src = "https://d31j93rd8oukbv.cloudfront.net/metrika/watch_ua.js";

Также вебмастера рекомендуют убрать строчку:

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

По словам данного источника, она не влияет на сбор данных статистики, а удаление этой части кода решает проблему долго грузящейся страницы у посетителей из Украины.

Код Яндекс Метрики

Итак, в итоге получаем код Яндекс Метрики, который нужно разместить на сайте:

Разберем его детально:

id – идентификационный номер счетчика;
clickmap – карта кликов;
tracklinks – сбор статистики на внешние ресурсы, данные о нажатии на кнопку “Поделиться” в соцсетях;
accurateTrackBounce – точное отслеживание отказов;
s.async=true – включение асинхронного кода;
s.src – источник загрузки скрипта отслеживания Яндекс Метрики;
<noscript> – я лично не понял за что отвечает эта строчка кода, но нашел в интернете такое обьяснение: “…этот кусок кода срабатывает, если в браузере заблокирован обработчик JS и, в этом случае, просто происходит вызов именной страницы счетчика на сайте яндекса по адресу //mc.yandex.ru/watch/12345678 что, по-видимому, вызывает инкремент счетчика на стороне сервера яндекса.” (источник).

Мой конечный код Яндекс Метрики выглядит так:


<!-- Yandex.Metrika counter -->
<script type="text/javascript" >
(function (d, w, c) {
(w = w || []).push(function() {
try {
w.yaCounter53748563 = new Ya.Metrika({
id:ваш айди,
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://cdn.jsdelivr.net/npm/yandex-metrica-watch/watch.js";

if (w.opera == "[object Opera]") {
d.addEventListener("DOMContentLoaded", f, false);
} else { f(); }
})(document, window, "yandex_metrika_callbacks");
</script>
<!-- /Yandex.Metrika counter -->

Если у кого-то есть какие-то замечания, подсказки – напишите, пожалуйста, в комментариях!