Kuinka lisätä Yandex Metrica verkkosivustollesi: Vaiheittainen asennus, Webvisor ja Informer-merkin korjaus

Itsenäisenä pelistudiona tai sisällöntuottajana on erittäin tärkeää mitata, mitä artikkeleita sivustosi vierailijat lukevat, minne he napsauttavat sivulla ja miten he ovat vuorovaikutuksessa kauppamerkkiesi kanssa. Vaikka Google Analytics on yleinen standardi, Yandex Metrica (Yandex.Metrika) on kehittäjille tehokas analytiikkatyökalu ilmaisten ominaisuuksiensa ansiosta, kuten Webvisor (istuntojen toisto / Session Replay), klikkikartta (Clickmap), vierityskartta (Scroll Map) ja visuaalinen laskurimerkki (Informer).

Kun me Arar Games -tiimissä uudistimme vuodesta 2011 asti toiminnassa ollutta pelikehitysportaaliamme Mayhem Corporation (mayhemcorporation.com) mobiiliystävälliseksi (responsiiviseksi), huomasimme vasemmassa valikossamme olleen, vuodelta 2012 peräisin olevan Yandex Metrica -laskurimme ja visuaalisen merkkimme näkyvän rikkinäisenä.

Vuodelta 2012 peräisin oleva vanha Yandex Metrica -merkki osoitteesta bs.yandex.ru näkyy rikkinäisenä kuvakkeena nykyaikaisissa selaimissa.

Tässä oppaassa jaamme vaiheittaiset ohjeet uuden Yandex Metrica -tunnisteen (Tag) luomiseen alusta alkaen, päivitetyn tag.js-koodin integroimiseen sivustollesi sekä vanhan bs.yandex.ru-osoitteesta johtuvan rikkinäisen Informer-merkin korjaamiseen AdBlocker-suojatulla tavalla.

---

1. Uuden tunnisteen (Tag) luominen Yandex Metricassa

Kun olet kirjautunut Yandex-tilillesi osoitteessa metrica.yandex.com, siirrymme Add tag (metrica.yandex.com/add) -näkymään lisätäksemme uuden verkkosivustolaskurin. Asennus koostuu kolmesta päävaiheesta:

Vaihe 1: Create Tag (Tunnisteen tiedot ja Webvisor-asetus)

Ensimmäisessä näkymässä määritämme sivustomme perustunnisteet ja alueasetukset:

1. Tag name: Anna nimi, josta tunnistat projektisi hallintapaneelissa (esim. Mayhem Corporation).
2. Website URL: Kirjoita sivustosi pääverkkotunnus ilman protokollaa (https://) (esim. mayhemcorporation.com).
3. Accept data only from the specified addresses: Jätä tämä valintaruutu ehdottomasti valituksi, jotta muut sivustot eivät voi kopioida laskuritunnustasi (Tag ID) ja sotkea tilastojasi (roskaliikennettä).
4. Including subdomains: Voit valita tämän, jos haluat kerätä aliverkkotunnukset, kuten blog.sivustosi.com, samaan laskuriin.
5. Time zone & Currency: Valitse aikavyöhykkeeksi (GMT+03:00) Istanbul (tai oma paikallinen aikavyöhykkeesi) ja valuutaksi TRY (tai USD), jotta päivittäiset vierailijatilastot nollautuvat haluamaasi aikaan.
6. Session Replay, scroll map, form analysis (Webvisor):

   💡 Kriittisin ominaisuus: Kun aktivoit tämän vaihtoehdon, Yandex Metrica mahdollistaa vierailijoiden hiiren liikkeiden, vierityssyvyyden ja pelikorttien/artikkelien klikkausten seuraamisen anonymisoituina videotallenteina.

---

Vaihe 2: Fill Out the Profile (Sivuston profiilin määrittäminen)

Toisessa vaiheessa Yandex Metrica kysyy viisi lyhyttä profiilikysymystä tuottaakseen tarkkoja toimialakohtaisia vertailuraportteja (benchmark):

1. Site Type (Sivustotyyppi)

Jos ylläpidät portaalia, jossa pääpaino on artikkeleissa, teknisissä oppaissa, uutisissa tai dokumentaatiossa, valitse Informational website (Website with text content); jos kyseessä on suora sovelluksen/pelin esittelysivu, voit valita Promo website:

2. Industry (Toimiala)

Valitse sivustosi sisällön mukaan teknologia, media, kulttuuri/taide tai jos luettelossa ei ole tarkkaa vastinetta, valitse alareunasta Other:

3. CMS (Sisällönhallintajärjestelmä)

Jos sivustosi käyttää valmista alustaa, kuten WordPress, Drupal, Joomla tai Wix, voit valita sen luettelosta. Jos käytät itse kehitettyä mukautettua PHP/MySQL- tai .NET-arkkitehtuuria, kuten meidän Mayhem Corporation -portaalimme, valitse luettelon alaosasta Other:

4. CRM-järjestelmä

Jos et käytä mitään yritystason CRM-järjestelmää, voit jatkaa valitsemalla tässäkin kohdassa Other (tai Without CRM):

5. Your Role in the Project (Roolisi projektissa)

Jos olet itsenäinen kehittäjä tai studion perustaja, valitse Business management tai Product management ja napsauta Continue-painiketta:

---

Vaihe 3: Koodikatkelman asennus (tag.js)

Viimeisessä vaiheessa Yandex Metrica luo ajantasaisen JavaScript-laskurikoodin (tag.js), joka sijoitetaan sivustosi <head>- tai <body>-tunnisteiden väliin:

Luodun nykyaikaisen laskurikoodin rakenne on seuraava (korvaa YOUR_TAG_ID omalla laskuritunnuksellasi):

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

Kun olet lisännyt koodin sivustosi päämalliin (index.php tai header.php) ja ladannut sen palvelimelle, voit varmistaa laskurin toiminnan painamalla näytöllä olevaa "Check tag" -painiketta ja siirtyä analytiikkapaneeliisi painamalla "Get started".

---

2. Rikkinäisen Yandex Metrica -kuvamerkin (Informer) korjaaminen ja AdBlocker-suojaus

Vuosina 2011–2014 luoduilla verkkosivustoilla Yandex Metrican ikoninen 88x31-pikselin turkoosi tilastomerkki (Informer) kutsuttiin tällä vanhalla osoitteella:

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

Koska Yandex on vuosien varrella poistanut käytöstä bs.yandex.ru-palvelimen ja vanhan watch.js-skriptin, tämä osoite palauttaa nyt virheen HTTP 404 Not Found ja luo sivulle rikkinäisen kuvan kuvakkeen.

Ratkaisu 1: Päivitetty informer.yandex.ru -päätepiste

Jotta visuaalinen merkki toimii, ohjaamme kuvalähteen Yandexin nykyiseen Informer-palveluun (https://informer.yandex.ru/informer/...).

Ratkaisu 2: Paikallinen varakuva (fallback) AdBlockeria käyttäville vierailijoille (onerror)

Nykyään monet pelaajat ja kehittäjät käyttävät selaimessaan AdBlockeria (uBlock Origin, Brave Shield jne.). Kun mainosten estäjät estävät analytiikan verkkotunnukset, merkkikuva ei välttämättä lataudu. Varmistaaksemme, ettei sivuston ulkoasu rikkoudu missään tilanteessa, tallennamme merkin 88x31-pikselisen kopion omalle palvelimellemme (images/yandex_metrica_badge.png) ja otamme sen automaattisesti käyttöön onerror-määritteen avulla:

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

Tämän muutoksen jälkeen Mayhem Corporation -sivuston vasemmassa valikossa oleva Yandex Metrica -merkki näkyy suorilla tilastoilla tavallisissa selaimissa ja ilman rikkinäistä kuvaketta selaimissa, joissa AdBlocker on käytössä:

Aktiivinen Yandex Metrica Informer -merkki osoitteen mayhemcorporation.com/mayhem/index.php vasemmassa valikossa päivityksen jälkeen.

Turkoosi 88x31 Informer -merkki, joka tiivistää sivun katselukerrat, käynnit ja uniikit vierailijat.

---

3. Verkkosivustomme ja pelimme (Arar Games)

Verkkosivustomme

• Mayhem Corporation: Verkkoportaalimme, joka sisältää pelikehitykseen ja XNA / MonoGame -teknologioihin liittyviä teknisiä artikkeleita.
  mayhemcorporation.com

Pelimme

• Blocked: Pixel Panzer: 2D-pikselipohjainen panssarivaunu- ja arkadetoimintapeli.
  Google Play | Microsoft Store
• Paint Trek: 2D-avaruusteemainen arkade- ja pulmapeli.
  Google Play | Microsoft Store
• Space Dodger: Reflekseihin keskittyvä 2D-avaruusarkadepeli.
  Google Play

Sosiaalinen media

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