So binden Sie Yandex Metrica in Ihre Website ein: Schritt-für-Schritt-Anleitung, Webvisor und Reparatur des Informer-Badges

Als Indie-Spielestudio oder Content-Ersteller ist es von entscheidender Bedeutung zu messen, welche Artikel die Besucher Ihrer Website lesen, wohin sie auf der Seite klicken und wie sie mit Ihren Store-Badges interagieren. Auch wenn Google Analytics ein weit verbreiteter Standard ist, stellt Yandex Metrica (Yandex.Metrika) mit kostenlosen Funktionen wie Webvisor (Sitzungswiederholung / Session Replay), Klick-Heatmaps (Clickmap), Scroll-Heatmaps (Scroll Map) und dem visuellen Zähler-Badge (Informer) ein äußerst leistungsfähiges Analysetool für Entwickler dar.

Als Team von Arar Games stellten wir bei der Optimierung unseres seit 2011 bestehenden Spieleentwicklungsportals Mayhem Corporation (mayhemcorporation.com) für Mobilgeräte (Responsive Design) fest, dass unser aus dem Jahr 2012 stammender Yandex Metrica-Zähler und das visuelle Badge in unserem linken Menü als defektes Bild angezeigt wurden.

Das alte Yandex Metrica Badge aus dem Jahr 2012 mit der Adresse bs.yandex.ru, das in modernen Browsern als defektes Symbol dargestellt wird.

In dieser Anleitung zeigen wir Schritt für Schritt, wie Sie ein neues Yandex Metrica-Tag von Grund auf erstellen, den aktuellen tag.js-Code in Ihre Website einbinden und das durch die veraltete Domain bs.yandex.ru fehlerhafte Informer-Badge mit AdBlocker-Schutz reparieren.

---

1. Erstellen eines neuen Tags in Yandex Metrica

Nachdem Sie sich mit Ihrem Yandex-Konto auf metrica.yandex.com angemeldet haben, wechseln wir zum Bildschirm Add tag (metrica.yandex.com/add), um einen neuen Website-Zähler hinzuzufügen. Die Einrichtung umfasst drei grundlegende Schritte:

Schritt 1: Create Tag (Tag-Informationen und Webvisor-Einstellung)

Auf dem ersten Bildschirm konfigurieren wir die grundlegenden Identitäts- und Regionaleinstellungen unserer Website:

1. Tag name: Geben Sie einen Namen ein, mit dem Sie Ihr Projekt im Dashboard leicht wiedererkennen (z. B. Mayhem Corporation).
2. Website URL: Tragen Sie die Hauptdomain Ihrer Website ohne Protokoll (https://) ein (z. B. mayhemcorporation.com).
3. Accept data only from the specified addresses: Lassen Sie dieses Kontrollkästchen unbedingt aktiviert, um zu verhindern, dass fremde Websites Ihre Zähler-ID kopieren und Ihre Statistiken verfälschen (Spam-Traffic).
4. Including subdomains: Dies können Sie aktivieren, wenn Sie Subdomains wie blog.ihreseite.com im selben Zähler erfassen möchten.
5. Time zone & Currency: Wählen Sie (GMT+03:00) Istanbul (oder Ihre lokale Zeitzone) sowie als Währung TRY (oder USD), damit der tägliche Besucher-Reset zu Ihrer gewünschten Uhrzeit erfolgt.
6. Session Replay, scroll map, form analysis (Webvisor):

   💡 Die wichtigste Funktion: Wenn Sie diese Option aktivieren, ermöglicht Yandex Metrica die Aufzeichnung von Mausbewegungen, Scrolltiefe und Klicks auf Spiel- oder Artikelkarten als anonymisierte Videowiedergabe.

---

Schritt 2: Fill Out the Profile (Website-Profil konfigurieren)

Im zweiten Schritt stellt Yandex Metrica 5 kurze Profilfragen, um branchenspezifische Benchmark-Berichte präzise erstellen zu können:

1. Site Type (Website-Typ)

Wenn Sie ein Portal mit Schwerpunkt auf Artikeln, technischen Leitfäden, Nachrichten oder Dokumentationen betreiben, wählen Sie Informational website (Website with text content); handelt es sich um eine reine Werbe- oder Vorstellungsseite für Apps/Spiele, wählen Sie Promo website:

2. Industry (Branche)

Wählen Sie passend zu Ihren Inhalten Technologie, Medien, Kunst/Kultur oder – falls keine passende Kategorie vorhanden ist – ganz unten Other:

3. CMS (Content-Management-System)

Falls Ihre Website ein fertiges System wie WordPress, Drupal, Joomla oder Wix verwendet, wählen Sie es aus der Liste aus. Nutzen Sie wie unser Portal Mayhem Corporation eine eigens entwickelte PHP/MySQL- oder .NET-Architektur, wählen Sie unten in der Liste Other:

4. CRM-System

Falls Sie kein unternehmensweites CRM einsetzen, können Sie auch hier mit Other (oder Without CRM) fortfahren:

5. Your Role in the Project (Ihre Rolle im Projekt)

Wenn Sie Indie-Entwickler oder Studio-Gründer sind, wählen Sie Business management oder Product management und klicken Sie auf Continue:

---

Schritt 3: Installation des Code-Snippets (tag.js)

Im letzten Schritt generiert Yandex Metrica den aktuellen JavaScript-Zählercode (tag.js), den Sie zwischen den Tags <head> oder <body> Ihrer Website einfügen:

Der generierte moderne Zählercode hat folgende Struktur (ersetzen Sie YOUR_TAG_ID durch Ihre eigene Zähler-Nummer):

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

Nachdem Sie den Code in das Haupt-Template Ihrer Website (index.php oder header.php) eingefügt und auf den Server hochgeladen haben, können Sie durch Klicken auf die Schaltfläche "Check tag" überprüfen, ob der Zähler live aktiv ist, und mit "Get started" direkt zu Ihrem Analyse-Dashboard wechseln.

---

2. Reparieren des defekten Yandex Metrica Bild-Badges (Informer) und AdBlocker-Schutz

Auf Websites aus den Jahren 2011–2014 wurde das ikonische türkisfarbene Statistik-Badge (88x31 Pixel) von Yandex Metrica über folgende alte Adresse aufgerufen:

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

Da Yandex den Server bs.yandex.ru sowie das alte Skript watch.js im Laufe der Jahre eingestellt hat, liefert diese Adresse heute einen Fehler HTTP 404 Not Found und führt zu einem fehlerhaften Bildsymbol auf der Seite.

Lösung 1: Aktueller informer.yandex.ru-Endpunkt

Um das visuelle Badge wiederherzustellen, leiten wir die Bildquelle auf den aktuellen Informer-Dienst von Yandex um (https://informer.yandex.ru/informer/...).

Lösung 2: Lokaler Fallback für Besucher mit aktiviertem AdBlocker (onerror)

Heutzutage nutzen viele Gamer und Entwickler einen AdBlocker (uBlock Origin, Brave Shield usw.) in ihrem Browser. Wenn Werbeblocker Analytics-Domains blockieren, kann das Badge-Bild möglicherweise nicht geladen werden. Damit das Design unter keinen Umständen beschädigt wird, hosten wir eine 88x31 Pixel große Kopie des Badges auf unserem eigenen Server (images/yandex_metrica_badge.png) und schalten diese über das onerror-Attribut automatisch ein:

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

Nach dieser Anpassung wird das Yandex Metrica Badge im linken Menü von Mayhem Corporation sowohl in regulären Browsern mit Live-Statistiken als auch in Browsern mit aktiviertem AdBlocker ohne defektes Symbol sauber dargestellt:

Aktives Yandex Metrica Informer-Badge im linken Menü von mayhemcorporation.com/mayhem/index.php nach dem Update.

Türkisfarbenes 88x31 Informer-Badge mit einer Übersicht über Seitenaufrufe, Besuche und eindeutige Besucher.

---

3. Unsere Website und unsere Spiele (Arar Games)

Unsere Website

• Mayhem Corporation: Unser Webportal für Spieleentwicklung und technische Artikel rund um XNA / MonoGame.
  mayhemcorporation.com

Unsere Spiele

• Blocked: Pixel Panzer: 2D-Pixel-Panzer-Action- und Arcade-Spiel.
  Google Play | Microsoft Store
• Paint Trek: 2D-Weltraum-Arcade- und Rätselspiel.
  Google Play | Microsoft Store
• Space Dodger: Reflexbasiertes 2D-Weltraum-Arcade-Spiel.
  Google Play

Soziale Medien

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