Ako pridať Yandex Metrica na vašu webovú stránku: Návod na inštaláciu krok za krokom, Webvisor a oprava Informer odznaku

Ako nezávislé herné štúdio alebo tvorca obsahu potrebujete vedieť, aké články čítajú návštevníci vášho webu, kde na stránke klikajú a ako interagujú s odznakmi odkazujúcimi na obchody s aplikáciami. Hoci Google Analytics predstavuje všeobecný štandard, vďaka bezplatným funkciám ako Webvisor (nahrávanie relácií / Session Replay), Klikacia mapa (Clickmap), Mapa posúvania (Scroll Map) a Vizuálny odznak počítadla (Informer) je Yandex Metrica (Yandex.Metrika) mimoriadne silným analytickým nástrojom pre vývojárov.

Ako tím v Arar Games sme pri prispôsobovaní nášho herného vývojárskeho portálu Mayhem Corporation (mayhemcorporation.com) pre mobilné zariadenia (responzívny dizajn), ktorý beží už od roku 2011, zistili, že naše počítadlo a vizuálny odznak Yandex Metrica v ľavom menu z roku 2012 sa zobrazujú ako poškodené ikony obrázkov.

Starý odznak Yandex Metrica z roku 2012 s adresou bs.yandex.ru, ktorý sa v moderných prehliadačoch zobrazuje ako poškodený obrázok.

V tomto návode vám krok za krokom ukážeme, ako od nuly vytvoriť novú značku (Tag) v Yandex Metrica, integrovať aktuálny kód tag.js do vašej stránky a opraviť poškodený Informer odznak zo starého servera bs.yandex.ru s ochranou proti blokovačom reklám (AdBlocker).

---

1. Vytvorenie novej značky (Tag) v Yandex Metrica

Po prihlásení sa pomocou svojho účtu Yandex na metrica.yandex.com prejdite na obrazovku Add tag (metrica.yandex.com/add), kde pridáte nové počítadlo webovej lokality. Nastavenie pozostáva z 3 základných krokov:

Krok 1: Create Tag (Informácie o značke a nastavenie Webvisora)

Na prvej obrazovke nastavíme základnú identitu lokality a regionálne predvoľby:

1. Tag name: Zadajte názov, ktorý vám umožní ľahko identifikovať projekt v paneli (Napr.: Mayhem Corporation).
2. Website URL: Zadajte hlavnú doménu vášho webu bez protokolu https:// (Napr.: mayhemcorporation.com).
3. Accept data only from the specified addresses: Určite nechajte toto pole začiarknuté, aby iné stránky nemohli skopírovať vaše ID počítadla a znečistiť vaše štatistiky nevyžiadanou návštevnosťou (spam traffic).
4. Including subdomains: Toto pole môžete začiarknuť, ak chcete v rámci rovnakého počítadla sledovať aj subdomény ako blog.vasweb.com.
5. Time zone & Currency: Zvoľte časové pásmo (napr.: (GMT+03:00) Istanbul) a menu TRY (alebo USD), aby sa denné štatistiky resetovali v správnom čase.
6. Session Replay, scroll map, form analysis (Webvisor):

   💡 Najdôležitejšia funkcia: Po aktivácii tejto možnosti vám Yandex Metrica umožní sledovať pohyby myšou návštevníkov, hĺbku posúvania stránky a kliknutia na karty hier/článkov vo forme anonymizovaného video záznamu.

---

Krok 2: Fill Out the Profile (Vyplnenie profilu lokality)

V druhom kroku vám Yandex Metrica položí 5 krátkych otázok o profile webu, aby mohla vytvárať presné porovnávacie správy v odvetví (benchmarking):

1. Site Type (Typ webu)

Ak prevádzkujete portál zameraný na články, technické návody, správy alebo dokumentáciu, vyberte Informational website (Website with text content); ak ide o priamu promo stránku aplikácie alebo hry, zvoľte Promo website:

2. Industry (Odvetvie)

Podľa obsahu vášho webu vyberte technológie, médiá, umenie/kultúru alebo možnosť Other na konci zoznamu, ak v ňom nenájdete presnú zhodu:

3. CMS (Systém na správu obsahu)

Ak váš web používa hotové riešenie ako WordPress, Drupal, Joomla alebo Wix, môžete ho vybrať zo zoznamu. Ak používate vlastnú architektúru postavenú na PHP/MySQL alebo .NET ako náš portál Mayhem Corporation, označte možnosť Other v dolnej časti zoznamu:

4. CRM systém

Ak nepoužívate komerčný CRM systém, vyberte aj v tejto časti možnosť Other (alebo Without CRM) a pokračujte:

5. Your Role in the Project (Vaša rola v projekte)

Ak ste nezávislý vývojár alebo zakladateľ štúdia, zvoľte Business management alebo Product management a kliknite na tlačidlo Continue:

---

Krok 3: Inštalácia úryvku kódu (tag.js)

V poslednom kroku Yandex Metrica vygeneruje aktuálny JavaScriptový kód počítadla (tag.js), ktorý vložíte medzi značky <head> alebo <body> vašej stránky:

Štruktúra vygenerovaného kódu vyzerá takto (namiesto YOUR_TAG_ID bude vaše ID počítadla):

<!-- 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 -->

Po pridaní kódu do hlavnej šablóny webu (index.php alebo header.php) a nahratí zmien na server môžete kliknúť na tlačidlo "Check tag" a overiť funkčnosť počítadla naživo, a potom kliknúť na "Get started" pre prechod na prehľad analytiky.

---

2. Oprava poškodeného vizuálneho odznaku Yandex Metrica (Informer) a ochrana pred AdBlockerom

Na webových stránkach vytvorených v rokoch 2011 až 2014 bol ikonický tyrkysový štatistický odznak Yandex Metrica s rozmermi 88x31 pixelov (Informer) volaný cez túto starú adresu:

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

Keďže Yandex v priebehu rokov odstavil server bs.yandex.ru a starý skript watch.js, táto adresa dnes vracia chybu HTTP 404 Not Found a na stránke vytvára ikonu poškodeného obrázka.

Riešenie 1: Aktuálny koncový bod informer.yandex.ru

Na obnovenie funkčnosti vizuálneho odznaku presmerujeme zdroj obrázka na modernú službu Informer od spoločnosti Yandex (https://informer.yandex.ru/informer/...).

Riešenie 2: Lokálna záloha (onerror) pre návštevníkov s blokovačom reklám

V súčasnosti mnohí hráči a vývojári používajú v prehliadači AdBlocker (uBlock Origin, Brave Shield atď.). Keď blokovače reklám zablokujú analytické domény, obrázok odznaku sa opäť nemusí načítať. Aby sa vizuálny vzhľad stránky za žiadnych okolností neporušil, uchovávame kópiu odznaku s rozmermi 88x31 pixelov na vlastnom serveri (images/yandex_metrica_badge.png) a pomocou atribútu onerror ju automaticky aktivujeme:

<!-- 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 -->

Po tejto úprave sa odznak Yandex Metrica v ľavom menu Mayhem Corporation zobrazuje v bežných prehliadačoch so živými štatistikami a v prehliadačoch so zapnutým AdBlockerom bez poškodenej ikony:

Aktívny odznak Yandex Metrica Informer v bočnom menu na mayhemcorporation.com/mayhem/index.php po aktualizácii.

Tyrkysový odznak Informer 88x31 sumarizujúci zobrazenia stránok, návštevy a unikátnych návštevníkov.

---

3. Naša webová stránka a naše hry (Arar Games)

Naša webová stránka

• Mayhem Corporation: Náš webový portál s technickými článkami o vývoji hier a XNA / MonoGame.
  mayhemcorporation.com

Naše hry

• Blocked: Pixel Panzer: 2D pixelová tanková akčná arkáda.
  Google Play | Microsoft Store
• Paint Trek: 2D vesmírna arkádová a logická hra.
  Google Play | Microsoft Store
• Space Dodger: Reflexná 2D vesmírna arkáda.
  Google Play

Sociálne siete

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