Як додати Yandex Metrica на свій вебсайт: Покрокове налаштування, Webvisor та виправлення бейджа Informer

Для незалежної студії розробки ігор чи автора контенту надзвичайно важливо аналізувати, які статті читають відвідувачі вашого вебсайту, куди саме на сторінці вони клікають та як взаємодіють із кнопками магазинів. Хоча Google Analytics є загальноприйнятим стандартом, завдяки безкоштовним функціям Webvisor (запис сесій / Session Replay), карті кліків (Clickmap), карті скролінгу (Scroll Map) та візуальному бейджу лічильника (Informer), сервіс Yandex Metrica (Yandex.Metrika) залишається потужним аналітичним інструментом для розробників.

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

Старий бейдж Yandex Metrica 2012 року з адресою bs.yandex.ru, що відображається у вигляді зламаної іконки в сучасних браузерах.

У цьому посібнику ми покроково розповідаємо, як створити новий тег (Tag) Yandex Metrica з нуля, інтегрувати актуальний код tag.js на свій сайт та відновити старий пошкоджений бейдж Informer з адреси bs.yandex.ru із захистом від AdBlocker.

---

1. Створення нового тегу (Tag) у Yandex Metrica

Увійшовши до свого облікового запису Yandex на metrica.yandex.com, перейдіть на екран Add tag (metrica.yandex.com/add), щоб додати новий лічильник вебсайту. Налаштування складається з 3 основних кроків:

Крок 1: Create Tag (Параметри тегу та налаштування Webvisor)

На першому екрані налаштовуються основні ідентифікаційні та регіональні параметри сайту:

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 коротких запитань про профіль для формування точних галузевих звітів (benchmark):

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 (Informer) та захист від AdBlocker

На вебсайтах, створених у 2011–2014 роках, культовий бірюзовий статистичний бейдж Yandex Metrica розміром 88x31 пікселів (Informer) підключався за такою старою адресою:

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

Оскільки з роками сервіс Yandex вивів з експлуатації сервер bs.yandex.ru та старий скрипт watch.js, ця адреса тепер повертає помилку HTTP 404 Not Found, викликаючи появу пошкодженої іконки на сторінці.

Рішення 1: Актуальна кінцева точка informer.yandex.ru

Щоб візуальний бейдж знову запрацював, ми спрямовуємо джерело зображення на оновлений сервіс Informer від Yandex (https://informer.yandex.ru/informer/...).

Рішення 2: Локальний резервний варіант (onerror) для відвідувачів з AdBlocker

Сьогодні багато геймерів і розробників використовують у браузерах AdBlocker (uBlock Origin, Brave Shield тощо). Коли блокувальники реклами блокують аналітичні домени, зображення бейджа також може не завантажитися. Щоб дизайн сайту не порушувався за жодних умов, ми зберігаємо локальну копію бейджа розміром 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.Metrika"
        title="Yandex.Metrika: 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 Informer у лівому меню mayhemcorporation.com/mayhem/index.php після оновлення.

Бірюзовий бейдж Informer розміром 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