Com afegir Yandex Metrica al vostre lloc web: Guia d'instal·lació pas a pas, Webvisor i reparació de la insígnia Informer

Com a estudi de desenvolupament de videojocs independent o creador de contingut, és fonamental mesurar quins articles llegeixen els visitants del vostre lloc web, on fan clic a la pàgina i com interactuen amb les insígnies de les botigues. Tot i que Google Analytics és un estàndard comú, gràcies a funcions gratuïtes com Webvisor (Enregistrament de sessions / Session Replay), Mapa de clics (Clickmap), Mapa de desplaçament (Scroll Map) i la Insígnia visual de comptador (Informer), Yandex Metrica (Yandex.Metrika) és una eina d'analítica molt potent per als desenvolupadors.

Com a Arar Games, mentre adaptàvem el nostre portal de desenvolupament de jocs Mayhem Corporation (mayhemcorporation.com), en línia des del 2011, perquè fos compatible amb dispositius mòbils (responsive), ens vam adonar que el nostre comptador de Yandex Metrica i la insígnia visual del 2012 al menú esquerre es mostraven trencats.

La insígnia antiga de Yandex Metrica del 2012 amb adreça bs.yandex.ru, que apareix com una icona trencada als navegadors moderns.

En aquesta guia, compartim pas a pas com crear una nova etiqueta (Tag) a Yandex Metrica des de zero, com integrar el codi actualitzat tag.js al vostre lloc web i com reparar la insígnia Informer trencada de l'antic bs.yandex.ru amb protecció contra AdBlocker.

---

1. Creació d'una nova etiqueta (Tag) a Yandex Metrica

Després d'iniciar sessió amb el vostre compte de Yandex a metrica.yandex.com, anem a la pantalla Add tag (metrica.yandex.com/add) per afegir un nou comptador de lloc web. La instal·lació consta de 3 passos bàsics:

Pas 1: Create Tag (Informació de l'etiqueta i configuració de Webvisor)

A la primera pantalla configurem les opcions bàsiques d'identitat i regió del nostre lloc web:

1. Tag name: Introduïu un nom que us permeti identificar el vostre projecte al tauler (p. ex.: Mayhem Corporation).
2. Website URL: Introduïu el domini principal del vostre lloc web sense el protocol (https://) (p. ex.: mayhemcorporation.com).
3. Accept data only from the specified addresses: Assegureu-vos de deixar aquesta casella marcada per evitar que altres llocs web copiïn el vostre ID de comptador i contaminin les vostres estadístiques amb trànsit brossa (spam).
4. Including subdomains: Podeu marcar-la si també voleu recopilar dades de subdominis com ara blog.elvostrelloc.com al mateix comptador.
5. Time zone & Currency: Seleccioneu la zona horària adequada (p. ex.: (GMT+03:00) Istanbul) i la moneda com ara TRY (o USD) perquè el restabliment diari de visitants coincideixi amb la vostra hora local.
6. Session Replay, scroll map, form analysis (Webvisor):

   💡 La característica més crítica: Quan activeu aquesta opció, Yandex Metrica us permet veure els moviments del ratolí dels visitants, la profunditat de desplaçament i en quines targetes de jocs o articles fan clic, com si fos una gravació de vídeo anonimitzada.

---

Pas 2: Fill Out the Profile (Configuració del perfil del lloc web)

Al segon pas, Yandex Metrica fa 5 preguntes breus sobre el perfil per generar informes precisos de referència sectorial (benchmark):

1. Site Type (Tipus de lloc web)

Si gestioneu un portal centrat en articles, guies tècniques, notícies o documentació, marqueu Informational website (Website with text content); si és directament una pàgina de promoció d'una aplicació o joc, podeu seleccionar Promo website:

2. Industry (Sector)

Segons el contingut del vostre lloc web, seleccioneu tecnologia, mitjans de comunicació, cultura/art o, si no hi ha una coincidència exacta a la llista, l'opció Other que hi ha al final:

3. CMS (Sistema de gestió de continguts)

Si el vostre lloc web utilitza una infraestructura ja preparada com WordPress, Drupal, Joomla o Wix, podeu seleccionar-la de la llista. Si utilitzeu una arquitectura personalitzada en PHP/MySQL o .NET desenvolupada per vosaltres mateixos, com el nostre portal Mayhem Corporation, seleccioneu l'opció Other a la part inferior de la llista:

4. Sistema CRM

Si no utilitzeu cap CRM corporatiu, podeu continuar seleccionant Other (o Without CRM) en aquest camp:

5. Your Role in the Project (El vostre rol en el projecte)

Si sou un desenvolupador independent o el fundador d'un estudi, seleccioneu Business management o Product management i feu clic al botó Continue:

---

Pas 3: Instal·lació del fragment de codi (tag.js)

A l'últim pas, Yandex Metrica genera el codi de comptador JavaScript actualitzat (tag.js) que haureu d'enganxar entre les etiquetes <head> o <body> del vostre lloc web:

L'estructura del codi de comptador actualitzat que es genera és la següent (en lloc de YOUR_TAG_ID, figurarà el vostre propi número de comptador):

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

Després d'afegir el codi a la plantilla principal del vostre lloc web (index.php o header.php) i enviar-lo al servidor, podeu comprovar que el comptador funciona en directe fent clic al botó "Check tag" de la pantalla i, tot seguit, accedir al vostre tauler d'analítica fent clic a "Get started".

---

2. Reparació de la insígnia visual de Yandex Metrica (Informer) i protecció contra AdBlocker

Als llocs web creats entre 2011 i 2014, la icònica insígnia turquesa d'estadístiques de 88x31 píxels (Informer) de Yandex Metrica es cridava mitjançant la següent adreça antiga:

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

Com que Yandex va retirar el servidor bs.yandex.ru i l'antic script watch.js amb el pas dels anys, aquesta adreça ara retorna un error HTTP 404 Not Found i genera una icona d'imatge trencada a la pàgina.

Solució 1: Punt de connexió actualitzat informer.yandex.ru

Per fer funcionar la insígnia visual, redirigim la font de la imatge al servei Informer actual de Yandex (https://informer.yandex.ru/informer/...).

Solució 2: Fallback local (onerror) per a visitants que utilitzen AdBlocker

Avui dia, molts jugadors i desenvolupadors utilitzen AdBlocker (uBlock Origin, Brave Shield, etc.) als seus navegadors. Quan els bloquejadors de publicitat bloquegen els dominis d'analítica, la imatge de la insígnia pot tornar a fallar en carregar-se. Per garantir que el disseny no es trenqui sota cap circumstància, allotgem una còpia de la insígnia de 88x31 píxels al nostre propi servidor (images/yandex_metrica_badge.png) i l'activem automàticament amb l'atribut 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 -->

Després d'aquest ajust, la insígnia de Yandex Metrica al menú esquerre de Mayhem Corporation es mostra tant en navegadors convencionals amb estadístiques en directe com en navegadors amb AdBlocker activat sense cap icona trencada:

Insígnia Informer activa de Yandex Metrica al menú esquerre de mayhemcorporation.com/mayhem/index.php després de l'actualització.

Insígnia Informer turquesa de 88x31 que resumeix les visualitzacions de pàgina, les visites i els visitants únics.

---

3. El nostre lloc web i els nostres jocs (Arar Games)

El nostre lloc web

• Mayhem Corporation: El nostre portal web amb articles tècnics sobre desenvolupament de videojocs i XNA / MonoGame.
  mayhemcorporation.com

Els nostres jocs

• Blocked: Pixel Panzer: Joc d'acció i arcade de tancs en píxel 2D.
  Google Play | Microsoft Store
• Paint Trek: Joc arcade i de trencaclosques espacial en 2D.
  Google Play | Microsoft Store
• Space Dodger: Joc arcade espacial en 2D basat en reflexos.
  Google Play

Xarxes socials

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