Hvordan legge til Yandex Metrica på nettstedet ditt? Trinnvis veiledning, Webvisor og reparasjon av Informer-merket

Som et uavhengig spillstudio eller innholdsskaper er det avgjørende å måle hvilke artikler besøkende leser, hvor på siden de klikker og hvordan de samhandler med butikkmerkene dine. Selv om Google Analytics er en utbredt standard, er Yandex Metrica (Yandex.Metrika) et kraftig analyseverktøy for utviklere takket være gratisfunksjoner som Webvisor (sesjonsavspilling / Session Replay), varmekart over klikk (Clickmap), rullekart (Scroll Map) og visuelt tellermerke (Informer).

Som Arar Games, da vi tilpasset vår spillutviklingsportal Mayhem Corporation (mayhemcorporation.com), som har vært på nett siden 2011, for mobile enheter (responsivt design), la vi merke til at vår Yandex Metrica-teller og visuelle merke fra 2012 i venstremenyen nå ble vist som ødelagt.

Gammelt Yandex Metrica-merke fra 2012 med adressen bs.yandex.ru som vises som et ødelagt ikon i moderne nettlesere.

I denne veiledningen viser vi trinn for trinn hvordan du oppretter en ny Yandex Metrica-tagg fra bunnen av, integrerer den oppdaterte tag.js-koden på nettstedet ditt, og reparerer det ødelagte Informer-merket fra gamle bs.yandex.ru med AdBlocker-beskyttelse.

---

1. Opprette en ny tagg (Tag) i Yandex Metrica

Etter å ha logget på metrica.yandex.com med Yandex-kontoen din, går vi til skjermen Add tag (metrica.yandex.com/add) for å legge til en ny nettsideteller. Installasjonen består av 3 grunnleggende trinn:

Trinn 1: Create Tag (Tagg-informasjon og Webvisor-innstilling)

På den første skjermen konfigurerer vi nettstedets grunnleggende identitets- og regioninnstillinger:

1. Tag name: Skriv inn et navn som hjelper deg med å gjenkjenne prosjektet ditt i panelet (f.eks.: Mayhem Corporation).
2. Website URL: Skriv inn nettstedets hoveddomene uten protokoll (https://) (f.eks.: mayhemcorporation.com).
3. Accept data only from the specified addresses: Sørg for å la denne boksen være avmerket for å forhindre at andre nettsteder kopierer din teller-ID og forurenser statistikken din (søppeltrafikk).
4. Including subdomains: Du kan huke av dette hvis du også ønsker å samle underdomener som blog.dittnettsted.com i samme teller.
5. Time zone & Currency: Velg din tidssone (f.eks. (GMT+03:00) Istanbul) og valuta som TRY (eller USD) slik at den daglige tilbakestillingstiden for besøkende passer dine behov.
6. Session Replay, scroll map, form analysis (Webvisor):

   💡 Den mest kritiske funksjonen: Når du aktiverer dette alternativet, lar Yandex Metrica deg observere besøkendes musebevegelser, rulledybde og hvilke spill-/artikkelkort de klikker på, akkurat som et anonymisert videoopptak.

---

Trinn 2: Fill Out the Profile (Konfigurere nettstedprofilen)

I det andre trinnet stiller Yandex Metrica 5 korte profilspørsmål for å generere bransjebasert referanseinformasjon (benchmarking) nøyaktig:

1. Site Type (Nettstedstype)

Hvis du administrerer en portal som hovedsakelig inneholder artikler, tekniske veiledninger, nyheter eller dokumentasjon, velger du Informational website (Website with text content); hvis det er en direkte kampanjeside for en app/et spill, velger du Promo website:

2. Industry (Bransje)

Avhengig av innholdet på nettstedet ditt velger du teknologi, media, kultur/kunst, eller hvis det ikke er noen nøyaktig match i listen, velger du Other helt nederst:

3. CMS (Innholdsstyringssystem)

Hvis nettstedet ditt bruker en ferdig plattform som WordPress, Drupal, Joomla eller Wix, kan du velge den fra listen. Hvis du bruker en egenutviklet PHP/MySQL- eller .NET-arkitektur slik som vår Mayhem Corporation-portal, velger du Other nederst på listen:

4. CRM-system

Hvis du ikke bruker et bedrifts-CRM, kan du fortsette ved å velge Other (eller Without CRM) i dette feltet:

5. Your Role in the Project (Din rolle i prosjektet)

Hvis du er en uavhengig utvikler eller studioets grunnlegger, velger du Business management eller Product management og klikker på Continue-knappen:

---

Trinn 3: Installasjon av kodebit (tag.js)

I det siste trinnet genererer Yandex Metrica den oppdaterte JavaScript-tellerkoden (tag.js) som du skal plassere mellom <head>- eller <body>-taggene på nettstedet ditt:

Strukturen til den genererte oppdaterte tellerkoden er som følger (erstatt YOUR_TAG_ID med ditt eget tellernummer):

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

Etter at du har lagt til koden i hovedmalen til nettstedet ditt (index.php eller header.php) og lastet den opp til serveren, klikker du på "Check tag"-knappen på skjermen for å bekrefte at telleren fungerer live, og deretter klikker du på "Get started" for å gå til analysedashbordet ditt.

---

2. Reparere det ødelagte Yandex Metrica-merket (Informer) og AdBlocker-beskyttelse

På nettsteder bygget mellom 2011 og 2014 ble Yandex Metricas ikoniske turkise statistikkmerke på 88x31 piksler (Informer) kalt opp via følgende gamle adresse:

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

Siden Yandex i årenes løp faset ut bs.yandex.ru-serveren og det gamle watch.js-skriptet, returnerer denne adressen nå HTTP 404 Not Found og viser et ødelagt bildeikon på siden.

Løsning 1: Oppdatert informer.yandex.ru-endepunkt

For å få det visuelle merket til å fungere, omdirigerer vi bildekilden til Yandex' gjeldende Informer-tjeneste (https://informer.yandex.ru/informer/...).

Løsning 2: Lokal reserveløsning for besøkende som bruker AdBlocker (onerror)

I dag bruker mange spillere og utviklere AdBlocker (uBlock Origin, Brave Shield osv.) i nettleserne sine. Når annonseblokkerere blokkerer analysedomener, vil merkebildet kanskje likevel ikke lastes inn. For å sikre at designet aldri blir ødelagt under noen omstendigheter, lagrer vi en 88x31-pikslers kopi av merket på vår egen server (images/yandex_metrica_badge.png) og aktiverer den automatisk via onerror-attributtet:

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

Etter denne endringen vises Yandex Metrica-merket i venstremenyen til Mayhem Corporation både i vanlige nettlesere med live-statistikk og i nettlesere med AdBlocker aktivert uten ødelagt ikon:

Aktivt Yandex Metrica Informer-merke i venstremenyen på mayhemcorporation.com/mayhem/index.php etter oppdateringen.

88x31 turkis Informer-merke som oppsummerer sidevisninger, besøk og unike besøkende.

---

3. Vårt nettsted og våre spill (Arar Games)

Vårt nettsted

• Mayhem Corporation: Vår nettportal med tekniske artikler om spillutvikling og XNA / MonoGame.
  mayhemcorporation.com

Våre spill

• Blocked: Pixel Panzer: 2D piksel-stridsvogn-action og arkadespill.
  Google Play | Microsoft Store
• Paint Trek: 2D rombasert arkade- og puslespill.
  Google Play | Microsoft Store
• Space Dodger: Refleksbasert 2D romarkadespill.
  Google Play

Sosiale medier

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