Hoe u Yandex Metrica toevoegt aan uw website: Stapsgewijze installatiehandleiding, Webvisor en Informer-badge repareren

Als onafhankelijke gamestudio of contentmaker is het uiterst belangrijk om te meten welke artikelen uw websitebezoekers lezen, waar op de pagina ze klikken en hoe ze omgaan met uw appstore-badges. Hoewel Google Analytics een gangbare standaard is, maken gratis functies zoals Webvisor (Sessieopname / Session Replay), Klikkaart (Clickmap), Scrolkaart (Scroll Map) en de Visuele tellerbadge (Informer) Yandex Metrica (Yandex.Metrika) tot een zeer krachtige analysetool voor ontwikkelaars.

Als Arar Games merkten we bij het mobielvriendelijk (responsive) maken van ons gameontwikkelingsportaal Mayhem Corporation (mayhemcorporation.com), dat al sinds 2011 online is, dat onze Yandex Metrica-teller en visuele badge uit 2012 in het linkermenu als een gebroken pictogram werden weergegeven.

De oude Yandex Metrica-badge uit 2012 met het adres bs.yandex.ru, die in moderne browsers als een gebroken afbeeldingspictogram verschijnt.

In deze handleiding leggen we stap voor stap uit hoe u vanaf nul een nieuwe tag aanmaakt in Yandex Metrica, de actuele code tag.js integreert in uw website en de defecte Informer-badge van het oude bs.yandex.ru repareert met AdBlocker-bescherming.

---

1. Een nieuwe tag aanmaken in Yandex Metrica

Nadat u bent ingelogd met uw Yandex-account op metrica.yandex.com, gaat u naar het scherm Add tag (metrica.yandex.com/add) om een nieuwe websiteteller toe te voegen. De installatie bestaat uit 3 basisstappen:

Stap 1: Create Tag (Tag-informatie en Webvisor-instelling)

Op het eerste scherm configureren we de basisidentiteits- en regio-instellingen van onze website:

1. Tag name: Voer een naam in waarmee u uw project in het dashboard herkent (bijv.: Mayhem Corporation).
2. Website URL: Voer het hoofddomein van uw website in zonder protocol (https://) (bijv.: mayhemcorporation.com).
3. Accept data only from the specified addresses: Laat dit selectievakje beslist aangevinkt om te voorkomen dat andere websites uw teller-ID kopiëren en uw statistieken vervuilen met spamverkeer.
4. Including subdomains: U kunt dit aanvinken als u ook gegevens van subdomeinen zoals blog.uwwwebsite.com in dezelfde teller wilt verzamelen.
5. Time zone & Currency: Selecteer een geschikte tijdzone (bijv.: (GMT+03:00) Istanbul) en valuta zoals TRY (of USD) zodat het dagelijkse resetten van bezoekersaantallen overeenkomt met uw lokale tijd.
6. Session Replay, scroll map, form analysis (Webvisor):

   💡 Meest cruciale functie: Wanneer u deze optie inschakelt, kunt u met Yandex Metrica de muisbewegingen van bezoekers, scroldiepte en op welke game- of artikelkaarten zij klikken bekijken in de vorm van een geanonimiseerde video-opname.

---

Stap 2: Fill Out the Profile (Websiteprofiel configureren)

In de tweede stap stelt Yandex Metrica 5 korte profielvragen om nauwkeurige sectorbenchmarkrapporten te kunnen genereren:

1. Site Type (Type website)

Als u een portaal beheert dat voornamelijk gericht is op artikelen, technische handleidingen, nieuws of documentatie, selecteert u Informational website (Website with text content); als het een directe promotiepagina voor een app of game is, kunt u Promo website kiezen:

2. Industry (Sector)

Kies op basis van de inhoud van uw website voor technologie, media, cultuur/kunst of, als er geen exacte overeenkomst in de lijst staat, de optie Other onderaan:

3. CMS (Content Management Systeem)

Als uw website gebruikmaakt van een kant-en-klaar platform zoals WordPress, Drupal, Joomla of Wix, kunt u dit in de lijst selecteren. Als u net als ons Mayhem Corporation-portaal een zelfgebouwde PHP/MySQL- of .NET-architectuur gebruikt, kiest u de optie Other onderaan de lijst:

4. CRM-systeem

Als u geen zakelijk CRM gebruikt, kunt u doorgaan door ook in dit veld Other (of Without CRM) te selecteren:

5. Your Role in the Project (Uw rol in het project)

Als u een onafhankelijke ontwikkelaar of studio-oprichter bent, selecteert u Business management of Product management en klikt u op de knop Continue:

---

Stap 3: Codefragment installeren (tag.js)

In de laatste stap genereert Yandex Metrica de actuele JavaScript-tellercode (tag.js) die u tussen de <head>- of <body>-tags van uw website plaatst:

De structuur van de gegenereerde tellercode is als volgt (in plaats van YOUR_TAG_ID komt uw eigen tellernummer te staan):

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

Nadat u de code aan het hoofdsjabloon van uw website (index.php of header.php) hebt toegevoegd en naar de server hebt geüpload, kunt u controleren of de teller live functioneert door op de knop "Check tag" op het scherm te klikken, waarna u met "Get started" naar uw analysedashboard kunt gaan.

---

2. De defecte visuele Yandex Metrica-badge (Informer) repareren en AdBlocker-bescherming

Op websites die tussen 2011 en 2014 zijn gemaakt, werd de iconische turquoise statistiekenbadge van 88x31 pixels (Informer) van Yandex Metrica opgevraagd via het volgende oude adres:

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

Omdat Yandex de server bs.yandex.ru en het oude script watch.js in de loop der jaren buiten gebruik heeft gesteld, retourneert dit adres nu een HTTP 404 Not Found en toont het een gebroken afbeeldingspictogram op de pagina.

Oplossing 1: Actueel eindpunt informer.yandex.ru

Om de visuele badge weer te laten werken, sturen we de afbeeldingsbron door naar de actuele Informer-service van Yandex (https://informer.yandex.ru/informer/...).

Oplossing 2: Lokale fallback (onerror) voor bezoekers met een AdBlocker

Tegenwoordig gebruiken veel gamers en ontwikkelaars een AdBlocker (uBlock Origin, Brave Shield enz.) in hun browser. Wanneer advertentieblokkeerders analysedomeinen blokkeren, kan de afbeelding van de badge opnieuw niet worden geladen. Om ervoor te zorgen dat de lay-out onder geen beding breekt, hosten we een kopie van de badge van 88x31 pixels op onze eigen server (images/yandex_metrica_badge.png) en schakelen we deze automatisch in via het attribuut 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.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 -->

Na deze aanpassing wordt de Yandex Metrica-badge in het linkermenu van Mayhem Corporation zowel in normale browsers met live-statistieken als in browsers met ingeschakelde AdBlocker zonder gebroken pictogrammen weergegeven:

Actieve Yandex Metrica Informer-badge in het linkermenu op mayhemcorporation.com/mayhem/index.php na de update.

Turquoise Informer-badge van 88x31 die paginaweergaven, bezoeken en unieke bezoekers samenvat.

---

3. Onze website en onze games (Arar Games)

Onze website

• Mayhem Corporation: Ons webportaal met technische artikelen over gameontwikkeling en XNA / MonoGame.
  mayhemcorporation.com

Onze games

• Blocked: Pixel Panzer: 2D pixel-tankactie en arcadegame.
  Google Play | Microsoft Store
• Paint Trek: 2D arcadegame en puzzelspel met ruimtethema.
  Google Play | Microsoft Store
• Space Dodger: Op reflexen gebaseerde 2D ruimte-arcadegame.
  Google Play

Sociale media

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