10 Ekim 2026 Cumartesi

Hogyan adjunk Yandex Metrica-t a weboldalunkhoz: Lépésről lépésre telepítés, Webvisor és az Informer jelvény javítása




Hogyan adjunk Yandex Metrica-t a weboldalunkhoz: Lépésről lépésre telepítés, Webvisor és az Informer jelvény javítása

Független játékfejlesztő stúdióként vagy tartalomkészítőként rendkívül fontos mérni, hogy a weboldalra látogatók mely cikkeket olvassák, hová kattintanak az oldalon, és hogyan lépnek kapcsolatba az áruház-jelvényekkel. Bár a Google Analytics elterjedt szabvány, a fejlesztők számára a Yandex Metrica (Yandex.Metrika) erőteljes analitikai eszköz olyan ingyenes funkcióknak köszönhetően, mint a Webvisor (munkamenet-visszajátszás / Session Replay), a kattintási hőtérkép (Clickmap), a görgetési hőtérkép (Scroll Map) és a vizuális számlálójelvény (Informer).

Az Arar Games csapataként, amikor 2011 óta működő játékfejlesztési portálunkat, a Mayhem Corporation (mayhemcorporation.com) weboldalt mobileszközökre optimalizáltuk (reszponzívvá tettük), észrevettük, hogy a bal oldali menünkben található, 2012-ből származó Yandex Metrica számlálónk és vizuális jelvényünk hibás képként jelenik meg.

Hibás régi Yandex Metrica kép a Mayhem Corporation bal oldali menüjében
A 2012-es régi bs.yandex.ru című Yandex Metrica jelvény hibás ikonként jelenik meg a modern böngészőkben.

Ebben az útmutatóban lépésről lépésre bemutatjuk, hogyan hozhatunk létre új Yandex Metrica címkét (Tag) a nulláról, hogyan integrálhatjuk a modern tag.js kódot a weboldalunkba, és hogyan javíthatjuk meg a régi bs.yandex.ru cím miatti hibás Informer jelvényt AdBlocker-védelemmel.

1. Új címke (Tag) létrehozása a Yandex Metrica-ban

Miután bejelentkeztünk Yandex-fiókunkkal a metrica.yandex.com felületen, az Add tag (metrica.yandex.com/add) képernyőre lépünk egy új weboldal-számláló hozzáadásához. A beállítás 3 alapvető lépésből áll:

1. lépés: Create Tag (Címke adatai és Webvisor beállítás)

Az első képernyőn konfiguráljuk webhelyünk alapvető azonosító- és régióbeállításait:

1. lépés: Yandex Metrica új címke létrehozási képernyője

  1. Tag name: Adjon meg egy nevet, amely alapján könnyen azonosíthatja projektjét a vezérlőpulton (pl.: Mayhem Corporation).
  2. Website URL: Adja meg webhelye fő domainjét protokoll (https://) nélkül (pl.: mayhemcorporation.com).
  3. Accept data only from the specified addresses: Ezt a jelölőnégyzetet mindenképpen hagyja bejelölve, hogy megakadályozza más webhelyeket a számlálóazonosító (Tag ID) lemásolásában és a statisztikák torzításában (spam forgalom).
  4. Including subdomains: Ezt akkor jelölheti be, ha az aldomaineket, például a blog.webhelye.com címet is ugyanabban a számlálóban szeretné gyűjteni.
  5. Time zone & Currency: Válassza a (GMT+03:00) Istanbul (vagy a helyi időzónáját) zónát, pénznemként pedig a TRY (vagy USD) lehetőséget, hogy a napi látogatószámláló a kívánt időben nullázódjon.
  6. Session Replay, scroll map, form analysis (Webvisor):

    💡 A legkritikusabb funkció: Ha aktiválja ezt az opciót, a Yandex Metrica lehetővé teszi, hogy a látogatók egérmozgását, görgetési mélységét és a játékkártyákra/cikkekre történő kattintásait anonimizált videofelvételként tekintse meg.

2. lépés: Fill Out the Profile (Webhelyprofil konfigurálása)

A második lépésben a Yandex Metrica 5 rövid profilkérdést tesz fel a pontos iparági összehasonlító (benchmark) jelentések elkészítéséhez:

2. lépés: Webhelyprofil információinak kitöltése

1. Site Type (Webhely típusa)

Ha cikkekre, műszaki útmutatókra, hírekre vagy dokumentációkra összpontosító portált üzemeltet, válassza az Informational website (Website with text content) lehetőséget; ha közvetlen alkalmazás-/játékpromóciós oldalról van szó, válassza a Promo website opciót:

Webhelytípus kiválasztása

2. Industry (Iparág)

Webhelye tartalmától függően válassza a technológia, média, kultúra/művészet kategóriát, vagy ha a listában nincs pontos egyezés, válassza az alul található Other lehetőséget:

Iparági lehetőségek 1

Iparági lehetőségek 2

3. CMS (Tartalomkezelő rendszer)

Ha webhelye kész platformot, például WordPress-t, Drupal-t, Joomla-t vagy Wix-et használ, kiválaszthatja a listából. Ha a mi Mayhem Corporation portálunkhoz hasonlóan saját fejlesztésű egyedi PHP/MySQL vagy .NET architektúrát használ, jelölje be a lista alján található Other lehetőséget:

CMS kiválasztása

4. CRM rendszer

Ha nem használ vállalati CRM-et, ezen a területen is az Other (vagy Without CRM) kiválasztásával folytathatja:

CRM kiválasztása

5. Your Role in the Project (Az Ön szerepe a projektben)

Ha független fejlesztő vagy stúdióalapító, válassza a Business management vagy Product management lehetőséget, majd kattintson a Continue gombra:

Szerepkör kiválasztása a projektben

3. lépés: Kódrészlet telepítése (tag.js)

Az utolsó lépésben a Yandex Metrica létrehozza a modern JavaScript számlálókódot (tag.js), amelyet a webhely <head> vagy <body> címkéi közé kell beilleszteni:

3. lépés: Yandex Metrica számlálókód és telepítési képernyő

A generált modern számlálókód felépítése a következő (helyettesítse a YOUR_TAG_ID azonosítót saját számlálószámával):

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

Miután hozzáadta a kódot a webhely fő sablonjához (index.php vagy header.php), és feltöltötte a szerverre, a képernyőn található "Check tag" gombra kattintva ellenőrizheti, hogy a számláló élesben működik-e, majd a "Get started" gombbal beléphet az analitikai irányítópultra.

2. A hibás Yandex Metrica képi jelvény (Informer) javítása és AdBlocker-védelem

A 2011 és 2014 között létrehozott webhelyeken a Yandex Metrica ikonikus 88x31 pixeles türkizkék statisztikai jelvényét (Informer) a következő régi címmel hívták meg:

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

Mivel a Yandex az évek során megszüntette a bs.yandex.ru szervert és a régi watch.js parancsfájlt, ez a cím ma HTTP 404 Not Found hibát ad vissza, és egy hibás képikont jelenít meg az oldalon.

1. megoldás: Frissített informer.yandex.ru végpont

A vizuális jelvény működéséhez a kép forrását a Yandex jelenlegi Informer szolgáltatására (https://informer.yandex.ru/informer/...) irányítjuk át.

2. megoldás: Helyi tartalék megoldás (fallback) az AdBlockert használó látogatóknak (onerror)

Napjainkban sok játékos és fejlesztő használ AdBlockert (uBlock Origin, Brave Shield stb.) a böngészőjében. Amikor a hirdetésblokkolók letiltják az analitikai domaineket, előfordulhat, hogy a jelvény képe nem töltődik be. Annak biztosítása érdekében, hogy a dizájn semmilyen körülmények között ne sérüljön, a jelvény egy 88x31 pixeles másolatát a saját szerverünkön tároljuk (images/yandex_metrica_badge.png), és az onerror attribútummal automatikusan bekapcsoljuk:

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

A módosítás után a Mayhem Corporation bal oldali menüjében található Yandex Metrica jelvény a normál böngészőkben élő statisztikákkal, az AdBlockert használó böngészőkben pedig hibás ikon nélkül, tisztán jelenik meg:

Megújult Yandex Metrica jelvény a Mayhem Corporation bal oldali menüjében
Aktív Yandex Metrica Informer jelvény a mayhemcorporation.com/mayhem/index.php bal oldali menüjében a frissítés után.

Yandex Metrica 88x31 jelvény közeli nézete
Türkizkék 88x31 Informer jelvény, amely összefoglalja az oldalmegtekintéseket, a látogatásokat és az egyedi látogatókat.

3. Weboldalunk és játékaink (Arar Games)

Weboldalunk

  • Mayhem Corporation: Webportálunk, amely játékfejlesztési és XNA / MonoGame témájú műszaki cikkeket tartalmaz.
    mayhemcorporation.com

Játékaink

Közösségi média




Gönderen zaman:
Etiketler: , , , , , ,

Hiç yorum yok:

Yorum Gönder

Kaydol: Kayıt Yorumları (Atom)