Jak přidat Yandex Metrica na váš web: Podrobný průvodce instalací, Webvisor a oprava odznaku Informer

Jako nezávislé herní studio nebo tvůrce obsahu potřebujete přesně měřit, které články návštěvníci vašeho webu čtou, kam na stránce klikají a jak interagují s odznaky obchodů s aplikacemi. Ačkoli je Google Analytics běžným standardem, díky bezplatným funkcím, jako jsou Webvisor (Nahrávání relací / Session Replay), Teplotní mapa kliknutí (Clickmap), Mapa posouvání (Scroll Map) a Vizuální odznak počítadla (Informer), představuje Yandex Metrica (Yandex.Metrika) pro vývojáře velmi výkonný analytický nástroj.

V týmu Arar Games jsme při úpravě našeho herního vývojářského portálu Mayhem Corporation (mayhemcorporation.com), který běží již od roku 2011, pro mobilní zařízení (responzivní design) zjistili, že naše počítadlo Yandex Metrica a vizuální odznak z roku 2012 v levém menu se již zobrazují poškozené.

Starý odznak Yandex Metrica z roku 2012 s adresou bs.yandex.ru, který se v moderních prohlížečích zobrazuje jako poškozená ikona obrázku.

V tomto návodu vám krok za krokem ukážeme, jak v nástroji Yandex Metrica vytvořit od nuly nový tag, integrovat aktuální kód tag.js na váš web a jak opravit nefunkční odznak Informer ze staré adresy bs.yandex.ru s ochranou proti AdBlockeru.

---

1. Vytvoření nového tagu v Yandex Metrica

Po přihlášení ke svému účtu Yandex na adrese metrica.yandex.com přejděte na obrazovku Add tag (metrica.yandex.com/add), kde přidáte nové počítadlo pro web. Instalace se skládá ze 3 základních kroků:

Krok 1: Create Tag (Informace o tagu a nastavení nástroje Webvisor)

Na první obrazovce nakonfigurujeme základní identifikační údaje a regionální nastavení našeho webu:

1. Tag name: Zadejte název, podle kterého svůj projekt v ovládacím panelu snadno poznáte (např.: Mayhem Corporation).
2. Website URL: Zadejte hlavní doménu vašeho webu bez protokolu (https://) (např.: mayhemcorporation.com).
3. Accept data only from the specified addresses: Tuto možnost nechte rozhodně zaškrtnutou, abyste zabránili jiným webům zkopírovat vaše ID počítadla a znečistit statistiky nevyžádanou návštěvností (spamem).
4. Including subdomains: Tuto možnost můžete zaškrtnout, pokud chcete pod stejným počítadlem shromažďovat data i ze subdomén, jako je blog.vassit.com.
5. Time zone & Currency: Zvolte odpovídající časové pásmo (např.: (GMT+03:00) Istanbul) a měnu, např. TRY (nebo USD), aby denní reset statistik návštěvníků odpovídal vašemu místnímu času.
6. Session Replay, scroll map, form analysis (Webvisor):

   💡 Klíčová funkce: Pokud tuto volbu aktivujete, Yandex Metrica vám umožní sledovat pohyby myší návštěvníků, hloubku posouvání stránky a karty her/článků, na které klikají, v podobě anonymizovaného videozáznamu.

---

Krok 2: Fill Out the Profile (Konfigurace profilu webu)

Ve druhém kroku položí Yandex Metrica 5 krátkých otázek týkajících se profilu webu, aby mohl generovat přesné srovnávací přehledy (benchmarky) v daném odvětví:

1. Site Type (Typ webu)

Pokud provozujete portál zaměřený na články, technické návody, zprávy nebo dokumentaci, zvolte Informational website (Website with text content); pokud jde o přímou propagační stránku aplikace nebo hry, vyberte Promo website:

2. Industry (Odvětví)

Podle zaměření webu vyberte technologie, média, kulturu/umění nebo, pokud v seznamu nenajdete přesnou shodu, zvolte možnost Other na konci:

3. CMS (Redakční systém)

Pokud váš web používá hotovou platformu, jako je WordPress, Drupal, Joomla nebo Wix, můžete ji vybrat ze seznamu. Pokud využíváte vlastní na míru napsanou architekturu v PHP/MySQL nebo .NET, jako náš portál Mayhem Corporation, zvolte možnost Other v dolní části:

4. Systém CRM

Pokud nepoužíváte žádný firemní CRM systém, můžete pokračovat výběrem Other (nebo Without CRM) v tomto poli:

5. Your Role in the Project (Vaše role v projektu)

Pokud jste nezávislý vývojář nebo zakladatel studia, vyberte Business management nebo Product management a klikněte na tlačítko Continue:

---

Krok 3: Instalace fragmentu kódu (tag.js)

V posledním kroku vygeneruje Yandex Metrica aktuální JavaScriptový kód počítadla (tag.js), který vložíte mezi značky <head> nebo <body> vašeho webu:

Struktura vygenerovaného kódu počítadla je následující (místo YOUR_TAG_ID bude uvedeno vaše číslo 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 přidání kódu do hlavní šablony webu (index.php nebo header.php) a nahrání na server můžete kliknutím na tlačítko "Check tag" na obrazovce ověřit, zda počítadlo na webu správně funguje, a poté pokračovat tlačítkem "Get started" do analytického přehledu.

---

2. Oprava poškozeného vizuálního odznaku Yandex Metrica (Informer) a ochrana proti AdBlockeru

Na webech vytvořených v letech 2011–2014 se ikonický tyrkysový statistický odznak o rozměrech 88x31 pixelů (Informer) od Yandex Metrica načítal přes tuto starou adresu:

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

Jelikož společnost Yandex server bs.yandex.ru a starý skript watch.js v průběhu let zrušila, tato adresa dnes vrací chybu HTTP 404 Not Found a na stránce vytváří ikonu nefunkčního obrázku.

Řešení 1: Aktuální koncový bod informer.yandex.ru

Abychom vizuální odznak zprovoznili, přesměrujeme zdroj obrázku na aktuální službu Informer od Yandexu (https://informer.yandex.ru/informer/...).

Řešení 2: Lokální záloha (onerror) pro návštěvníky s AdBlockerem

Mnoho hráčů a vývojářů dnes ve svém prohlížeči používá AdBlocker (uBlock Origin, Brave Shield apod.). Pokud blokátory reklam zablokují analytické domény, obrázek odznaku se nemusí načíst ani z nové adresy. Abychom zajistili, že se vzhled stránky za žádných okolností nerozbije, hostujeme kopii odznaku o rozměrech 88x31 pixelů na vlastním serveru (images/yandex_metrica_badge.png) a automaticky ji aktivujeme pomocí atributu 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 -->

Po této úpravě se odznak Yandex Metrica v levém menu portálu Mayhem Corporation zobrazuje jak v běžných prohlížečích s živými statistikami, tak i v prohlížečích s aktivním AdBlockerem bez jakýchkoli poškozených ikon:

Aktivní odznak Informer Yandex Metrica v levém menu portálu mayhemcorporation.com/mayhem/index.php po aktualizaci.

Tyrkysový odznak Informer o rozměrech 88x31 shrnující zobrazení stránek, návštěvy a unikátní návštěvníky.

---

3. Náš web a naše hry (Arar Games)

Náš web

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

Naše hry

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

Sociální sítě

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