Как добавить Яндекс Метрику на сайт: пошаговая установка, Вебвизор и исправление информера

Для независимой игровой студии или создателя контента крайне важно отслеживать, какие статьи читают посетители сайта, куда они кликают на страницах и как взаимодействуют со значками магазинов приложений. Хотя Google Analytics является общепринятым стандартом, благодаря бесплатным возможностям Webvisor (Вебвизор / запись сессий), Карте кликов (Clickmap), Карте скроллинга (Scroll Map) и визуальному информеру (Informer) сервис Yandex Metrica остается мощным аналитическим инструментом для разработчиков.

Мы в Arar Games во время адаптации под мобильные устройства (responsive) нашего портала о разработке игр Mayhem Corporation (mayhemcorporation.com), работающего с 2011 года, заметили, что установленный еще в 2012 году счетчик и информер Yandex Metrica в левом меню отображаются как битые изображения.

Старый информер Yandex Metrica 2012 года с адресом bs.yandex.ru, отображающийся как битая картинка в современных браузерах.

В этом руководстве мы пошагово расскажем, как создать новый тег (счетчик) в Yandex Metrica с нуля, интегрировать актуальный код tag.js на ваш сайт и восстановить сломанный информер со старого домена bs.yandex.ru с защитой от блокировщиков рекламы (AdBlocker).

---

1. Создание нового тега (счетчика) в Yandex Metrica

После авторизации под своим аккаунтом на metrica.yandex.com перейдите на экран Add tag (metrica.yandex.com/add), чтобы добавить новый счетчик для сайта. Настройка состоит из 3 основных шагов:

Шаг 1: Create Tag (Информация о счетчике и настройка Вебвизора)

На первом экране задаются базовые параметры идентификации сайта и региональные настройки:

1. Tag name: Укажите понятное имя проекта для панели управления (например: Mayhem Corporation).
2. Website URL: Введите основной домен сайта без указания протокола https:// (например: mayhemcorporation.com).
3. Accept data only from the specified addresses: Обязательно оставьте этот флажок включенным, чтобы другие сайты не могли скопировать ваш ID счетчика и загрязнять статистику спам-трафиком.
4. Including subdomains: Отметьте этот пункт, если хотите собирать данные с поддоменов (например, blog.yoursite.com) в один и тот же счетчик.
5. Time zone & Currency: Выберите подходящий часовой пояс (например, (GMT+03:00) Istanbul или ваш местный пояс) и валюту TRY (или USD).
6. Session Replay, scroll map, form analysis (Webvisor):

   💡 Самая важная функция: При включении этой опции Yandex Metrica позволяет просматривать движения мыши посетителей, глубину прокрутки страниц и клики по карточкам игр и статей в виде анонимизированной видеозаписи.

---

Шаг 2: Fill Out the Profile (Заполнение профиля сайта)

На втором шаге Yandex Metrica предлагает ответить на 5 коротких вопросов о проекте, чтобы формировать корректные отраслевые бенчмарки и отчеты:

1. Site Type (Тип сайта)

Если у вас портал со статьями, техническими руководствами, новостями или документацией, выберите Informational website (Website with text content); если это промо-страница приложения или игры, выберите Promo website:

2. Industry (Отрасль)

В зависимости от тематики вашего сайта выберите технологии, медиа, искусство/культуру или пункт Other внизу списка, если точного соответствия нет:

3. CMS (Система управления контентом)

Если ваш сайт работает на готовой платформе, такой как WordPress, Drupal, Joomla или Wix, выберите ее из списка. Если же вы используете собственную архитектуру на PHP/MySQL или .NET, как наш портал Mayhem Corporation, отметьте вариант Other в нижней части списка:

4. CRM-система

Если вы не используете коммерческую CRM-систему, выберите вариант Other (или Without CRM) и продолжите:

5. Your Role in the Project (Ваша роль в проекте)

Если вы независимый разработчик или основатель студии, выберите Business management или Product management и нажмите кнопку Continue:

---

Шаг 3: Установка фрагмента кода (tag.js)

На финальном этапе Yandex Metrica генерирует актуальный JavaScript-код счетчика (tag.js), который необходимо разместить между тегами <head> или <body> вашего сайта:

Структура актуального кода счетчика выглядит следующим образом (вместо YOUR_TAG_ID подставляется ваш номер счетчика):

<!-- Yandex.Metrika counter -->
<script type="text/javascript">
    (function(m,e,t,r,i,k,a){
        m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
        m[i].l=1*new Date();
        for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
        k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)
    })(window, document,'script','https://mc.yandex.ru/metrika/tag.js?id=YOUR_TAG_ID', 'ym');

    ym(YOUR_TAG_ID, 'init', {
        ssr:true,
        webvisor:true,
        clickmap:true,
        ecommerce:"dataLayer",
        referrer: document.referrer,
        url: location.href,
        accurateTrackBounce:true,
        trackLinks:true
    });
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/YOUR_TAG_ID" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->

После добавления кода в основной шаблон сайта (index.php или header.php) и загрузки изменений на сервер нажмите кнопку "Check tag" на экране, чтобы убедиться в работоспособности счетчика, после чего нажмите "Get started" для перехода в панель аналитики.

---

2. Восстановление неработающего информера Yandex Metrica и защита от AdBlocker

На сайтах, созданных в 2011–2014 годах, классический бирюзовый информер статистики Yandex Metrica размером 88x31 пикселей подключался по устаревшему адресу:

//bs.yandex.ru/informer/OLD_TAG_ID/3_1_3FFEEFFF_1FDECFFF_1_pageviews

Поскольку со временем Яндекс закрыл сервер bs.yandex.ru и вывел из эксплуатации старый скрипт watch.js, этот URL теперь возвращает ошибку HTTP 404 Not Found, из-за чего на странице отображается битая картинка.

Решение 1: Актуальная точка подключения informer.yandex.ru

Чтобы информер снова заработал, обновляем источник изображения на современный сервис информеров (https://informer.yandex.ru/informer/...).

Решение 2: Локальный фолбэк (onerror) для пользователей с AdBlocker

Сегодня многие игроки и разработчики используют блокировщики рекламы в браузере (AdBlocker: uBlock Origin, Brave Shields и др.). Когда блокировщик блокирует аналитические домены, изображение информера может снова не загрузиться. Чтобы дизайн страницы не ломался ни при каких обстоятельствах, мы размещаем копию информера размером 88x31 пикселей на собственном сервере (images/yandex_metrica_badge.png) и подключаем ее через атрибут onerror:

<!-- Yandex.Metrika informer -->
<a href="https://metrica.yandex.com/stat/?id=YOUR_TAG_ID&amp;from=informer"
   target="_blank" rel="nofollow">
   <img src="https://informer.yandex.ru/informer/YOUR_TAG_ID/3_1_3FFEEFFF_1FDECFFF_1_pageviews"
        onerror="this.onerror=null;this.src='images/yandex_metrica_badge.png';"
        style="width:88px; height:31px; border:0; border-radius:3px;"
        alt="Yandex.Metrica"
        title="Yandex.Metrica: bugünün verileri (gösterimler, ziyaretler ve tekil ziyaretçiler)"
        class="ym-advanced-informer" data-cid="YOUR_TAG_ID" data-lang="tr" />
</a>
<!-- /Yandex.Metrika informer -->

После этих правок информер Yandex Metrica в левом меню Mayhem Corporation корректно отображается как в обычных браузерах с живой статистикой, так и в браузерах с активным AdBlocker без битых значков:

Работающий информер Yandex Metrica в боковом меню mayhemcorporation.com/mayhem/index.php после обновления.

Бирюзовый информер 88x31, отображающий сводные данные о просмотрах страниц, визитах и уникальных посетителях.

---

3. Наш веб-сайт и наши игры (Arar Games)

Наш веб-сайт

• Mayhem Corporation: Наш портал с техническими статьями о разработке игр и архитектуре XNA / MonoGame.
  mayhemcorporation.com

Наши игры

• Blocked: Pixel Panzer: 2D пиксельный танковый аркадный экшен.
  Google Play | Microsoft Store
• Paint Trek: 2D космическая аркада и головоломка.
  Google Play | Microsoft Store
• Space Dodger: Динамичная 2D космическая аркада на реакцию.
  Google Play

Социальные сети

• TikTok: @arargamesstudio
• Instagram: @arargamesstudio
• X (Twitter): @arargamesstudio
• YouTube: @koreaaria
• Threads: @arargamesstudio
• Facebook: arargamesstudio