Cómo agregar Yandex Metrica a tu sitio web: Guía de instalación paso a paso, Webvisor y reparación del badge Informer
Como estudio independiente de videojuegos o creador de contenido, resulta fundamental medir qué artículos leen los visitantes que llegan a tu sitio web, en qué partes de la página hacen clic y cómo interactúan con las insignias de las tiendas de aplicaciones. Si bien Google Analytics es un estándar muy difundido, Yandex Metrica (Yandex.Metrika) es una herramienta analítica sumamente poderosa 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 para dispositivos móviles (diseño responsivo) nuestro portal de desarrollo de videojuegos Mayhem Corporation (mayhemcorporation.com), activo desde 2011, notamos que nuestro contador e insignia visual de Yandex Metrica de 2012 ubicados en el menú izquierdo se mostraban como una imagen rota.
bs.yandex.ru mostrándose como un icono roto en los navegadores actuales.
En esta guía te mostramos paso a paso cómo crear una nueva etiqueta (Tag) en Yandex Metrica desde cero, integrar el código actualizado tag.js en tu sitio web y reparar la insignia Informer rota procedente de bs.yandex.ru con protección contra bloqueadores de anuncios (AdBlocker).
1. Crear una nueva etiqueta (Tag) en Yandex Metrica
Luego de iniciar sesión con tu cuenta de Yandex en metrica.yandex.com, ingresa a la pantalla Add tag (metrica.yandex.com/add) para agregar un nuevo contador para un sitio web. La configuración comprende 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 del sitio y los ajustes regionales:
- Tag name: Ingresa un nombre que te permita identificar el proyecto en el panel (ej.:
Mayhem Corporation). - Website URL: Ingresa el dominio principal de tu sitio 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 ensucien tus estadísticas con tráfico no deseado (spam).
- Including subdomains: Puedes marcar esta opción si deseas recopilar datos de subdominios como
blog.tusitio.comdentro del mismo contador. - Time zone & Currency: Selecciona la zona horaria correspondiente (por ejemplo,
(GMT+03:00) Istanbul) y la monedaTRY(oUSD) para que el reinicio diario de estadísticas coincida con tu horario de referencia. - Session Replay, scroll map, form analysis (Webvisor):
💡 La característica más importante: Al activar esta opción, Yandex Metrica te permite observar los movimientos del mouse de los usuarios, la profundidad de desplazamiento y los clics en tarjetas de juegos o artículos en forma de grabaciones de video anonimizadas.
Paso 2: Fill Out the Profile (Completar el perfil del sitio web)
En el segundo paso, Yandex Metrica realiza 5 preguntas breves sobre el perfil del sitio para generar reportes comparativos precisos del sector (benchmarks):
1. Site Type (Tipo de sitio web)
Si administras un portal enfocado en artículos, guías técnicas, noticias o documentación, elige Informational website (Website with text content); si se trata directamente de una página promocional de una aplicación o juego, selecciona Promo website:
2. Industry (Industria / Sector)
Según la temática de tu sitio, selecciona tecnología, medios de comunicación, arte/cultura o la opción Other al final de la lista si no encuentras una opción exacta:
3. CMS (Sistema de gestión de contenidos)
Si tu sitio utiliza una plataforma ya preparada como WordPress, Drupal, Joomla o Wix, puedes seleccionarla en la lista. Si utilizas una arquitectura a medida creada en PHP/MySQL o .NET como nuestro portal Mayhem Corporation, marca la opción Other al final de la lista:
4. Sistema CRM
Si no utilizas un sistema CRM comercial, selecciona en este campo 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 haz clic en 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 colocar entre las etiquetas <head> o <body> de tu sitio web:
La estructura del código moderno generado es la siguiente (en lugar de YOUR_TAG_ID aparecerá tu propio 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 que agregues el código a la plantilla principal de tu sitio (index.php o header.php) y lo subas al servidor, haz clic en el botón "Check tag" para verificar que el contador esté funcionando en vivo y luego presiona "Get started" para ingresar al panel de analítica.
2. Reparar la insignia visual de Yandex Metrica (Informer) rota y protección contra AdBlocker
En sitios web creados entre 2011 y 2014, la clásica insignia turquesa de estadísticas de 88x31 píxeles (Informer) de Yandex Metrica se cargaba con la siguiente dirección antigua:
//bs.yandex.ru/informer/OLD_TAG_ID/3_1_3FFEEFFF_1FDECFFF_1_pageviews
Dado que con el paso del tiempo Yandex descontinuó el servidor bs.yandex.ru y el antiguo script watch.js, este enlace ahora devuelve un error HTTP 404 Not Found y genera un icono de imagen rota en la página.
Solución 1: Endpoint actualizado informer.yandex.ru
Para restaurar la insignia visual, 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 publicidad bloquean los dominios de analítica, la imagen de la insignia puede no cargarse. Para garantizar que el diseño del sitio no se altere en ninguna 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 realizar este cambio, la insignia de Yandex Metrica en el menú lateral de Mayhem Corporation se visualiza con estadísticas en tiempo real en navegadores comunes y sin iconos rotos en navegadores con AdBlocker activado:
mayhemcorporation.com/mayhem/index.php luego de 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 estilo pixel art.
Google Play | Microsoft Store - Paint Trek: Juego arcade y de acertijos 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