Как да добавите 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 г., емблематичната тюркоазена статистическа значка с размер 88x31 пиксела (Informer) на Yandex Metrica беше извиквана чрез следния стар адрес:

//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.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 без счупени икони:

Активна Informer значка на Yandex Metrica в лявото меню на 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