11 Ekim 2026 Pazar

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




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

Como um estúdio de videojogos independente ou criador de conteúdos, é essencial medir quais os artigos que os visitantes do seu website leem, onde clicam na página e de que forma interagem com os emblemas das suas lojas. Embora o Google Analytics seja um padrão generalizado, o Yandex Metrica (Yandex.Metrika) é uma ferramenta analítica poderosa para programadores, oferecendo funcionalidades gratuitas como Webvisor (Gravação e Reprodução de Sessões / Session Replay), Mapa de Cliques (Clickmap), Mapa de Deslocamento (Scroll Map) e o Emblema Visual de Contador (Informer).

Nós, na Arar Games, ao tornarmos o nosso portal de desenvolvimento de jogos Mayhem Corporation (mayhemcorporation.com), online desde 2011, responsivo para dispositivos móveis, reparámos que o contador e o emblema visual do Yandex Metrica de 2012 no nosso menu lateral esquerdo estavam a surgir quebrados.

Imagem Quebrada Antiga do Yandex Metrica no Menu Esquerdo da Mayhem Corporation
Antigo emblema do Yandex Metrica de 2012 do endereço bs.yandex.ru, a surgir como um ícone quebrado nos navegadores modernos.

Neste guia, partilhamos passo a passo como criar uma nova etiqueta (Tag) do Yandex Metrica de raiz, integrar o código atualizado tag.js no seu website e reparar o emblema quebrado do Informer proveniente do antigo bs.yandex.ru com proteção contra AdBlocker.

1. Criar uma Nova Etiqueta (Tag) no Yandex Metrica

Após iniciar sessão em metrica.yandex.com com a sua conta Yandex, acedemos ao ecrã Add tag (metrica.yandex.com/add) para adicionar um novo contador de website. A configuração é composta por 3 passos essenciais:

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

No primeiro ecrã, configuramos a identidade base e as definições regionais do nosso website:

Passo 1: Ecrã de Criação de Nova Etiqueta no Yandex Metrica

  1. Tag name: Introduza um nome que ajude a identificar o seu projeto no painel (Ex.: Mayhem Corporation).
  2. Website URL: Introduza o domínio principal do seu website sem o protocolo (https://) (Ex.: mayhemcorporation.com).
  3. Accept data only from the specified addresses: Certifique-se de manter esta caixa assinalada para evitar que outros websites copiem o seu ID de contador e adulterem as suas estatísticas (tráfego de spam).
  4. Including subdomains: Pode selecionar esta opção se pretender agregar também subdomínios como blog.oseuwebsite.com no mesmo contador.
  5. Time zone & Currency: Selecione o seu fuso horário (Ex.: (GMT+03:00) Istanbul) e a moeda como TRY (ou USD) para que as horas de reinicialização diária de visitantes correspondam às suas necessidades.
  6. Session Replay, scroll map, form analysis (Webvisor):

    💡 A Funcionalidade Mais Crítica: Ao ativar esta opção, o Yandex Metrica permite observar os movimentos do cursor dos visitantes, a profundidade de deslocamento (scroll) e quais os cartões de jogos/artigos em que clicam, tal como uma gravação de vídeo anonimizada.

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

No segundo passo, o Yandex Metrica coloca 5 breves questões de perfil para gerar relatórios de comparação setorial (benchmark) com rigor:

Passo 2: Preenchimento das Informações de Perfil do Website

1. Site Type (Tipo de Website)

Se gere um portal com foco em artigos, guias técnicos, notícias ou documentação, selecione Informational website (Website with text content); se se tratar de uma página promocional direta para uma aplicação/jogo, selecione Promo website:

Seleção do Tipo de Website

2. Industry (Setor)

De acordo com o conteúdo do seu website, selecione tecnologia, média, cultura/arte ou, caso não exista uma correspondência exata na lista, escolha a opção Other no fundo:

Opções de Setor 1

Opções de Setor 2

3. CMS (Sistema de Gestão de Conteúdos)

Se o seu website utiliza uma plataforma predefinida como WordPress, Drupal, Joomla ou Wix, pode selecioná-la a partir da lista. Se utiliza uma arquitetura personalizada em PHP/MySQL ou .NET desenvolvida por si, como o nosso portal Mayhem Corporation, selecione Other no final da lista:

Seleção de CMS

4. Sistema de CRM

Caso não utilize qualquer CRM empresarial, pode prosseguir selecionando Other (ou Without CRM) neste campo:

Seleção de CRM

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

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

Seleção do Papel no Projeto

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

No último passo, o Yandex Metrica gera o código atualizado do contador JavaScript (tag.js) que irá colocar entre as etiquetas <head> ou <body> do seu website:

Passo 3: Código do Contador Yandex Metrica e Ecrã de Instalação

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

Após adicionar o código ao modelo principal do seu website (index.php ou header.php) e submetê-lo para o servidor, clique no botão "Check tag" no ecrã para confirmar que o contador se encontra a funcionar em direto e clique em "Get started" para aceder ao seu painel analítico.

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

Nos websites criados entre 2011 e 2014, o emblemático crachá de estatísticas turquesa de 88x31 píxeis (Informer) do Yandex Metrica era chamado através 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 devolve agora HTTP 404 Not Found e apresenta um ícone de imagem quebrada na página.

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

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

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

Atualmente, muitos jogadores e programadores utilizam AdBlocker (uBlock Origin, Brave Shield, etc.) nos respetivos navegadores. Quando os bloqueadores de publicidade bloqueiam domínios analíticos, a imagem do emblema pode voltar a falhar o carregamento. Para garantir que o design nunca seja comprometido em circunstância alguma, alojamos uma cópia de 88x31 píxeis do emblema no nosso próprio servidor (images/yandex_metrica_badge.png) e ativamo-la automaticamente através 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 esta intervenção, o emblema do Yandex Metrica no menu esquerdo da Mayhem Corporation é apresentado tanto em navegadores normais com estatísticas em tempo real, como em navegadores com AdBlocker ativo sem qualquer ícone quebrado:

Emblema Renovado do Yandex Metrica no Menu Esquerdo da Mayhem Corporation
Emblema Informer do Yandex Metrica ativo no menu esquerdo de mayhemcorporation.com/mayhem/index.php após a atualização.

Vista de Perto do Emblema 88x31 do Yandex Metrica
Emblema Informer turquesa de 88x31 que sintetiza visualizações de página, visitas e visitantes únicos.

3. O Nosso Website e os Nossos Jogos (Arar Games)

O Nosso Website

  • Mayhem Corporation: O nosso portal com artigos técnicos dedicados ao desenvolvimento de jogos e a XNA / MonoGame.
    mayhemcorporation.com

Os Nossos Jogos

Redes Sociais




Gönderen zaman:
Etiketler: , , , , , ,

Hiç yorum yok:

Yorum Gönder

Kaydol: Kayıt Yorumları (Atom)