Instalação de tag em site com CSP

O código de tag gerado pelo Yandex Metrica é destinado à inserção linear no código HTML das páginas. Em sites que usam a tecnologia Content Security Policy, esse código não será executado, a menos que você tome providências específicas. Em particular, é preciso usar o cabeçalho HTTP para dar ao navegador permissão para processar os dados. O cabeçalho HTTP deve incluir a diretiva src-script com o atributo nonce (isso exige a assinatura do conteúdo do elemento script) e a diretiva img-src para processar o conteúdo do elemento noscript.

Além disso, o Yandex Metrica oferece outra maneira de habilitar o código da tag: inserindo apenas o conteúdo do elemento noscript no código HTML das páginas e movendo o conteúdo do elemento script para um script externo (por exemplo, para um arquivo JS).

Qualquer que seja o método escolhido, você precisará modificar o cabeçalho HTTP para adicionar permissão de acesso ao Yandex Metrica.

Inserção do código da tag no código HTML das páginas de um site

Caso queira usar este método, o cabeçalho HTTP Content-Security-Policy ou Content-Security-Policy-Report-Only deverá conter as seguintes diretivas:

• script-src com o atributo nonce. Esse atributo deve conter um valor de string com uma sequência aleatória de caracteres (letras e números). Esse valor deve ser gerado aleatoriamente no servidor de forma separada para cada solicitação.

  Content-Security-Policy: script-src 'nonce-<character sequence>';
  

  A mesma sequência de caracteres deve estar contida no atributo nonce do elemento script do código da tag nas páginas do site.

  ...
  <!-- Yandex.Metrika counter -->
  <script type="text/javascript" nonce="<character sequence>">
      (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||
      []).push(arguments)};
  ...
  

• img-src para permitir o processamento do conteúdo do elemento noscript.

  Content-Security-Policy: img-src https://mc.yandex.ru;
  

• connect-src para conectar com o Yandex Metrica.

  Content-Security-Policy: connect-src https://mc.yandex.ru;
  

• child-src com a string blob: https://mc.yandex.ru para que a Reprise de Sessão, o mapa de cliques, o mapa de links e o mapa de rolagem funcionem corretamente.

  Content-Security-Policy: child-src blob: https://mc.yandex.ru;
  

• frame-src com a string blob: https://mc.yandex.ru para que a Reprise de Sessão, o mapa de cliques, o mapa de links e o mapa de rolagem funcionem corretamente.

  Content-Security-Policy: frame-src blob: https://mc.yandex.ru;
  

• frame-ancestors com a string blob: https://mc.yandex.ru para que a Reprise de Sessão, o mapa de cliques, o mapa de links e o mapa de rolagem funcionem corretamente.

  Content-Security-Policy: frame-ancestors blob: https://mc.yandex.ru;
  

Exemplo do cabeçalho HTTP ao usar este método:

Content-Security-Policy:
 ...
 img-src https://mc.yandex.ru;
 script-src https://mc.yandex.ru https://yastatic.net 'nonce-<character sequence>';
 connect-src https://mc.yandex.ru;
 ...

Uso de um script externo para conectar o código da tag

Se você usar este método, o cabeçalho HTTP Content-Security-Policy ou Content-Security-Policy-Report-Only poderá contar com um conjunto geral de diretivas, inclusive regras para carregar dados do Yandex Metrica:

• script-src para permitir o processamento de scripts.

  Content-Security-Policy: script-src https://mc.yandex.ru https://yastatic.net;
  

• img-src para permitir o processamento do conteúdo do elemento noscript.

  Content-Security-Policy: img-src https://mc.yandex.ru;
  

  Copiado

• connect-src para conectar com o Yandex Metrica.

  Content-Security-Policy: connect-src https://mc.yandex.ru;
  

• child-src com a string blob: https://mc.yandex.ru para que a Reprise de Sessão, o mapa de cliques, o mapa de links e o mapa de rolagem funcionem corretamente.

  Content-Security-Policy: child-src blob: https://mc.yandex.ru;
  

  Copiado

• frame-src com a string blob: https://mc.yandex.ru para que a Reprise de Sessão, o mapa de cliques, o mapa de links e o mapa de rolagem funcionem corretamente.

  Content-Security-Policy: frame-src blob: https://mc.yandex.ru;
  

  Copiado

Exemplo do cabeçalho HTTP ao usar este método:

Content-Security-Policy:
 ...
 img-src https://mc.yandex.ru;
 script-src 'self' https://mc.yandex.ru https://yastatic.net;
 connect-src https://mc.yandex.ru;
 ...

O exemplo abaixo habilita o código JavaScript em um arquivo JS externo. Apenas o elemento script com o atributo src precisa ser adicionado ao código HTML das páginas do site. Esse atributo deve conter o caminho para o arquivo (por exemplo, metrika.js).

<script type="text/javascript" src="/metrika.js"></script>

1. Na interface do Yandex Metrica, acesse Configurações > Tag e copie do campo o conteúdo do elemento script.

2. Adicione este código ao arquivo metrika.js.

   Exemplo de conteúdo do arquivo

   (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();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", "ym")
       ym(XXXXXX, "init", {
           id:XXXXXX,
           clickmap:true,
           trackLinks:true,
           accurateTrackBounce:true
       });
   

   Onde XXXXXX é o número de uma tag Yandex Metrica.

   Copiado

3. Para que a tag colete dados de usuários que estiverem com o JavaScript desabilitado, adicione o conteúdo do elemento noscript ao código HTML das páginas do site:

   <noscript><div><img src="https://mc.yandex.ru/watch/XXXXXX" style="position:absolute; left:-9999px;" alt="" /></div></noscript> 
   

   Copiado

Fale conosco