Instalação e configuração da tag para sites SPA

Inicialização da tag

Para usar uma tag Yandex Metrica em sites SPA, siga os seguintes passos:

1. Crie e instale o código da tag no seu site, se ainda não estiver instalado.

2. Ao inicializar a tag, defina o parâmetro defer como true. Isso é necessário para desabilitar o envio automático de dados sobre visualizações. Para registrar impressões de página, use a função hit, conforme descrito no ponto 3.
   Exemplo de inicialização da tag:

   ym(XXXXXX, 'init', {
       defer: true,
       clickmap:true,
       trackLinks:true,
       accurateTrackBounce:true
   })
   

3. Para garantir que o Yandex Metrica registre alterações importantes na página, analise a lógica do seu site e insira a função hit (ocorrência) nas partes apropriadas do seu código, para que ela seja convocada cada vez que a página for alterada.
   Chame a função hit:

   ym(XXXXXX, 'hit', url[, options]);
   

   Parâmetros que podem ser informados na função hit:

   Parâmetro	Valor padrão	Tipo	Descrição
   url	—	String	A URL da página em que houve a visualização. Se a URL não for fornecida, será usado o valor de window.location.href
   opções	—	Objeto	—
   campos de opções
   options.callback	—	Função	A função callback a ser convocada após o envio dos dados de visualização de página
   options.ctx	—	Objeto	Contexto acessado pela palavra-chave this na função callback
   options.params	—	Objeto	Parâmetros de sessão
   options.referer	—	String	A URL de onde o usuário carregou o conteúdo da página atual
   options.title	document.title	String	Título da página atual
   Campos para o objeto options.params:
   order_price	—	Duplo	Receita por objetivo. Você pode estipular o custo em alguma moeda ou em unidades convencionais.
   moeda	—	String	Use este campo caso queira informar o custo do objetivo em moeda. O Yandex Metrica reconhece códigos monetários ISO 4217 de três letras. Se uma moeda diferente for informada, serão enviados valores nulos em vez de moedas e quantias.

   Exemplo de chamada da função hit

   ym(XXXXXX, 'init', {});
   //...
   ym(XXXXXX, 'hit', '#contacts', {params:{
       title: 'Informações de contato',
       referer: 'http://exemplo.com.br/#main'
   }});
   

Envio de conversões

Para rastrear eventos do site que não alteram a URL da página, use a função reachGoal:

ym(XXXXXX, 'reachGoal', 'TARGET_NAME);

Exemplos de definição de objetivos no snippet de código.

Transmissão de parâmetros de sessão e de usuário

ym(XXXXXX, 'params', {param1: 'param_value1'})

ym(XXXXXX, 'userParams', {param1: 'param_value1'})

Transmissão de dados de E-commerce

Para transmitir dados, habilite o e-commerce no Yandex Metrica.

Para coletar dados de E-commerce corretamente, lembre-se de invocar a função hit uma vez, quando o usuário carregar uma página nova.

dataLayer.push({
    "ecommerce": {
        "purchase": {
            "actionField": {
               "id" : "TRX987"
            },
            "products": [
                {
                    "id": "25341",
                    "name": "capuz Yandex (masc)",
                    "price": 1345,26,
                    "brand": "Yandex",
                    "category": "Roupa/Roupa masculina/Moletons e capuz",
                    "variant": "Laranja"
                },
                {
                    "id": "25314",
                    "name": "Capuz Yandex (fem)", 
                   "price": 1543,62,
                    "brand": "Yandex",
                    "category": "Roupa/Roupa feminina/Moletons e capuz",
                    "variant": "Branca",
                    "quantity": 3
                }
            ]
        }
   }
});

Habilitação de Reprise de Sessão, mapa de cliques, mapa de links e Análise de Formulários

Você pode conectar a Reprise de Sessão, mapas de cliques e mapas de links a um site SPA. O mapa de rolagem, a análise de formulários e a Reprise de Sessão 1.0 não são compatíveis.

Desabilitação do Yandex Metrica em SPA

Para desabilitar o Yandex Metrica, use o método .destruct() na instância da tag. Este método funciona apenas na versão nova do código da tag Yandex Metrica.

• Para tags inicializadas através do construtor Ya.Metrika2:

  // Inicialização da tag
  const counter = new Ya.Metrika2(counterId);
  
  //  Desinicialização da tag
  counter.destruct()    
  

• Se a inicialização ocorrer com configurações:

  // Inicialização da tag
  const counter = new Ya.Metrika2({
    id: counterId,
    trackLinks: true
  });
  
  // Desinicialização da tag
  counter.destruct()    
  

Use o método destruct apenas para interromper o Yandex Metrica.

Fale conosco