Kako dodati Yandex Metrica na vašu web stranicu: Vodič za instalaciju korak po korak, Webvisor i popravak Informer značke

Kao nezavisni studio za razvoj igara ili kreator sadržaja, izuzetno je važno mjeriti koje članke posjetitelji vaše web stranice čitaju, gdje klikaju na stranici i kako komuniciraju sa značkama trgovina. Iako je Google Analytics uobičajeni standard, zahvaljujući besplatnim značajkama kao što su Webvisor (Snimanje sesije / Session Replay), Karta klikova (Clickmap), Karta pomicanja (Scroll Map) i Vizualna značka brojača (Informer), Yandex Metrica (Yandex.Metrika) predstavlja moćan analitički alat za programere.

Kao Arar Games, dok smo prilagođavali naš portal za razvoj igara Mayhem Corporation (mayhemcorporation.com), koji je online od 2011. godine, za mobilne uređaje (responsive), primijetili smo da su naš brojač i vizualna značka Yandex Metrica iz 2012. godine na lijevom izborniku prestali ispravno raditi.

Stara značka Yandex Metrica iz 2012. s adrese bs.yandex.ru koja se u modernim preglednicima prikazuje kao slomljena ikona.

U ovom vodiču korak po korak dijelimo kako stvoriti novu oznaku (Tag) u Yandex Metrica od nule, integrirati ažurirani kod tag.js na vašu web stranicu i popraviti neispravnu Informer značku sa starog poslužitelja bs.yandex.ru uz zaštitu od AdBlockera.

---

1. Stvaranje nove oznake (Tag) u Yandex Metrica

Nakon što se prijavite sa svojim Yandex računom na metrica.yandex.com, prelazimo na zaslon Add tag (metrica.yandex.com/add) kako bismo dodali novi brojač web stranice. Instalacija se sastoji od 3 osnovna koraka:

Korak 1: Create Tag (Podaci o oznaci i postavka Webvisora)

Na prvom zaslonu konfiguriramo osnovne postavke identiteta i regije naše web stranice:

1. Tag name: Unesite naziv koji će vam pomoći prepoznati projekt na upravljačkoj ploči (npr. Mayhem Corporation).
2. Website URL: Unesite glavnu domenu vaše web stranice bez protokola (https://) (npr. mayhemcorporation.com).
3. Accept data only from the specified addresses: Obavezno ostavite ovaj okvir označenim kako biste spriječili druge web stranice da kopiraju vaš ID brojača i onečiste vašu statistiku neželjenim prometom (spam).
4. Including subdomains: Možete označiti ako želite prikupljati podatke s poddomena poput blog.vasastranica.com unutar istog brojača.
5. Time zone & Currency: Odaberite odgovarajuću vremensku zonu (npr. (GMT+03:00) Istanbul) i valutu poput TRY (ili USD) kako bi se dnevno resetiranje posjetitelja uskladilo s vašim lokalnim vremenom.
6. Session Replay, scroll map, form analysis (Webvisor):

   💡 Najkritičnija značajka: Kada aktivirate ovu opciju, Yandex Metrica vam omogućuje praćenje kretanja miša posjetitelja, dubine pomicanja stranice i kartica igara/članaka na koje klikaju u obliku anonimiziranog videozapisa.

---

Korak 2: Fill Out the Profile (Konfiguriranje profila web stranice)

U drugom koraku Yandex Metrica postavlja 5 kratkih pitanja o profilu kako bi generirao točna izvješća o usporedbi industrije (benchmark):

1. Site Type (Vrsta web stranice)

Ako upravljate portalom usmjerenim uglavnom na članke, tehničke vodiče, vijesti ili dokumentaciju, odaberite Informational website (Website with text content); ako je to izravna promotivna stranica za aplikaciju/igru, možete odabrati Promo website:

2. Industry (Djelatnost)

Prema sadržaju vaše web stranice odaberite tehnologiju, medije, kulturu/umjetnost ili, ako na popisu nema točnog podudaranja, opciju Other na dnu:

3. CMS (Sustav za upravljanje sadržajem)

Ako vaša web stranica koristi gotovu platformu poput WordPressa, Drupala, Joomle ili Wixa, možete je odabrati s popisa. Ako koristite vlastitu prilagođenu PHP/MySQL ili .NET arhitekturu, poput našeg portala Mayhem Corporation, odaberite opciju Other na dnu popisa:

4. CRM sustav

Ako ne koristite korporativni CRM, možete nastaviti odabirom Other (ili Without CRM) u ovom polju:

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

Ako ste nezavisni programer ili osnivač studija, odaberite Business management ili Product management i kliknite gumb Continue:

---

Korak 3: Instalacija koda (tag.js)

U posljednjem koraku Yandex Metrica generira ažurirani JavaScript kod brojača (tag.js) koji ćete postaviti između oznaka <head> ili <body> vaše web stranice:

Struktura generiranog koda brojača je sljedeća (umjesto YOUR_TAG_ID dolazi vaš vlastiti 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 predložak vaše web stranice (index.php ili header.php) i pošaljete ga na poslužitelj, možete provjeriti radi li brojač uživo klikom na gumb "Check tag" na zaslonu, a zatim prijeći na svoju analitičku ploču klikom na "Get started".

---

2. Popravak neispravne vizualne značke Yandex Metrica (Informer) i zaštita od AdBlockera

Na web stranicama uspostavljenim između 2011. i 2014. godine, kultna tirkizna statistička značka dimenzija 88x31 piksela (Informer) tvrtke Yandex Metrica pozivala se putem sljedeće stare adrese:

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

Budući da je Yandex tijekom godina ukinuo poslužitelj bs.yandex.ru i staru skriptu watch.js, ova adresa sada vraća HTTP 404 Not Found i stvara ikonu neispravne slike na stranici.

Rješenje 1: Ažurirana krajnja točka informer.yandex.ru

Da bi vizualna značka ponovno radila, preusmjeravamo izvor slike na Yandexovu trenutnu uslugu Informer (https://informer.yandex.ru/informer/...).

Rješenje 2: Lokalna rezervna varijanta (onerror) za posjetitelje koji koriste AdBlocker

Danas mnogi igrači i programeri u svojim preglednicima koriste AdBlocker (uBlock Origin, Brave Shield itd.). Kada blokatori oglasa blokiraju analitičke domene, slika značke se možda opet neće uspjeti učitati. Kako bismo osigurali da dizajn ni pod kojim uvjetima ne bude narušen, na vlastitom poslužitelju čuvamo kopiju značke dimenzija 88x31 piksela (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 prilagodbe, značka Yandex Metrica u lijevom izborniku portala Mayhem Corporation prikazuje se i u uobičajenim preglednicima sa statistikom uživo i u preglednicima s uključenim AdBlockerom bez neispravnih ikona:

Aktivna Informer značka Yandex Metrica u lijevom izborniku na mayhemcorporation.com/mayhem/index.php nakon ažuriranja.

Tirkizna Informer značka 88x31 koja sažima preglede stranica, posjete i jedinstvene posjetitelje.

---

3. Naša web stranica i naše igre (Arar Games)

Naša web stranica

• Mayhem Corporation: Naš web portal s tehničkim člancima o razvoju igara i XNA / MonoGame tehnologiji.
  mayhemcorporation.com

Naše igre

• Blocked: Pixel Panzer: 2D pikselna tenkovska akcijska i arkadna igra.
  Google Play | Microsoft Store
• Paint Trek: 2D svemirska arkadna i puzzle igra.
  Google Play | Microsoft Store
• Space Dodger: 2D svemirska arkadna igra usmjerena na reflekse.
  Google Play

Društvene mreže

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