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

Kao nezavisni studio za razvoj igara ili kreator sadržaja, mjerenje toga koje članke posjetioci čitaju, gdje kliknu na stranici i kako komuniciraju s bedževima vaše trgovine od izuzetne je važnosti. Iako je Google Analytics uobičajeni standard, Yandex Metrica (Yandex.Metrika) je izuzetno moćan analitički alat za programere zahvaljujući svojim besplatnim funkcijama kao što su Webvisor (Snimanje sesije / Session Replay), Mapa klikova (Clickmap), Mapa skrolovanja (Scroll Map) i Vizuelna značka brojača (Informer).

Mi u Arar Games-u, dok smo prilagođavali naš portal za razvoj igara Mayhem Corporation (mayhemcorporation.com)—koji je aktivan od 2011. godine—za mobilne uređaje (responsive), primijetili smo da se naš brojač i vizuelna značka Yandex Metrica iz 2012. godine u lijevom meniju prikazuju kao pokvarena ikona slike.

Prikaz stare Yandex Metrica značke iz 2012. godine sa adresom bs.yandex.ru kao pokvarene ikone u modernim pretraživačima.

U ovom vodiču korak po korak dijelimo kako kreirati novu Yandex Metrica oznaku (Tag) od nule, integrirati ažurirani tag.js kod na vašu web stranicu i popraviti pokvarenu Informer značku s adrese bs.yandex.ru uz zaštitu od AdBlocker-a.

---

1. Kreiranje nove oznake (Tag) u Yandex Metrica

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

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

Na prvom ekranu konfigurišemo osnovne postavke identiteta i regije naše stranice:

1. Tag name: Unesite naziv koji će vam pomoći da prepoznate svoj projekat na kontrolnoj tabli (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 stranice da kopiraju vaš ID brojača i zagađuju vaše statistike neželjenim saobraćajem (spam traffic).
4. Including subdomains: Možete označiti ako želite pratiti i poddomene kao što je blog.vasastranica.com pod istim brojačem.
5. Time zone & Currency: Odaberite (GMT+03:00) Istanbul (ili vašu lokalnu vremensku zonu) i valutu TRY (ili USD) kako bi se dnevno resetovanje posjetilaca podudaralo s vašim ciljanim rasporedom.
6. Session Replay, scroll map, form analysis (Webvisor):

   💡 Najkritičnija funkcija: Kada aktivirate ovu opciju, Yandex Metrica vam omogućava praćenje pokreta miša posjetilaca na stranici, dubine skrolovanja i kartica igara/članaka na koje su kliknuli, poput anonimiziranog video snimka sesije.

---

Korak 2: Fill Out the Profile (Konfiguracija profila stranice)

U drugom koraku, Yandex Metrica postavlja 5 kratkih profilnih pitanja radi generisanja tačnih industrijskih uporednih (benchmark) izvještaja:

1. Site Type (Vrsta stranice)

Ako vodite portal usmjeren na članke, tehničke vodiče, vijesti ili dokumentaciju, odaberite Informational website (Website with text content); ako je u pitanju direktna promotivna stranica aplikacije/igre, označite Promo website:

2. Industry (Industrija)

U zavisnosti od sadržaja vaše stranice, odaberite tehnologiju, medije, kulturu/umjetnost ili, ako na listi nema tačnog podudaranja, odaberite opciju Other na dnu:

3. CMS (Sistem za upravljanje sadržajem)

Ako vaša stranica koristi gotovu platformu kao što su WordPress, Drupal, Joomla ili Wix, možete je odabrati s liste. Ako koristite vlastitu prilagođenu PHP/MySQL ili .NET arhitekturu poput našeg Mayhem Corporation portala, označite opciju Other na dnu liste:

4. CRM sistem

Ako ne koristite korporativni CRM, možete nastaviti odabirom 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 isječka koda (tag.js)

U posljednjem koraku, Yandex Metrica generiše savremeni JavaScript kod brojača (tag.js) koji ćete postaviti između oznaka <head> ili <body> na vašoj stranici:

Struktura generisanog modernog koda za praćenje je sljedeća (gdje se YOUR_TAG_ID zamjenjuje vašim stvarnim brojem 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 vaše stranice (index.php ili header.php) i pošaljete ga na server, možete kliknuti na dugme "Check tag" na ekranu kako biste potvrdili da brojač radi uživo, a zatim kliknuti na "Get started" za prelazak na vašu analitičku kontrolnu tablu.

---

2. Popravak pokvarene vizuelne značke Yandex Metrica (Informer) i zaštita od AdBlocker-a

Na web stranicama kreiranim između 2011. i 2014. godine, legendarna tirkizna statistička značka veličine 88x31 piksela (Informer) kompanije Yandex Metrica pozivala se putem ove stare adrese:

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

Tokom godina, Yandex je ukinuo server bs.yandex.ru i staru skriptu watch.js, pa ova adresa sada vraća grešku HTTP 404 Not Found i stvara ikonu pokvarene slike na stranici.

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

Da biste prikazali vizuelnu značku, preusmjeravamo izvor slike na trenutni Yandex Informer servis (https://informer.yandex.ru/informer/...).

Rješenje 2: Lokalna rezervna opcija za posjetioce koji koriste AdBlocker (onerror)

Danas mnogi igrači i programeri koriste AdBlocker (uBlock Origin, Brave Shield itd.) u svojim pretraživačima. Kada blokatori reklama blokiraju analitičke domene, slika značke se možda opet neće učitati. Kako bi se spriječilo narušavanje dizajna u bilo kojim okolnostima, čuvamo kopiju značke veličine 88x31 piksela na našem vlastitom 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 ovog podešavanja, Yandex Metrica značka u lijevom meniju portala Mayhem Corporation prikazuje se s podacima uživo u standardnim pretraživačima i bez pokvarene ikone u pretraživačima sa uključenim AdBlocker-om:

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

Tirkizna Informer značka veličine 88x31 koja sumira preglede stranica, posjete i jedinstvene posjetioce.

---

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

Naša web stranica

• Mayhem Corporation: Naš web portal sa tehničkim člancima o razvoju igara, XNA i MonoGame tehnologijama.
  mayhemcorporation.com

Naše igre

• Blocked: Pixel Panzer: 2D piksel tankovska akciona i arkadna igra.
  Google Play | Microsoft Store
• Paint Trek: 2D svemirska arkadna igra i slagalica.
  Google Play | Microsoft Store
• Space Dodger: 2D svemirska arkadna igra fokusirana na reflekse.
  Google Play

Društvene mreže

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