Come aggiungere Yandex Metrica al tuo sito web? Guida all'installazione passo dopo passo, Webvisor e ripristino del badge Informer

Come studio di sviluppo di giochi indipendente o creatore di contenuti, è fondamentale misurare quali articoli leggono i visitatori del tuo sito web, dove cliccano sulla pagina e come interagiscono con i badge dei tuoi store. Sebbene Google Analytics sia uno standard diffuso, Yandex Metrica (Yandex.Metrika) è un potente strumento di analisi per sviluppatori grazie a funzionalità gratuite come Webvisor (Registrazione di sessione / Session Replay), Mappa dei clic (Clickmap), Mappa di scorrimento (Scroll Map) e Badge contatore visivo (Informer).

Noi di Arar Games, mentre rendevamo reattivo (responsive) per dispositivi mobili il nostro portale di sviluppo giochi Mayhem Corporation (mayhemcorporation.com)—online fin dal 2011—ci siamo accorti che il contatore e il badge visivo di Yandex Metrica del 2012 nel menu a sinistra risultavano danneggiati.

Il vecchio badge Yandex Metrica del 2012 con indirizzo bs.yandex.ru appare come un'icona non funzionante nei browser moderni.

In questa guida mostriamo, passo dopo passo, come creare un nuovo tag Yandex Metrica da zero, integrare il codice aggiornato tag.js nel tuo sito e ripristinare il vecchio badge Informer basato su bs.yandex.ru con protezione da AdBlocker.

---

1. Creare un nuovo tag in Yandex Metrica

Dopo aver effettuato l'accesso a metrica.yandex.com con il tuo account Yandex, passa alla schermata Add tag (metrica.yandex.com/add) per aggiungere un nuovo contatore al sito web. La configurazione si suddivide in 3 passaggi principali:

Passaggio 1: Create Tag (Informazioni tag e impostazioni Webvisor)

Nella prima schermata configuriamo i dettagli di base e le impostazioni regionali del sito:

1. Tag name: Inserisci un nome che ti permetta di identificare il progetto nel pannello (es.: Mayhem Corporation).
2. Website URL: Inserisci il dominio principale del tuo sito senza protocollo (https://) (es.: mayhemcorporation.com).
3. Accept data only from the specified addresses: Assicurati di lasciare questa casella selezionata per impedire che altri siti web copino il tuo ID contatore e inquinino le tue statistiche (traffico spam).
4. Including subdomains: Puoi selezionarlo se desideri raccogliere anche i sottodomini come blog.tuosito.com nello stesso contatore.
5. Time zone & Currency: Seleziona un fuso orario appropriato, ad esempio (GMT+03:00) Istanbul, e una valuta come TRY (oppure USD).
6. Session Replay, scroll map, form analysis (Webvisor):

   💡 La caratteristica più critica: Quando questa opzione è attiva, Yandex Metrica ti consente di monitorare i movimenti del mouse dei visitatori, la profondità di scorrimento e le schede di giochi/articoli cliccate come una registrazione video anonimizzata.

---

Passaggio 2: Fill Out the Profile (Configurare il profilo del sito)

Nel secondo passaggio, Yandex Metrica pone 5 brevi domande sul profilo per generare report di benchmark di settore accurati per il tuo sito:

1. Site Type (Tipo di sito)

Se gestisci un portale incentrato principalmente su articoli, guide tecniche, notizie o documentazione, seleziona Informational website (Website with text content); se si tratta di una pagina promozionale diretta per app o giochi, scegli Promo website:

2. Industry (Settore)

In base ai contenuti del tuo sito web, seleziona tecnologia, media, cultura/arte o, se non c'è una corrispondenza esatta nell'elenco, seleziona l'opzione Other in fondo:

3. CMS (Content Management System)

Se il tuo sito utilizza una piattaforma pronta all'uso come WordPress, Drupal, Joomla o Wix, puoi sceglierla dall'elenco. Se utilizzi un'architettura personalizzata in PHP/MySQL o .NET sviluppata da te, come il nostro portale Mayhem Corporation, seleziona l'opzione Other in fondo all'elenco:

4. Sistema CRM

Se non utilizzi alcun CRM aziendale, puoi proseguire selezionando Other (o Without CRM) in questo campo:

5. Your Role in the Project (Il tuo ruolo nel progetto)

Se sei uno sviluppatore indipendente o il fondatore di uno studio, seleziona Business management o Product management e fai clic sul pulsante Continue:

---

Passaggio 3: Installazione dello snippet di codice (tag.js)

Nell'ultimo passaggio, Yandex Metrica genera il codice contatore JavaScript (tag.js) aggiornato da inserire tra i tag <head> o <body> del tuo sito web:

La struttura del codice del contatore aggiornato è la seguente (sostituisci YOUR_TAG_ID con il tuo ID contatore):

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

Dopo aver inserito il codice nel template principale del tuo sito web (index.php o header.php) e averlo caricato sul server, puoi verificare che il contatore sia attivo premendo il pulsante "Check tag" sullo schermo e accedere alla tua dashboard di analisi selezionando "Get started".

---

2. Ripristinare il badge visivo Yandex Metrica (Informer) e protezione AdBlocker

Sui siti web creati tra il 2011 e il 2014, l'iconico badge statistico turchese 88x31 pixel (Informer) di Yandex Metrica veniva richiamato tramite questo vecchio indirizzo:

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

Poiché Yandex ha ritirato nel corso degli anni il server bs.yandex.ru e il vecchio script watch.js, questo indirizzo restituisce ora un errore HTTP 404 Not Found e visualizza un'icona di immagine non trovata sulla pagina.

Soluzione 1: Endpoint aggiornato informer.yandex.ru

Per rendere operativo il badge visivo, reindirizziamo la sorgente dell'immagine al servizio Informer aggiornato di Yandex (https://informer.yandex.ru/informer/...).

Soluzione 2: Fallback locale (onerror) per utenti con AdBlocker

Oggi molti giocatori e sviluppatori utilizzano un AdBlocker (uBlock Origin, Brave Shield, ecc.) nel proprio browser. Quando i blocchi annunci bloccano i domini analitici, l'immagine del badge potrebbe non caricarsi. Per garantire che il layout del design non venga mai compromesso in nessuna circostanza, ospitiamo una copia a 88x31 pixel del badge sul nostro server (images/yandex_metrica_badge.png) e la abilitiamo automaticamente tramite l'attributo 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: dati odierni (visualizzazioni, visite e visitatori unici)"
        class="ym-advanced-informer" data-cid="YOUR_TAG_ID" data-lang="tr" />
</a>
<!-- /Yandex.Metrika informer -->

Dopo questa modifica, il badge Yandex Metrica nel menu a sinistra di Mayhem Corporation viene visualizzato sia con le statistiche in tempo reale nei browser standard, sia senza icone spezzate nei browser con AdBlocker attivo:

Badge Yandex Metrica Informer attivo nel menu sinistro di mayhemcorporation.com/mayhem/index.php dopo l'aggiornamento.

Badge Informer turchese 88x31 che riepiloga visualizzazioni di pagina, visite e visitatori unici.

---

3. Il nostro sito web e i nostri giochi (Arar Games)

Il nostro sito web

• Mayhem Corporation: Il nostro portale web dedicato a post e guide tecniche sullo sviluppo di giochi e su XNA / MonoGame.
  mayhemcorporation.com

I nostri giochi

• Blocked: Pixel Panzer: Gioco d'azione arcade 2D con carri armati pixelati.
  Google Play | Microsoft Store
• Paint Trek: Gioco arcade e puzzle 2D a tema spaziale.
  Google Play | Microsoft Store
• Space Dodger: Gioco arcade spaziale 2D focalizzato sui riflessi.
  Google Play

Social Media

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