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

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

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

Подключить Яндекс Метрику к сайту очень просто. Переходим по ссылке 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), веб-разработчики предлагают такой код:

Читайте также:  10 полезных SEO-блогов: список

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

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

Оценка:
( 3 оценки, среднее 5 из 5 )
Виталий Крашенинин / автор статьи
Основатель блога, публицист, IT-специалист
Понравилась статья? Поделиться с друзьями:
Opt In Image
Хочешь первым получать свежую информацию от меня?
Тогда подписывайся ↓
Krasheninin IT Блог - все о веб-технологиях, и не только
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

8 − 3 =

>