Hur man lägger till Yandex Metrica på din webbplats: Steg-för-steg-installation, Webvisor och reparation av Informer-märket

Som en oberoende spelstudio eller innehållsskapare är det oerhört viktigt att mäta vilka artiklar dina besökare läser, var på sidan de klickar och hur de interagerar med dina butiksmärken. Även om Google Analytics är en vanlig branschstandard, är Yandex Metrica (Yandex.Metrika) ett kraftfullt analysverktyg för utvecklare tack vare dess kostnadsfria funktioner som Webvisor (Sessionsinspelning / Session Replay), Klickkarta (Clickmap), Scrollkarta (Scroll Map) och Visuellt räknarmärke (Informer).

Som Arar Games märkte vi, när vi gjorde vår spelutvecklingsportal Mayhem Corporation (mayhemcorporation.com) – som har varit online sedan 2011 – mobilanpassad (responsiv), att vår gamla Yandex Metrica-räknare och vårt visuella märke från 2012 i den vänstra menyn nu visades som en trasig bild.

Det gamla Yandex Metrica-märket från 2012 med adressen bs.yandex.ru som visas som en trasig ikon i moderna webbläsare.

I den här guiden delar vi steg för steg hur du skapar en ny Yandex Metrica-tagg (Tag) från grunden, integrerar den uppdaterade tag.js-koden på din webbplats och reparerar det gamla trasiga Informer-märket från bs.yandex.ru med AdBlocker-skydd.

---

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

När du har loggat in med ditt Yandex-konto på metrica.yandex.com, går vi till skärmen Add tag (metrica.yandex.com/add) för att lägga till en ny webbplatsräknare. Installationen består av tre grundläggande steg:

Steg 1: Create Tag (Tagg-information och Webvisor-inställningar)

På den första skärmen konfigurerar vi grundläggande identitet och regionala inställningar för vår webbplats:

1. Tag name: Ange ett namn som gör det enkelt att identifiera ditt projekt i panelen (t.ex. Mayhem Corporation).
2. Website URL: Ange huvuddomänen för din webbplats utan protokoll (https://) (t.ex. mayhemcorporation.com).
3. Accept data only from the specified addresses: Lämna denna ruta markerad för att förhindra att andra webbplatser kopierar ditt tagg-ID och förorenar din statistik med skräptrafik (spam).
4. Including subdomains: Om du även vill samla underdomäner som blog.dindomän.com under samma räknare kan du markera detta alternativ.
5. Time zone & Currency: Välj din relevanta tidszon (t.ex. (GMT+03:00) Istanbul) så att de dagliga besöksnollställningarna matchar din målgrupps tid, samt önskad valuta som TRY (eller USD).
6. Session Replay, scroll map, form analysis (Webvisor):

   💡 Den mest kritiska funktionen: När du aktiverar detta alternativ tillåter Yandex Metrica att du ser besökares musrörelser, scrollningsdjup och vilka spel-/artikelkort de klickar på som en anonymiserad videoinspelning.

---

Steg 2: Fill Out the Profile (Konfigurera webbplatsprofilen)

I det andra steget ställer Yandex Metrica fem korta profilfrågor för att generera korrekta branschjämförelserapporter (benchmark):

1. Site Type (Webbplatstyp)

Om du driver en portal inriktad på artiklar, tekniska guider, nyheter eller dokumentation väljer du Informational website (Website with text content); om det är en renodlad presentationssida för appar/spel kan du välja Promo website:

2. Industry (Bransch)

Beroende på webbplatsens innehåll väljer du teknik, media, kultur/konst eller, om det inte finns någon exakt matchning i listan, alternativet Other längst ner:

3. CMS (Innehållshanteringssystem)

Om din webbplats använder en färdig plattform som WordPress, Drupal, Joomla eller Wix kan du välja den i listan. Om du använder en anpassad PHP/MySQL- eller .NET-arkitektur som vår portal Mayhem Corporation, väljer du Other längst ner i listan:

4. CRM-system

Om du inte använder något företags-CRM kan du välja Other (eller Without CRM) i detta fält och fortsätta:

5. Your Role in the Project (Din roll i projektet)

Om du är en oberoende utvecklare eller studiogrundare väljer du Business management eller Product management och klickar på knappen Continue:

---

Steg 3: Installation av kodavsnitt (tag.js)

I det sista steget genererar Yandex Metrica den uppdaterade JavaScript-räknarkoden (tag.js) som du ska placera mellan taggarna <head> eller <body> på din webbplats:

Strukturen för den genererade räknarkoden ser ut så här (ersätt YOUR_TAG_ID med ditt eget räknarnummer):

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

När du har lagt till koden i din webbplats huvudmall (index.php eller header.php) och laddat upp den till servern klickar du på knappen "Check tag" på skärmen för att verifiera att räknaren körs live och klickar på "Get started" för att gå till din analyspanel.

---

2. Reparera det trasiga visuella Yandex Metrica-märket (Informer) och AdBlocker-skydd

På webbplatser som skapades under 2011–2014 anropades Yandex Metricas ikoniska turkosa statistikmärke i storleken 88x31 pixlar (Informer) med följande gamla adress:

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

Eftersom Yandex med åren fasade ut servern bs.yandex.ru och det gamla skriptet watch.js, returnerar denna adress nu HTTP 404 Not Found och resulterar i en trasig bildikon på sidan.

Lösning 1: Den uppdaterade slutpunkten informer.yandex.ru

För att få det visuella märket att fungera omdirigerar vi bildkällan till Yandex uppdaterade Informer-tjänst (https://informer.yandex.ru/informer/...).

Lösning 2: Lokal fallback (onerror) för besökare med AdBlocker

Idag använder många spelare och utvecklare AdBlocker (uBlock Origin, Brave Shield etc.) i sina webbläsare. När annonsblockerare blockerar analysdomäner kan märkesbilden misslyckas med att laddas. För att förhindra att webbplatsdesignen bryts under några omständigheter lagrar vi en lokal kopia av märket på 88x31 pixlar på vår egen server (images/yandex_metrica_badge.png) och aktiverar den automatiskt med attributet 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.Metrika"
        title="Yandex.Metrika: dagens data (visningar, besök och unika besökare)"
        class="ym-advanced-informer" data-cid="YOUR_TAG_ID" data-lang="tr" />
</a>
<!-- /Yandex.Metrika informer -->

Efter denna ändring visas Yandex Metrica-märket i den vänstra menyn på Mayhem Corporation med realtidsstatistik i vanliga webbläsare och utan trasig ikon även när AdBlocker är aktiverat:

Aktivt Yandex Metrica Informer-märke i den vänstra menyn på mayhemcorporation.com/mayhem/index.php efter uppdateringen.

Det turkosa Informer-märket på 88x31 pixlar som sammanfattar sidvisningar, besök och unika besökare.

---

3. Vår webbplats och våra spel (Arar Games)

Vår webbplats

• Mayhem Corporation: Vår webbportal med tekniska artiklar om spelutveckling och XNA / MonoGame.
  mayhemcorporation.com

Våra spel

• Blocked: Pixel Panzer: 2D pixelbaserat tank-action- och arkadspel.
  Google Play | Microsoft Store
• Paint Trek: 2D rymdtema arkad- och pusselspel.
  Google Play | Microsoft Store
• Space Dodger: Reflexbaserat 2D rymdarkadspel.
  Google Play

Sociala medier

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