Всем привет! В сегодняшнем выпуске разберем детально код счетчика Яндекс Метрики — из каких функций состоит, как его оптимизировать и настроить для быстрой загрузки на сайте.
Как подключить счетчик Яндекс Метрики?
Подключить Яндекс Метрику к сайту очень просто. Переходим по ссылке 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 -->
Если у кого-то есть какие-то замечания, подсказки — пишите в комментариях!
