How to Add Yandex Metrica to Your Website: Step-by-Step Setup, Webvisor, and Fixing the Broken Informer Badge

As an indie game studio or content creator, measuring which articles visitors read, where they click on the page, and how they interact with your store badges is essential. While Google Analytics remains an industry standard, Yandex Metrica (Yandex.Metrika) is a remarkably powerful analytics tool for developers thanks to its free Webvisor (Session Replay), Clickmap, Scroll Map, and Visual Counter Badge (Informer) features.

At Arar Games, while making our game development portal Mayhem Corporation (mayhemcorporation.com)—live since 2011—mobile-responsive, we noticed that our legacy 2012 Yandex Metrica counter and visual badge in the left sidebar had broken and stopped displaying.

The legacy 2012 Yandex Metrica badge using the old bs.yandex.ru URL appearing as a broken image icon in modern browsers.

In this guide, we walk you through creating a new Yandex Metrica tag from scratch, integrating the modern tag.js snippet into your site, and repairing the broken legacy Informer badge with an AdBlocker fallback.

---

1. Creating a New Tag in Yandex Metrica

After logging in to metrica.yandex.com with your Yandex account, navigate to the Add tag (metrica.yandex.com/add) screen to add a new website counter. The setup consists of three core steps:

Step 1: Create Tag (Tag Settings and Webvisor Configuration)

In the initial screen, configure your website's basic identity and regional settings:

1. Tag name: Enter a recognizable name for your project in the dashboard (e.g., Mayhem Corporation).
2. Website URL: Enter the primary domain name of your site without protocol prefixes like https:// (e.g., mayhemcorporation.com).
3. Accept data only from the specified addresses: Make sure to keep this checkbox checked to prevent unauthorized sites from copying your tag ID and corrupting your metrics with spam traffic.
4. Including subdomains: Check this option if you want to track subdomains (such as blog.yoursite.com) under the same counter.
5. Time zone & Currency: Select (GMT+03:00) Istanbul (or your local time zone) and TRY (or USD) as currency so daily metric resets match your target schedule.
6. Session Replay, scroll map, form analysis (Webvisor):

   💡 Key Feature: Enabling this option allows Yandex Metrica to record mouse movements, scroll depth, and clicks on game/article cards like an anonymized session video.

---

Step 2: Fill Out the Profile (Configuring the Site Profile)

In the second step, Yandex Metrica asks 5 quick profiling questions to generate accurate industry benchmark comparisons:

1. Site Type

If you run an article, tutorial, news, or documentation portal, choose Informational website (Website with text content); if your site is a direct app or game landing page, select Promo website:

2. Industry

Depending on your content, select technology, media, culture/arts, or choose Other at the bottom if your exact category is not listed:

3. CMS (Content Management System)

If your site uses a platform like WordPress, Drupal, Joomla, or Wix, select it from the list. If you built a custom PHP/MySQL or .NET architecture like our Mayhem Corporation portal, select Other at the bottom of the list:

4. CRM System

If you do not use an enterprise CRM, choose Other (or Without CRM) to proceed:

5. Your Role in the Project

If you are an indie developer or studio founder, select Business management or Product management and click the Continue button:

---

Step 3: Installing the Code Snippet (tag.js)

In the final step, Yandex Metrica generates the modern JavaScript counter snippet (tag.js) to be placed within your site's <head> or <body> tags:

The generated modern tracking code has the following structure (where YOUR_TAG_ID will be replaced with your actual tag number):

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

After pasting this code into your primary template (index.php or header.php) and deploying it to your server, click the "Check tag" button to verify that the counter is tracking live data, then click "Get started" to enter your analytics dashboard.

---

2. Fixing the Broken Yandex Metrica Visual Badge (Informer) and AdBlocker Protection

On websites built between 2011 and 2014, the iconic 88x31 pixel turquoise statistics badge (Informer) from Yandex Metrica was embedded using this legacy URL:

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

Over the years, Yandex deprecated the bs.yandex.ru host and the legacy watch.js script. As a result, this endpoint now returns HTTP 404 Not Found, leaving a broken image icon on the page.

Solution 1: Updated informer.yandex.ru Endpoint

To restore the visual badge, update the image source URL to Yandex's current Informer endpoint (https://informer.yandex.ru/informer/...).

Solution 2: Local Fallback for AdBlocker Users (onerror)

Today, many gamers and developers browse with AdBlockers (uBlock Origin, Brave Shields, etc.) enabled. When an ad blocker restricts analytics domains, the badge graphic may fail to load. To ensure your layout never breaks, store a local 88x31 fallback copy on your server (images/yandex_metrica_badge.png) and activate it automatically via the onerror attribute:

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

With this update in place, the Yandex Metrica badge in the Mayhem Corporation sidebar displays live stats on standard browsers and renders cleanly without broken image icons when ad blockers are active:

The active Yandex Metrica Informer badge in the left sidebar of mayhemcorporation.com/mayhem/index.php following the update.

The 88x31 turquoise Informer badge summarizing pageviews, visits, and unique visitors.

---

3. Our Website and Games (Arar Games)

Our Website

• Mayhem Corporation: Our web portal featuring technical articles on game development, XNA, and MonoGame.
  mayhemcorporation.com

Our Games

• Blocked: Pixel Panzer: 2D pixel tank action and arcade game.
  Google Play | Microsoft Store
• Paint Trek: 2D space-themed arcade and puzzle game.
  Google Play | Microsoft Store
• Space Dodger: Reflex-focused 2D space arcade game.
  Google Play

Social Media

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