Kako dodati Yandex Metrica na vaš veb-sajt: Vodič za instalaciju korak po korak, Webvisor i popravka Informer bedža

Kao nezavisni studio za razvoj igara ili kreator sadržaja, od ključne je važnosti pratiti koje članke posetioci čitaju, gde klikću na stranici i kako ostvaruju interakciju sa bedževima prodavnica aplikacija. Iako je Google Analytics opšteprihvaćeni standard, besplatne funkcije kao što su Webvisor (snimanje sesija / Session Replay), Mapa klikova (Clickmap), Mapa skrolovanja (Scroll Map) i vizuelni bedž brojača (Informer) čine Yandex Metrica (Yandex.Metrika) izuzetno moćnim analitičkim alatom za programere.

Mi u Arar Games smo, prilikom prilagođavanja za mobilne uređaje (responsive) našeg portala za razvoj igara Mayhem Corporation (mayhemcorporation.com), koji je aktivan od 2011. godine, primetili da naš Yandex Metrica brojač i vizuelni bedž u levom meniju iz 2012. godine više ne rade i prikazuju se kao slomljene slike.

Stari Yandex Metrica bedž iz 2012. godine sa adrese bs.yandex.ru koji se u savremenim pregledačima prikazuje kao slomljena ikona slike.

U ovom vodiču, korak po korak prikazujemo kako da kreirate novu oznaku (Tag) u Yandex Metrica od nule, integrišete aktuelni tag.js kod na svoj sajt i popravite oštećeni Informer bedž sa nekadašnjeg bs.yandex.ru uz zaštitu od blokatora reklama (AdBlocker).

---

1. Kreiranje nove oznake (Tag) u Yandex Metrica

Nakon prijave pomoću Yandex naloga na metrica.yandex.com, otvaramo ekran Add tag (metrica.yandex.com/add) kako bismo dodali novi brojač za veb-sajt. Podešavanje se sastoji od 3 osnovna koraka:

Korak 1: Create Tag (Podaci o oznaci i podešavanje Webvisor-a)

Na prvom ekranu konfigurišemo osnovni identitet sajta i regionalna podešavanja:

1. Tag name: Unesite prepoznatljiv naziv projekta za kontrolnu tablu (npr: Mayhem Corporation).
2. Website URL: Unesite glavni domen vašeg sajta bez protokola https:// (npr: mayhemcorporation.com).
3. Accept data only from the specified addresses: Obavezno ostavite ovo polje označeno kako biste sprečili druge sajtove da kopiraju vaš ID brojača i time kontaminiraju vašu statistiku neželjenim saobraćajem (spam traffic).
4. Including subdomains: Ovu opciju možete označiti ako želite da pratite i poddomene kao što je blog.vassajt.com unutar istog brojača.
5. Time zone & Currency: Izaberite odgovarajuću vremensku zonu (npr: (GMT+03:00) Istanbul) i valutu TRY (ili USD).
6. Session Replay, scroll map, form analysis (Webvisor):

   💡 Najvažnija funkcija: Kada aktivirate ovu opciju, Yandex Metrica vam omogućava da posmatrate kretanje kursora posetilaca, dubinu skrolovanja i klikove na kartice igara i članaka u obliku anonimizovanog video-zapisa.

---

Korak 2: Fill Out the Profile (Podešavanje profila sajta)

U drugom koraku Yandex Metrica postavlja 5 kratkih profilnih pitanja kako bi pravilno kreirala izveštaje industrijskog poređenja (benchmark):

1. Site Type (Tip veb-sajta)

Ako vodite portal usmeren na članke, tehničke vodiče, vesti ili dokumentaciju, izaberite Informational website (Website with text content); ako je to isključivo promotivna stranica za aplikaciju ili igru, izaberite Promo website:

2. Industry (Industrija)

U zavisnosti od sadržaja vašeg sajta, izaberite tehnologiju, medije, kulturu/umetnost ili opciju Other na dnu liste ako nema tačnog podudaranja:

3. CMS (Sistem za upravljanje sadržajem)

Ako vaš sajt koristi gotovu platformu kao što su WordPress, Drupal, Joomla ili Wix, možete je izabrati sa liste. Ako koristite sopstvenu prilagođenu PHP/MySQL ili .NET arhitekturu kao naš Mayhem Corporation portal, označite opciju Other na dnu liste:

4. CRM sistem

Ako ne koristite komercijalni CRM sistem, možete nastaviti biranjem opcije Other (ili Without CRM):

5. Your Role in the Project (Vaša uloga u projektu)

Ako ste nezavisni programer ili osnivač studija, označite Business management ili Product management i kliknite na dugme Continue:

---

Korak 3: Instalacija isečka koda (tag.js)

U poslednjem koraku Yandex Metrica generiše aktuelni JavaScript kod brojača (tag.js), koji postavljate između <head> ili <body> oznaka vašeg veb-sajta:

Struktura generisanog koda izgleda na sledeći način (umesto YOUR_TAG_ID biće naveden vaš ID brojača):

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

Nakon što dodate kod u glavni šablon sajta (index.php ili header.php) i pošaljete ga na server, možete kliknuti na dugme "Check tag" na ekranu da proverite rad brojača uživo, a zatim kliknite na "Get started" da biste prešli na kontrolnu tablu analitike.

---

2. Popravka oštećenog Yandex Metrica vizuelnog bedža (Informer) i zaštita od blokatora reklama (AdBlocker)

Na veb-sajtovima postavljenim između 2011. i 2014. godine, prepoznatljivi tirkizni statistički bedž Yandex Metrica veličine 88x31 piksela (Informer) pozivan je preko sledeće stare adrese:

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

Kako je Yandex vremenom ukinuo server bs.yandex.ru i staru skriptu watch.js, ova adresa sada vraća grešku HTTP 404 Not Found i na stranici prikazuje oštećenu ikonu slike.

Rešenje 1: Aktuelna krajnja tačka informer.yandex.ru

Da bi vizuelni bedž radio, izvor slike preusmeravamo na Yandex-ov aktuelni Informer servis (https://informer.yandex.ru/informer/...).

Rešenje 2: Lokalno rezervno rešenje (onerror) za posetioce koji koriste AdBlocker

Mnogi igrači i programeri danas u svojim pregledačima koriste AdBlocker (uBlock Origin, Brave Shield itd.). Kada programi za blokiranje oglasa blokiraju analitičke domene, slika bedža se ponovo ne može učitati. Kako se vizuelni izgled sajta ne bi narušio ni pod kojim uslovima, skladištimo kopiju bedža dimenzija 88x31 piksela na sopstvenom serveru (images/yandex_metrica_badge.png) i automatski je aktiviramo pomoću atributa 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 -->

Nakon ove izmene, Yandex Metrica bedž u levom meniju Mayhem Corporation portala prikazuje se i u uobičajenim pregledačima sa statistikom uživo i u pregledačima sa uključenim blokatorom reklama bez oštećene ikone:

Aktivni Yandex Metrica Informer bedž u levom meniju na mayhemcorporation.com/mayhem/index.php nakon ažuriranja.

Tirkizni Informer bedž dimenzija 88x31 koji prikazuje pregled prikaza stranica, poseta i jedinstvenih posetilaca.

---

3. Naš veb-sajt i naše igre (Arar Games)

Naš veb-sajt

• Mayhem Corporation: Naš veb portal sa tehničkim člancima o razvoju igara i arhitekturi XNA / MonoGame.
  mayhemcorporation.com

Naše igre

• Blocked: Pixel Panzer: 2D piksel arkadna akciona igra sa tenkovima.
  Google Play | Microsoft Store
• Paint Trek: 2D svemirska arkadna i zagonetna igra.
  Google Play | Microsoft Store
• Space Dodger: Dinamična 2D svemirska arkadna igra fokusirana na brze reflekse.
  Google Play

Društvene mreže

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