Як дадаць Yandex Metrica на ваш сайт: пакрокавае кіраўніцтва па ўсталёўцы, Webvisor і выпраўленне зламанага значка Informer

Як незалежная студыя распрацоўкі гульняў або стваральнік кантэнту, вымярэнне таго, якія артыкулы чытаюць наведвальнікі, куды яны націскаюць на старонцы і як узаемадзейнічаюць са значкамі крамы, надзвычай важна. Нягледзячы на тое, што Google Analytics з'яўляецца агульнапрынятым стандартам, Yandex Metrica (Yandex.Metrika) з'яўляецца магутным аналітычным інструментам для распрацоўшчыкаў дзякуючы бясплатным функцыям Webvisor (Запіс сесій / Session Replay), Карта клікаў (Clickmap), Карта пракруткі (Scroll Map) і Візуальны значок лічыльніка (Informer).

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

Адлюстраванне старога значка Yandex Metrica з адрасам bs.yandex.ru ад 2012 года як зламанай іконкі ў сучасных браўзерах.

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

---

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

Пасля ўваходу на metrica.yandex.com з вашым акаўнтам Yandex, пераходзім на экран 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.vashsait.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: Лакальны рэзервовы варыянт для наведвальнікаў з AdBlocker (onerror)

Сёння многія гульцы і распрацоўшчыкі выкарыстоўваюць 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:

Актыўны значок 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