Cum se Adaugă Yandex Metrica pe Site-ul Tău: Ghid de Instalare Pas cu Pas, Webvisor și Repararea Insignei Informer

În calitate de studio independent de jocuri sau creator de conținut, este esențial să măsori ce articole citesc vizitatorii care îți accesează site-ul, unde fac clic pe pagină și cum interacționează cu insignele magazinelor tale de aplicații. Deși Google Analytics este un standard foarte răspândit, prin funcțiile sale gratuite precum Webvisor (Înregistrarea sesiunilor / Session Replay), Harta de clicuri (Clickmap), Harta de derulare (Scroll Map) și Insigna vizuală de contor (Informer), Yandex Metrica (Yandex.Metrika) reprezintă un instrument analitic puternic pentru dezvoltatori.

Ca echipă la Arar Games, în timp ce adaptam pentru dispozitive mobile (responsive) portalul nostru de dezvoltare de jocuri Mayhem Corporation (mayhemcorporation.com), activ încă din 2011, am observat că insigna vizuală și contorul Yandex Metrica din meniul nostru din stânga, ce datau din 2012, apăreau ca fiind deteriorate.

Insigna veche Yandex Metrica din 2012 cu adresa bs.yandex.ru apărând ca o pictogramă de imagine coruptă în browserele moderne.

În acest ghid, împărtășim pas cu pas modul în care poți crea o etichetă nouă (Tag) Yandex Metrica de la zero, integrarea codului modern tag.js pe site-ul tău și repararea insignei vechi Informer de pe bs.yandex.ru cu protecție împotriva AdBlocker-elor.

---

1. Crearea unei Noi Etichete (Tag) în Yandex Metrica

După conectarea cu contul tău Yandex pe metrica.yandex.com, mergem la ecranul Add tag (metrica.yandex.com/add) pentru a adăuga un contor nou pentru un site web. Configurarea cuprinde 3 pași principali:

Pasul 1: Create Tag (Informații despre etichetă și configurarea Webvisor)

Pe primul ecran configurăm identitatea de bază a site-ului și setările regionale:

1. Tag name: Introdu un nume care să te ajute să identifici proiectul în panou (Ex: Mayhem Corporation).
2. Website URL: Introdu domeniul principal al site-ului tău fără protocolul https:// (Ex: mayhemcorporation.com).
3. Accept data only from the specified addresses: Asigură-te că lași această căsuță bifată pentru a împiedica alte site-uri să îți copieze ID-ul de contor și să îți distorsioneze statisticile (trafic spam).
4. Including subdomains: Poți bifa această opțiune dacă dorești să colectezi datele subdomeniilor precum blog.siteultau.com în același contor.
5. Time zone & Currency: Selectează fusul orar potrivit pentru raportare (de exemplu, (GMT+03:00) Istanbul) și moneda TRY (sau USD).
6. Session Replay, scroll map, form analysis (Webvisor):

   💡 Cea mai critică funcție: Când activezi această opțiune, Yandex Metrica îți permite să vizionezi mișcările mouse-ului vizitatorilor, adâncimea de derulare și elementele/cardurile de articole pe care dau clic, sub forma unei înregistrări video anonimizate.

---

Pasul 2: Fill Out the Profile (Configurarea profilului site-ului)

La al doilea pas, Yandex Metrica adresează 5 scurte întrebări de profil pentru a genera corect rapoartele de comparare industrială (benchmarking):

1. Site Type (Tipul site-ului)

Dacă administrezi un portal axat pe articole, ghiduri tehnice, știri sau documentație, alege Informational website (Website with text content); dacă este o pagină dedicată exclusiv promovării unei aplicații sau a unui joc, selectează Promo website:

2. Industry (Domeniul de activitate)

În funcție de conținutul site-ului, alege tehnologie, media, cultură/artă sau, dacă nu există o opțiune identică în listă, alege opțiunea de jos Other:

3. CMS (Sistemul de gestionare a conținutului)

Dacă site-ul folosește o platformă existentă precum WordPress, Drupal, Joomla sau Wix, o poți alege din listă. Dacă folosești o arhitectură proprietară scrisă în PHP/MySQL sau .NET, precum portalul nostru Mayhem Corporation, bifează opțiunea Other din partea de jos a listei:

4. Sistem CRM

Dacă nu utilizezi un sistem CRM comercial, poți continua selectând Other (sau Without CRM):

5. Your Role in the Project (Rolul tău în proiect)

Dacă ești un dezvoltator independent sau fondatorul studioului, alege Business management sau Product management și apasă butonul Continue:

---

Pasul 3: Instalarea fragmentului de cod (tag.js)

La ultimul pas, Yandex Metrica generează codul JavaScript actualizat al contorului (tag.js), pe care îl vei plasa între etichetele <head> sau <body> ale site-ului tău:

Structura codului modern generat arată astfel (în locul YOUR_TAG_ID va apărea propriul tău identificator de contor):

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

După adăugarea codului în șablonul principal al site-ului (index.php sau header.php) și încărcarea pe server, poți verifica dacă acesta funcționează apăsând butonul "Check tag" de pe ecran, apoi poți trece la panoul de analiză apăsând "Get started".

---

2. Repararea Insignei Vizuale Yandex Metrica Deteriorate (Informer) și Protecția AdBlocker

Pe site-urile web create între anii 2011 și 2014, emblematica insignă turcoaz cu statistici 88x31 pixeli (Informer) a Yandex Metrica era apelată prin următoarea adresă învechită:

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

Deoarece Yandex a retras în timp serverul bs.yandex.ru și vechiul script watch.js, această adresă returnează acum HTTP 404 Not Found și generează o pictogramă de imagine lipsă pe pagină.

Soluția 1: Punctul Final Modern informer.yandex.ru

Pentru a face insigna vizuală funcțională, redirecționăm sursa imaginii către serviciul modern Informer al Yandex (https://informer.yandex.ru/informer/...).

Soluția 2: Fallback Local (onerror) pentru Vizitatorii cu AdBlocker

Astăzi, mulți jucători și dezvoltatori utilizează un AdBlocker (uBlock Origin, Brave Shields etc.) în browser. Când extensiile de blocare a reclamelor opresc domeniile de analiză web, insigna poate eșua din nou la încărcare. Pentru ca designul paginii să nu se degradeze în nicio situație, stocăm o copie a insignei de 88x31 pixeli pe propriul nostru server (images/yandex_metrica_badge.png) și o activăm automat prin atributul 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 -->

După această ajustare, insigna Yandex Metrica din meniul lateral al Mayhem Corporation este afișată atât în browserele obișnuite cu statistici în timp real, cât și în browserele cu AdBlocker activat, fără pictograme de imagine lipsă:

Insigna activă Yandex Metrica Informer în meniul lateral pe mayhemcorporation.com/mayhem/index.php după actualizare.

Insigna turcoaz Informer de 88x31 ce sintetizează afișările de pagină, vizitele și vizitatorii unici.

---

3. Site-ul Nostru și Jocurile Noastre (Arar Games)

Site-ul Nostru

• Mayhem Corporation: Portalul nostru web ce conține articole tehnice despre dezvoltarea jocurilor și XNA / MonoGame.
  mayhemcorporation.com

Jocurile Noastre

• Blocked: Pixel Panzer: Joc 2D pixel arcade de acțiune cu tancuri.
  Google Play | Microsoft Store
• Paint Trek: Joc arcade 2D și puzzle cu tematică spațială.
  Google Play | Microsoft Store
• Space Dodger: Joc arcade 2D în spațiu axat pe reflexe rapide.
  Google Play

Rețele Sociale

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