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