Jak dodać Yandex Metrica do swojej strony internetowej? Instalacja krok po kroku, Webvisor i naprawa plakietki Informer

Jako niezależne studio gier lub twórca treści musisz wiedzieć, jakie artykuły czytają użytkownicy odwiedzający Twoją witrynę, gdzie klikają na stronie i jak wchodzą w interakcję z plakietkami Twoich gier w sklepach. Chociaż Google Analytics jest powszechnym standardem, Yandex Metrica (Yandex.Metrika) stanowi potężne narzędzie analityczne dla programistów dzięki darmowym funkcjom, takim jak Webvisor (nagrywanie i odtwarzanie sesji / Session Replay), mapa kliknięć (Clickmap), mapa przewijania (Scroll Map) oraz widżet licznika (Informer).

My w Arar Games, dostosowując nasz portal o tworzeniu gier Mayhem Corporation (mayhemcorporation.com), działający od 2011 roku, do urządzeń mobilnych (responsywny design), zauważyliśmy, że nasz licznik i graficzna plakietka Yandex Metrica z 2012 roku w lewym menu wyświetlają się jako uszkodzone.

Stara plakietka Yandex Metrica z 2012 roku pod adresem bs.yandex.ru, wyświetlająca się we współczesnych przeglądarkach jako uszkodzona ikona.

W tym poradniku przedstawiamy krok po kroku, jak utworzyć nowy tag w Yandex Metrica od podstaw, zintegrować zaktualizowany kod tag.js ze swoją witryną oraz naprawić uszkodzoną plakietkę Informer ze starego adresu bs.yandex.ru z zachowaniem ochrony przed AdBlockerem.

---

1. Tworzenie nowego tagu (Tag) w Yandex Metrica

Po zalogowaniu się na konto Yandex na stronie metrica.yandex.com, przechodzimy do ekranu Add tag (metrica.yandex.com/add), aby dodać nowy licznik witryny. Konfiguracja składa się z 3 podstawowych kroków:

Krok 1: Create Tag (Informacje o tagu i ustawienia Webvisora)

Na pierwszym ekranie konfigurujemy podstawowe informacje o tożsamości witryny i ustawienia regionalne:

1. Tag name: Wprowadź nazwę, która pozwoli Ci zidentyfikować projekt w panelu (np.: Mayhem Corporation).
2. Website URL: Wprowadź domenę główną swojej witryny bez protokołu (https://) (np.: mayhemcorporation.com).
3. Accept data only from the specified addresses: Koniecznie pozostaw to pole zaznaczone, aby uniemożliwić innym witrynom skopiowanie Twojego identyfikatora licznika i fałszowanie statystyk (ruch spamowy).
4. Including subdomains: Możesz zaznaczyć tę opcję, jeśli chcesz zbierać dane również z subdomen, takich jak blog.twojadomena.com, w tym samym liczniku.
5. Time zone & Currency: Wybierz swoją strefę czasową (np. (GMT+03:00) Istanbul) oraz walutę, np. TRY (lub USD), aby godziny dziennego resetowania liczby odwiedzających odpowiadały Twoim potrzebom.
6. Session Replay, scroll map, form analysis (Webvisor):

   💡 Kluczowa funkcja: Po aktywowaniu tej opcji Yandex Metrica pozwala obserwować ruchy kursora myszy odwiedzających, głębokość przewijania oraz klikane karty gier i artykułów w witrynie — niczym zanonimizowane nagranie wideo.

---

Krok 2: Fill Out the Profile (Konfiguracja profilu witryny)

W drugim kroku Yandex Metrica zadaje 5 krótkich pytań profilowych, aby precyzyjnie generować raporty porównawcze dla branży (benchmark):

1. Site Type (Typ witryny)

Jeśli prowadzisz portal zawierający głównie artykuły, poradniki techniczne, wiadomości lub dokumentację, wybierz Informational website (Website with text content); jeśli jest to bezpośrednia strona promocyjna aplikacji/gry, wybierz Promo website:

2. Industry (Branża)

W zależności od tematyki witryny wybierz technologię, media, kulturę/sztukę lub, jeśli nie ma dokładnego dopasowania na liście, opcję Other na samym dole:

3. CMS (System zarządzania treścią)

Jeśli Twoja witryna korzysta z gotowej platformy, takiej jak WordPress, Drupal, Joomla czy Wix, możesz wybrać ją z listy. Jeśli korzystasz z autorskiej architektury PHP/MySQL lub .NET, jak nasz portal Mayhem Corporation, wybierz opcję Other na dole listy:

4. System CRM

Jeśli nie korzystasz z żadnego korporacyjnego CRM, możesz kontynuować, wybierając w tym polu opcję Other (lub Without CRM):

5. Your Role in the Project (Twoja rola w projekcie)

Jeśli jesteś niezależnym deweloperem lub założycielem studia, wybierz Business management lub Product management i kliknij przycisk Continue:

---

Krok 3: Instalacja fragmentu kodu (tag.js)

W ostatnim kroku Yandex Metrica generuje zaktualizowany kod licznika JavaScript (tag.js), który należy umieścić między znacznikami <head> lub <body> witryny:

Struktura wygenerowanego zaktualizowanego kodu licznika wygląda następująco (zastąp YOUR_TAG_ID swoim numerem licznika):

<!-- 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 dodaniu kodu do głównego szablonu witryny (index.php lub header.php) i przesłaniu go na serwer kliknij przycisk "Check tag" na ekranie, aby sprawdzić, czy licznik działa na żywo, a następnie kliknij "Get started", aby przejść do panelu analitycznego.

---

2. Naprawa uszkodzonej plakietki graficznej Yandex Metrica (Informer) i ochrona przed AdBlockerem

Na stronach internetowych tworzonych w latach 2011–2014 kultowa turkusowa plakietka statystyk o wymiarach 88x31 pikseli (Informer) firmy Yandex Metrica była wywoływana za pośrednictwem starego adresu:

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

Ponieważ firma Yandex z biegiem lat wycofała serwer bs.yandex.ru oraz stary skrypt watch.js, adres ten zwraca teraz błąd HTTP 404 Not Found i powoduje wyświetlanie uszkodzonej ikony obrazka na stronie.

Rozwiązanie 1: Zaktualizowany punkt końcowy informer.yandex.ru

Aby plakietka działała, przekierowujemy źródło obrazu do aktualnej usługi Informer firmy Yandex (https://informer.yandex.ru/informer/...).

Rozwiązanie 2: Lokalny mechanizm zapasowy dla użytkowników z AdBlockerem (onerror)

Obecnie wielu graczy i deweloperów korzysta w przeglądarkach z rozszerzeń typu AdBlocker (uBlock Origin, Brave Shield itp.). Gdy programy blokujące reklamy blokują domeny analityczne, obraz plakietki może ponownie się nie załadować. Aby mieć pewność, że układ strony w żadnym wypadku nie ulegnie uszkodzeniu, przechowujemy kopię plakietki o wymiarach 88x31 pikseli na własnym serwerze (images/yandex_metrica_badge.png) i aktywujemy ją automatycznie za pomocą atrybutu 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 wprowadzeniu tej modyfikacji plakietka Yandex Metrica w lewym menu Mayhem Corporation jest wyświetlana zarówno w standardowych przeglądarkach ze statystykami na żywo, jak i w przeglądarkach z włączonym AdBlockerem bez uszkodzonej ikony:

Aktywna plakietka Yandex Metrica Informer w lewym menu na mayhemcorporation.com/mayhem/index.php po aktualizacji.

Turkusowa plakietka Informer 88x31 podsumowująca odsłony stron, wizyty i unikalnych użytkowników.

---

3. Nasza strona internetowa i gry (Arar Games)

Nasza strona internetowa

• Mayhem Corporation: Nasz portal internetowy z artykułami technicznymi na temat tworzenia gier oraz XNA / MonoGame.
  mayhemcorporation.com

Nasze gry

• Blocked: Pixel Panzer: Pikselowa gra akcji i zręcznościowa 2D z czołgami.
  Google Play | Microsoft Store
• Paint Trek: Kosmiczna gra zręcznościowo-logiczna 2D.
  Google Play | Microsoft Store
• Space Dodger: Zręcznościowa gra kosmiczna 2D oparta na refleksie.
  Google Play

Media społecznościowe

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