Kaip įdiegti „Yandex Metrica“ savo svetainėje? Žingsnis po žingsnio diegimas, „Webvisor“ ir neveikiančio „Informer“ ženkliuko taisymas

Būdami nepriklausoma žaidimų studija ar turinio kūrėjai, privalote žinoti, kokius straipsnius skaito jūsų svetainės lankytojai, kur jie spusteli puslapyje ir kaip sąveikauja su jūsų parduotuvių ženkliukais. Nors Google Analytics yra plačiai paplitęs standartas, Yandex Metrica (Yandex.Metrika) yra galingas analitikos įrankis kūrėjams, siūlantis nemokamas funkcijas: Webvisor (seanso atkūrimas / Session Replay), spustelėjimų žemėlapį (Clickmap), slinkties žemėlapį (Scroll Map) ir vaizdinį skaitiklio ženkliuką (Informer).

Mes, Arar Games, pritaikydami savo žaidimų kūrimo portalą Mayhem Corporation (mayhemcorporation.com), veikiantį nuo 2011 m., mobiliesiems įrenginiams (responsive dizainas), pastebėjome, kad kairiajame meniu esantis 2012 m. Yandex Metrica skaitiklis ir vaizdinis ženkliukas rodomi kaip sugadinti.

Senas 2012 m. „Yandex Metrica“ ženkliukas iš bs.yandex.ru, šiuolaikinėse naršyklėse rodomas kaip sugadinta piktograma.

Šiame vadove žingsnis po žingsnio paaiškiname, kaip nuo nulio sukurti naują Yandex Metrica žymą (Tag), integruoti atnaujintą tag.js kodą į savo svetainę ir pataisyti sugadintą „Informer“ ženkliuką iš seno bs.yandex.ru adreso su AdBlocker apsauga.

---

1. Naujos žymos (Tag) kūrimas „Yandex Metrica“

Prisijungę prie savo „Yandex“ paskyros svetainėje metrica.yandex.com, einame į ekraną Add tag (metrica.yandex.com/add), kad pridėtume naują svetainės skaitiklį. Sąranka susideda iš 3 pagrindinių žingsnių:

1 žingsnis: Create Tag (Žymos informacija ir „Webvisor“ nustatymai)

Pirmajame lange sukonfigūruojame pagrindinę svetainės tapatybę ir regiono nustatymus:

1. Tag name: Įveskite pavadinimą, kuris padės atpažinti projektą skydelyje (pvz.: Mayhem Corporation).
2. Website URL: Įveskite pagrindinį savo svetainės domeną be protokolo (https://) (pvz.: mayhemcorporation.com).
3. Accept data only from the specified addresses: Būtinai palikite šį laukelį pažymėtą, kad kitos svetainės nenukopijuotų jūsų skaitiklio ID ir neterštų jūsų statistikos (šlamšto srautas).
4. Including subdomains: Galite pažymėti, jei norite tame pačiame skaitiklyje stebėti ir subdomenus, pvz., blog.jususvetaine.com.
5. Time zone & Currency: Pasirinkite laiko juostą (pvz., (GMT+03:00) Istanbul) ir valiutą, pvz., TRY (arba USD), kad kasdieniai lankytojų nustatymo iš naujo laikai atitiktų jūsų poreikius.
6. Session Replay, scroll map, form analysis (Webvisor):

   💡 Svarbiausia funkcija: Įjungus šią parinktį, „Yandex Metrica“ leidžia stebėti lankytojų pelės judesius, slinkties gylį ir tai, kurias žaidimų / straipsnių korteles jie spusteli jūsų svetainėje, tarsi anonimizuotame vaizdo įraše.

---

2 žingsnis: Fill Out the Profile (Svetainės profilio konfigūravimas)

Antrajame žingsnyje „Yandex Metrica“ užduoda 5 trumpus profilio klausimus, kad galėtų tiksliai generuoti pramonės palyginimo (benchmark) ataskaitas:

1. Site Type (Svetainės tipas)

Jei valdote portalą, kuriame vyrauja straipsniai, techniniai vadovai, naujienos ar dokumentacija, pasirinkite Informational website (Website with text content); jei tai tiesioginis programėlės / žaidimo pristatymo puslapis, galite pasirinkti Promo website:

2. Industry (Pramonės šaka)

Pagal svetainės turinį pasirinkite technologijas, žiniasklaidą, kultūrą / meną arba, jei tikslaus atitikmens sąraše nėra, apačioje pasirinkite Other:

3. CMS (Turinio valdymo sistema)

Jei jūsų svetainė naudoja paruoštą platformą, tokią kaip „WordPress“, „Drupal“, „Joomla“ ar „Wix“, galite pasirinkti iš sąrašo. Jei naudojate savo parašytą PHP/MySQL arba .NET architektūrą, kaip mūsų Mayhem Corporation portalas, sąrašo apačioje pasirinkite Other:

4. CRM sistema

Jei nenaudojate jokios įmonės CRM sistemos, šiame lauke galite tęsti pasirinkę Other (arba Without CRM):

5. Your Role in the Project (Jūsų vaidmuo projekte)

Jei esate nepriklausomas kūrėjas ar studijos įkūrėjas, pasirinkite Business management arba Product management ir spustelėkite mygtuką Continue:

---

3 žingsnis: Kodo fragmento diegimas (tag.js)

Paskutiniame žingsnyje „Yandex Metrica“ sugeneruoja atnaujintą JavaScript skaitiklio kodą (tag.js), kurį įterpsite tarp savo svetainės <head> arba <body> žymų:

Sugeneruoto atnaujinto skaitiklio kodo struktūra yra tokia (vietoj YOUR_TAG_ID įrašomas jūsų skaitiklio numeris):

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

Pridėję kodą prie pagrindinio svetainės šablono (index.php arba header.php) ir įkėlę į serverį, spustelėkite ekrane esantį mygtuką "Check tag", kad patikrintumėte, jog skaitiklis veikia realiuoju laiku, ir spustelėkite "Get started", kad pereitumėte į savo analitikos skydelį.

---

2. Sugadinto „Yandex Metrica“ vaizdinio ženkliuko („Informer“) taisymas ir „AdBlocker“ apsauga

2011–2014 m. sukurtose svetainėse „Yandex Metrica“ ikoninis 88x31 pikselių turkio spalvos statistikos ženkliukas („Informer“) buvo iškviečiamas senu adresu:

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

Bėgant metams „Yandex“ panaikino bs.yandex.ru serverį ir senąjį watch.js scenarijų, todėl šis adresas dabar grąžina HTTP 404 Not Found ir puslapyje sukuria sugadinto paveikslėlio piktogramą.

1 sprendimas: Atnaujintas informer.yandex.ru galinis taškas

Kad vaizdinis ženkliukas veiktų, nukreipiame vaizdo šaltinį į atnaujintą „Yandex“ „Informer“ paslaugą (https://informer.yandex.ru/informer/...).

2 sprendimas: Vietinis atsarginis variantas lankytojams, naudojantiems „AdBlocker“ (onerror)

Šiandien daugelis žaidėjų ir kūrėjų savo naršyklėse naudoja AdBlocker („uBlock Origin“, „Brave Shield“ ir kt.). Kai skelbimų blokatoriai blokuoja analitikos domenus, ženkliuko vaizdas vėl gali būti neįkeliamas. Norėdami užtikrinti, kad dizainas nebūtų pažeistas jokiomis aplinkybėmis, savo serveryje saugome 88x31 pikselių ženkliuko kopiją (images/yandex_metrica_badge.png) ir automatiškai ją įjungiame naudodami atributą 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 -->

Po šio pakeitimo „Yandex Metrica“ ženkliukas kairiajame Mayhem Corporation meniu rodomas ir įprastose naršyklėse su tiesiogine statistika, ir naršyklėse su įjungtu „AdBlocker“ be sugadintos piktogramos:

Aktyvus „Yandex Metrica Informer“ ženkliukas kairiajame mayhemcorporation.com/mayhem/index.php meniu po atnaujinimo.

88x31 turkio spalvos „Informer“ ženkliukas, apibendrinantis puslapių peržiūras, apsilankymus ir unikalius lankytojus.

---

3. Mūsų svetainė ir žaidimai (Arar Games)

Mūsų svetainė

• Mayhem Corporation: Mūsų interneto portalas su techniniais straipsniais apie žaidimų kūrimą ir XNA / MonoGame.
  mayhemcorporation.com

Mūsų žaidimai

• Blocked: Pixel Panzer: 2D pikselių tankų veiksmo ir arkadinis žaidimas.
  Google Play | Microsoft Store
• Paint Trek: 2D kosmoso tematikos arkadinis ir galvosūkių žaidimas.
  Google Play | Microsoft Store
• Space Dodger: Refleksais pagrįstas 2D kosminis arkadinis žaidimas.
  Google Play

Socialiniai tinklai

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