Cómo añadir Yandex Metrica a tu sitio web: Guía de instalación paso a paso, Webvisor y reparación del badge Informer
Como estudio de desarrollo de videojuegos independiente o creador de contenido, resulta fundamental medir qué artículos leen los visitantes que llegan a tu sitio web, en qué elementos hacen clic y cómo interactúan con las insignias de las tiendas de aplicaciones. Aunque Google Analytics es un estándar muy extendido, Yandex Metrica (Yandex.Metrika) es una herramienta analítica sumamente potente para desarrolladores gracias a funciones gratuitas como Webvisor (grabación de sesiones / Session Replay), mapa de clics (Clickmap), mapa de desplazamiento (Scroll Map) e insignia visual de contador (Informer).
En Arar Games, mientras adaptábamos a dispositivos móviles (diseño responsivo) nuestro portal de desarrollo de videojuegos Mayhem Corporation (mayhemcorporation.com), activo desde 2011, observamos que nuestro contador e insignia visual de Yandex Metrica de 2012 situados en el menú izquierdo aparecían como una imagen rota.
bs.yandex.ru mostrándose como un icono roto en los navegadores actuales.
En esta guía te explicamos paso a paso cómo crear una nueva etiqueta (Tag) en Yandex Metrica desde cero, cómo integrar el código actualizado tag.js en tu sitio web y cómo reparar la insignia Informer rota procedente de bs.yandex.ru con protección frente a bloqueadores de publicidad (AdBlocker).
1. Crear una nueva etiqueta (Tag) en Yandex Metrica
Tras iniciar sesión con tu cuenta de Yandex en metrica.yandex.com, entra en la pantalla Add tag (metrica.yandex.com/add) para añadir un nuevo contador para un sitio web. La configuración consta de 3 pasos básicos:
Paso 1: Create Tag (Datos de la etiqueta y configuración de Webvisor)
En la primera pantalla configuramos la identidad básica y los parámetros regionales del sitio:
- Tag name: Introduce un nombre que te permita identificar el proyecto en el panel (ej.:
Mayhem Corporation). - Website URL: Introduce el dominio principal de tu web sin protocolo
https://(ej.:mayhemcorporation.com). - Accept data only from the specified addresses: Asegúrate de dejar esta casilla marcada para evitar que otros sitios copien tu ID de contador y contaminen tus estadísticas con tráfico no deseado (spam).
- Including subdomains: Puedes marcar esta opción si también deseas recopilar datos de subdominios como
blog.tusitio.comen el mismo contador. - Time zone & Currency: Selecciona la zona horaria adecuada (por ejemplo,
(GMT+03:00) Istanbul) y como monedaTRY(oUSD) para que los reinicios diarios de estadísticas coincidan con tu horario de referencia. - Session Replay, scroll map, form analysis (Webvisor):
💡 La función más importante: Al activar esta opción, Yandex Metrica te permite ver los movimientos de ratón de los usuarios, la profundidad de desplazamiento y los clics en fichas de juegos o artículos en forma de grabaciones de vídeo anonimizadas.
Paso 2: Fill Out the Profile (Configuración del perfil del sitio)
En el segundo paso, Yandex Metrica formula 5 preguntas breves sobre el perfil del sitio para generar informes comparativos precisos del sector (benchmarks):
1. Site Type (Tipo de sitio web)
Si gestionas un portal centrado en artículos, guías técnicas, noticias o documentación, elige Informational website (Website with text content); si se trata de una página promocional directa de una aplicación o juego, selecciona Promo website:
2. Industry (Sector)
Según el contenido de tu web, selecciona tecnología, medios de comunicación, arte/cultura o la opción Other al final de la lista si no encuentras una coincidencia exacta:
3. CMS (Sistema de gestión de contenidos)
Si tu web utiliza una plataforma lista como WordPress, Drupal, Joomla o Wix, puedes seleccionarla en la lista. Si empleas una arquitectura a medida desarrollada en PHP/MySQL o .NET como nuestro portal Mayhem Corporation, marca la opción Other situada al final de la lista:
4. Sistema CRM
Si no utilizas un sistema CRM comercial, selecciona también aquí Other (o Without CRM) y continúa:
5. Your Role in the Project (Tu rol en el proyecto)
Si eres un desarrollador independiente o el fundador del estudio, selecciona Business management o Product management y pulsa el botón Continue:
Paso 3: Instalación del fragmento de código (tag.js)
En el último paso, Yandex Metrica genera el código JavaScript actualizado del contador (tag.js), que deberás insertar entre las etiquetas <head> o <body> de tu web:
La estructura del código moderno generado es la siguiente (en lugar de YOUR_TAG_ID figurará tu identificador de contador):
<!-- 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 -->
Una vez añadido el código a la plantilla principal de tu web (index.php o header.php) y subido al servidor, pulsa el botón "Check tag" para verificar que el contador funciona en vivo y después haz clic en "Get started" para acceder a tu panel de analítica.
2. Reparar la insignia visual de Yandex Metrica (Informer) rota y protección frente a AdBlocker
En sitios web creados entre 2011 y 2014, la icónica insignia turquesa de estadísticas de 88x31 píxeles (Informer) de Yandex Metrica se llamaba con la siguiente dirección antigua:
//bs.yandex.ru/informer/OLD_TAG_ID/3_1_3FFEEFFF_1FDECFFF_1_pageviews
Como Yandex fue retirando con los años el servidor bs.yandex.ru y el antiguo script watch.js, esta URL ahora devuelve un error HTTP 404 Not Found y produce un icono de imagen rota en la página.
Solución 1: Punto de conexión actualizado informer.yandex.ru
Para que la insignia visual vuelva a funcionar, redirigimos el origen de la imagen al servicio Informer moderno de Yandex (https://informer.yandex.ru/informer/...).
Solución 2: Fallback local (onerror) para visitantes con AdBlocker
Hoy en día, muchos jugadores y desarrolladores utilizan un AdBlocker (uBlock Origin, Brave Shield, etc.) en sus navegadores. Cuando los bloqueadores de anuncios bloquean los dominios de analítica, la imagen de la insignia puede volver a fallar. Para evitar que el diseño de la web se altere bajo cualquier circunstancia, alojamos una copia de la insignia de 88x31 píxeles en nuestro propio servidor (images/yandex_metrica_badge.png) y la activamos automáticamente con el atributo onerror:
<!-- Yandex.Metrika informer -->
<a href="https://metrica.yandex.com/stat/?id=YOUR_TAG_ID&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 -->
Tras este ajuste, la insignia de Yandex Metrica en el menú lateral de Mayhem Corporation se muestra con estadísticas en tiempo real en navegadores habituales y sin iconos rotos en navegadores con AdBlocker activado:
mayhemcorporation.com/mayhem/index.php tras la actualización.
3. Nuestro sitio web y nuestros juegos (Arar Games)
Nuestro sitio web
- Mayhem Corporation: Nuestro portal web con artículos técnicos sobre desarrollo de videojuegos y XNA / MonoGame.
mayhemcorporation.com
Nuestros juegos
- Blocked: Pixel Panzer: Juego arcade de acción de tanques en 2D con estética pixel art.
Google Play | Microsoft Store - Paint Trek: Juego arcade y de puzles espacial en 2D.
Google Play | Microsoft Store - Space Dodger: Juego arcade espacial en 2D centrado en reflejos rápidos.
Google Play
Redes sociales
- TikTok: @arargamesstudio
- Instagram: @arargamesstudio
- X (Twitter): @arargamesstudio
- YouTube: @koreaaria
- Threads: @arargamesstudio
- Facebook: arargamesstudio
Hiç yorum yok:
Yorum Gönder