Como Adicionar o Yandex Metrica ao seu Site? Instalação Passo a Passo, Webvisor e Correção do Selo Informer

Como um estúdio de jogos independente ou criador de conteúdo, é essencial medir quais artigos os visitantes do seu site leem, onde clicam na página e como interagem com os selos das suas lojas. Embora o Google Analytics seja um padrão comum, o Yandex Metrica (Yandex.Metrika) é uma ferramenta analítica poderosa para desenvolvedores, oferecendo recursos gratuitos como Webvisor (Gravação de Sessão / Session Replay), Mapa de Cliques (Clickmap), Mapa de Rolagem (Scroll Map) e o Selo Visual de Contador (Informer).

Nós, da Arar Games, ao tornarmos nosso portal de desenvolvimento de jogos Mayhem Corporation (mayhemcorporation.com), no ar desde 2011, responsivo para dispositivos móveis, percebemos que o contador e o selo visual do Yandex Metrica de 2012 em nosso menu lateral esquerdo estavam aparecendo quebrados.

Antigo selo do Yandex Metrica de 2012 do endereço bs.yandex.ru, aparecendo como um ícone quebrado em navegadores modernos.

Neste guia, compartilhamos o passo a passo de como criar uma nova tag do Yandex Metrica do zero, integrar o código atualizado tag.js ao seu site e corrigir o selo quebrado do Informer do antigo bs.yandex.ru com proteção contra AdBlocker.

---

1. Criando uma Nova Tag no Yandex Metrica

Depois de fazer login em metrica.yandex.com com sua conta Yandex, acessamos a tela Add tag (metrica.yandex.com/add) para adicionar um novo contador de site. A configuração é composta por 3 etapas principais:

Passo 1: Create Tag (Informações da Tag e Configuração do Webvisor)

Na primeira tela, configuramos a identidade básica e os ajustes regionais do nosso site:

1. Tag name: Insira um nome que ajude a reconhecer seu projeto no painel (Ex.: Mayhem Corporation).
2. Website URL: Insira o domínio principal do seu site sem o protocolo (https://) (Ex.: mayhemcorporation.com).
3. Accept data only from the specified addresses: Certifique-se de manter esta caixa marcada para evitar que outros sites copiem seu ID de contador e poluam suas estatísticas (tráfego de spam).
4. Including subdomains: Você pode marcar esta opção se também quiser coletar dados de subdomínios como blog.seusite.com no mesmo contador.
5. Time zone & Currency: Selecione seu fuso horário (Ex.: (GMT+03:00) Istanbul) e a moeda como TRY (ou USD) para que os horários de redefinição diária de visitantes correspondam às suas necessidades.
6. Session Replay, scroll map, form analysis (Webvisor):

   💡 Recurso Mais Crítico: Ao ativar esta opção, o Yandex Metrica permite observar os movimentos do mouse dos visitantes, a profundidade de rolagem e em quais cartões de jogos/artigos eles clicam no seu site, exatamente como uma gravação de vídeo anonimizada.

---

Passo 2: Fill Out the Profile (Configuração do Perfil do Site)

Na segunda etapa, o Yandex Metrica faz 5 perguntas curtas sobre o perfil do site para gerar relatórios de comparação de setor (benchmark) com precisão:

1. Site Type (Tipo de Site)

Se você gerencia um portal focado em artigos, guias técnicos, notícias ou documentação, selecione Informational website (Website with text content); se for uma página direta de promoção de aplicativo/jogo, escolha Promo website:

2. Industry (Setor / Indústria)

De acordo com o conteúdo do seu site, selecione tecnologia, mídia, cultura/arte ou, se não houver correspondência exata na lista, escolha a opção Other no final:

3. CMS (Sistema de Gerenciamento de Conteúdo)

Se o seu site usa uma plataforma pronta como WordPress, Drupal, Joomla ou Wix, você pode selecioná-la na lista. Se você utiliza uma arquitetura personalizada em PHP/MySQL ou .NET feita por você mesmo, como nosso portal Mayhem Corporation, selecione Other no final da lista:

4. Sistema de CRM

Se você não utiliza nenhum CRM corporativo, pode continuar selecionando Other (ou Without CRM) neste campo:

5. Your Role in the Project (Seu Papel no Projeto)

Se você for um desenvolvedor independente ou fundador do estúdio, selecione Business management ou Product management e clique no botão Continue:

---

Passo 3: Instalação do Snippet de Código (tag.js)

Na última etapa, o Yandex Metrica gera o código atualizado do contador JavaScript (tag.js) que você inserirá entre as tags <head> ou <body> do seu site:

A estrutura do código do contador atualizado gerado é a seguinte (substitua YOUR_TAG_ID pelo número do seu 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 -->

Depois de adicionar o código ao modelo principal do seu site (index.php ou header.php) e enviá-lo para o servidor, clique no botão "Check tag" na tela para verificar se o contador está funcionando ao vivo e clique em "Get started" para ir para o seu painel de análise.

---

2. Consertando o Selo Visual Quebrado do Yandex Metrica (Informer) e Proteção contra AdBlocker

Nos sites criados entre 2011 e 2014, o icônico selo de estatísticas turquesa de 88x31 pixels (Informer) do Yandex Metrica era carregado por meio do seguinte endereço antigo:

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

Como a Yandex descontinuou o servidor bs.yandex.ru e o antigo script watch.js ao longo dos anos, este endereço agora retorna HTTP 404 Not Found e exibe um ícone de imagem quebrada na página.

Solução 1: Endpoint Atualizado informer.yandex.ru

Para fazer o selo visual funcionar, redirecionamos a origem da imagem para o serviço Informer atual da Yandex (https://informer.yandex.ru/informer/...).

Solução 2: Fallback Local para Visitantes com AdBlocker (onerror)

Hoje em dia, muitos jogadores e desenvolvedores usam AdBlocker (uBlock Origin, Brave Shield, etc.) em seus navegadores. Quando bloqueadores de anúncios barram domínios analíticos, a imagem do selo pode não carregar novamente. Para garantir que o design não seja quebrado em nenhuma circunstância, hospedamos uma cópia de 88x31 pixels do selo em nosso próprio servidor (images/yandex_metrica_badge.png) e a ativamos automaticamente por meio do atributo 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 -->

Após esse ajuste, o selo do Yandex Metrica no menu esquerdo da Mayhem Corporation é exibido tanto em navegadores normais com estatísticas ao vivo quanto em navegadores com AdBlocker ativado sem ícone quebrado:

Selo Informer do Yandex Metrica ativo no menu esquerdo de mayhemcorporation.com/mayhem/index.php após a atualização.

Selo Informer turquesa de 88x31 que resume visualizações de página, visitas e visitantes únicos.

---

3. Nosso Site e Nossos Jogos (Arar Games)

Nosso Site

• Mayhem Corporation: Nosso portal web com artigos técnicos sobre desenvolvimento de jogos e XNA / MonoGame.
  mayhemcorporation.com

Nossos Jogos

• Blocked: Pixel Panzer: Jogo de ação e arcade de tanques em pixel art 2D.
  Google Play | Microsoft Store
• Paint Trek: Jogo de arcade e quebra-cabeça espacial 2D.
  Google Play | Microsoft Store
• Space Dodger: Jogo de arcade espacial 2D focado em reflexos.
  Google Play

Redes Sociais

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