Kā pievienot Yandex Metrica savai vietnei? Soli pa solim uzstādīšana, Webvisor un Informer nozīmītes labošana

Kā neatkarīgai spēļu studijai vai satura veidotājam ir ļoti svarīgi izmērīt, kurus rakstus lasa jūsu vietnes apmeklētāji, kur lapā viņi noklikšķina un kā viņi mijiedarbojas ar jūsu veikala nozīmītēm. Lai gan Google Analytics ir plaši izplatīts standarts, Yandex Metrica (Yandex.Metrika) ir jaudīgs analītikas rīks izstrādātājiem ar tādām bezmaksas funkcijām kā Webvisor (sesiju ierakstīšana / Session Replay), klikšķu karte (Clickmap), ritināšanas karte (Scroll Map) un vizuālā skaitītāja nozīmīte (Informer).

Kā Arar Games, pielāgojot mobilo ierīču prasībām (responsive) mūsu spēļu izstrādes portālu Mayhem Corporation (mayhemcorporation.com), kas darbojas kopš 2011. gada, mēs pamanījām, ka mūsu 2012. gada Yandex Metrica skaitītājs un vizuālā nozīmīte kreisajā izvēlnē vairs nedarbojas un izskatās bojāti.

2012. gada vecā Yandex Metrica nozīmīte ar adresi bs.yandex.ru mūsdienu pārlūkprogrammās parādās kā bojāta ikona.

Šajā ceļvedī mēs soli pa solim parādām, kā no jauna izveidot Yandex Metrica birku (Tag), integrēt jaunāko tag.js kodu savā vietnē un salabot veco, bojāto Informer nozīmīti, kas nāk no bs.yandex.ru, ar AdBlocker aizsardzību.

---

1. Jaunas birkas (Tag) izveide pakalpojumā Yandex Metrica

Pēc pieteikšanās vietnē metrica.yandex.com ar savu Yandex kontu dodieties uz ekrānu Add tag (metrica.yandex.com/add), lai pievienotu jaunu vietnes skaitītāju. Uzstādīšana sastāv no 3 galvenajiem soļiem:

1. solis: Create Tag (Birkas informācija un Webvisor iestatījumi)

Pirmajā ekrānā mēs konfigurējam vietnes pamata identitātes un reģionālos iestatījumus:

1. Tag name: Ievadiet nosaukumu, kas palīdzēs jums identificēt projektu panelī (piemēram: Mayhem Corporation).
2. Website URL: Ievadiet savas vietnes galveno domēnu bez protokola (https://) (piemēram: mayhemcorporation.com).
3. Accept data only from the specified addresses: Noteikti atstājiet šo izvēles rūtiņu atzīmētu, lai citas vietnes nenokopētu jūsu skaitītāja ID un nesabojātu jūsu statistiku (surogātpasta datplūsma / spam traffic).
4. Including subdomains: Varat atzīmēt šo opciju, ja vēlaties apkopot tādus apakšdomēnus kā blog.yoursite.com tajā pašā skaitītājā.
5. Time zone & Currency: Izvēlieties atbilstošo laika joslu (piemēram: (GMT+03:00) Istanbul) un valūtu kā TRY (vai USD).
6. Session Replay, scroll map, form analysis (Webvisor):

   💡 Kritiskākā funkcija: Kad šī opcija ir iespējota, Yandex Metrica ļauj jums kā anonimizētu videoierakstu vērot apmeklētāju peles kustības, ritināšanas dziļumu un to, uz kurām spēļu/rakstu kartītēm viņi noklikšķina.

---

2. solis: Fill Out the Profile (Vietnes profila konfigurēšana)

Otrajā solī Yandex Metrica uzdod 5 īsus profila jautājumus, lai precīzi ģenerētu jūsu vietnes nozares etalonuzdevumu (benchmark) ziņojumus:

1. Site Type (Vietnes veids)

Ja pārvaldāt portālu, kas galvenokārt balstīts uz rakstiem, tehniskiem ceļvežiem, ziņām vai dokumentāciju, atlasiet Informational website (Website with text content); ja tā ir tieša lietotnes/spēles reklāmas lapa, izvēlieties Promo website:

2. Industry (Nozare)

Atkarībā no jūsu vietnes satura izvēlieties tehnoloģijas, medijus, kultūru/mākslu vai, ja sarakstā nav precīzas atbilstības, apakšā atlasiet opciju Other:

3. CMS (Satura pārvaldības sistēma)

Ja jūsu vietne izmanto gatavu platformu, piemēram, WordPress, Drupal, Joomla vai Wix, varat to izvēlēties no saraksta. Ja izmantojat pašu izstrādātu pielāgotu PHP/MySQL vai .NET arhitektūru kā mūsu Mayhem Corporation portāls, saraksta apakšā atlasiet Other:

4. CRM sistēma

Ja neizmantojat nevienu korporatīvo CRM, šajā laukā varat turpināt, izvēloties Other (vai Without CRM):

5. Your Role in the Project (Jūsu loma projektā)

Ja esat neatkarīgs izstrādātājs vai studijas dibinātājs, atlasiet Business management vai Product management un noklikšķiniet uz pogas Continue:

---

3. solis: Koda fragmenta uzstādīšana (tag.js)

Pēdējā solī Yandex Metrica ģenerē jaunāko JavaScript skaitītāja kodu (tag.js), ko ievietot starp jūsu vietnes <head> vai <body> tagiem:

Atjauninātā skaitītāja koda struktūra ir šāda (YOUR_TAG_ID vietā tiek norādīts jūsu skaitītāja numurs):

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

Pēc koda pievienošanas vietnes galvenajai veidnei (index.php vai header.php) un augšupielādes serverī varat pārbaudīt, vai skaitītājs darbojas reāllaikā, noklikšķinot uz ekrānā redzamās pogas "Check tag", un pāriet uz analītikas paneli, nospiežot "Get started".

---

2. Bojātās Yandex Metrica vizuālās nozīmītes (Informer) labošana un AdBlocker aizsardzība

Vietnēs, kas izveidotas laikā no 2011. līdz 2014. gadam, Yandex Metrica ikoniskā 88x31 pikseļu tirkīza statistikas nozīmīte (Informer) tika izsaukta, izmantojot šo veco adresi:

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

Tā kā Yandex gadu gaitā ir pārtraucis servera bs.yandex.ru un vecā watch.js skripta darbību, šī adrese tagad atgriež kļūdu HTTP 404 Not Found un lapā parāda bojāta attēla ikonu.

1. risinājums: Atjauninātais informer.yandex.ru galapunkts

Lai vizuālā nozīmīte darbotos, mēs novirzām attēla avotu uz Yandex pašreizējo Informer pakalpojumu (https://informer.yandex.ru/informer/...).

2. risinājums: Vietējais rezerves risinājums (onerror) apmeklētājiem, kuri izmanto AdBlocker

Mūsdienās daudzi spēlētāji un izstrādātāji savās pārlūkprogrammās izmanto AdBlocker (uBlock Origin, Brave Shield utt.). Ja reklāmu bloķētāji bloķē analītikas domēnus, nozīmītes attēls var netikt ielādēts. Lai dizaina izkārtojums nekādos apstākļos netiktu sabojāts, mēs savā serverī glabājam nozīmītes 88x31 pikseļu kopiju (images/yandex_metrica_badge.png) un automātiski to aktivizējam ar atribūtu 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 -->

Pēc šīs korekcijas Yandex Metrica nozīmīte Mayhem Corporation kreisajā izvēlnē tiek rādīta gan ar reāllaika statistiku parastajās pārlūkprogrammās, gan bez bojātām ikonām pārlūkprogrammās, kurās ir iespējots AdBlocker:

Aktīva Yandex Metrica Informer nozīmīte mayhemcorporation.com/mayhem/index.php kreisajā izvēlnē pēc atjaunināšanas.

Tirkīza 88x31 Informer nozīmīte, kurā apkopoti lapu skatījumi, apmeklējumi un unikālo apmeklētāju dati.

---

3. Mūsu vietne un spēles (Arar Games)

Mūsu vietne

• Mayhem Corporation: Mūsu tīmekļa portāls, kurā apkopoti tehniskie raksti par spēļu izstrādi un XNA / MonoGame.
  mayhemcorporation.com

Mūsu spēles

• Blocked: Pixel Panzer: 2D pikseļu tanku darbības un arkādes spēle.
  Google Play | Microsoft Store
• Paint Trek: 2D kosmosa tematikas arkādes un mīklu spēle.
  Google Play | Microsoft Store
• Space Dodger: Uz refleksiem balstīta 2D kosmosa arkādes spēle.
  Google Play

Sociālie mediji

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