Adicionar a analytics.js ao seu site

A analytics.js, também conhecida como "tag do Google Analytics", é uma biblioteca JavaScript para avaliar como os usuários interagem com seu site. Neste documento, mostraremos como adicioná-la.

Tag do Google Analytics

A tag do Google Analytics precisa ser adicionada na parte superior da tag <head> e antes de qualquer outro script ou tag CSS. Além disso, é necessário substituir a string 'GA_MEASUREMENT_ID' pelo ID da propriedade (também conhecido como "código de avaliação") da propriedade do Google Analytics com que você quer trabalhar.

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

O código acima realiza quatro ações principais:

  1. Cria um elemento <script> que inicia o download assíncrono da biblioteca JavaScript analytics.js a partir de https://www.google-analytics.com/analytics.js.
  2. Inicializa uma função global ga (chamada fila de comandos do ga()) que permite programar comandos para execução quando a biblioteca analytics.js estiver carregada e pronta para uso.
  3. Adiciona um comando à fila de comandos do ga() com o objetivo de criar um novo objeto do rastreador para a propriedade especificada por meio do parâmetro 'GA_MEASUREMENT_ID'.
  4. Adiciona outro comando à fila de comandos do ga() para enviar uma visualização da página atual ao Google Analytics.

As implementações personalizadas requerem a modificação das duas últimas linhas da tag do Google Analytics (comandos create e send) ou a adição de um código adicional para capturar mais interações. No entanto, evite alterar o código que carrega a biblioteca analytics.js e inicializar a função da fila de comandos do ga().

Tag assíncrona alternativa

A tag do Google Analytics descrita acima garante que o script seja carregado e executado assincronamente em todos os navegadores, mas não permite o pré-carregamento dele pelos navegadores modernos.

A tag assíncrona alternativa a seguir aceita esse recurso, que proporciona um ligeiro aumento de desempenho em navegadores modernos, mas aciona um carregamento síncrono no IE 9 e em navegadores móveis mais antigos que não reconhecem o atributo de script async. Só use essa configuração se os visitantes usarem navegadores modernos para acessar seu site.

<!-- Google Analytics -->
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- End Google Analytics -->

Quais dados são coletados pela tag do Google Analytics?

Ao adicionar uma dessas tags ao seu site, você envia uma visualização para cada página que os usuários visitam. O Google Analytics processa esses dados e pode inferir uma grande quantidade de informações, incluindo:

  • O tempo total que um usuário passa no seu site
  • O tempo que um usuário passa em cada página e em que ordem essas páginas foram acessadas.
  • Em quais links internos ele clicou (com base no URL da próxima visualização de página)

Além disso, o endereço IP, a string do user agent e a inspeção inicial da página realizada pela analytics.js ao criar um novo objeto do rastreador são usados para determinar aspectos como:

  • A localização geográfica do usuário
  • O navegador e o sistema operacional usados.
  • O tamanho da tela e se o Flash ou o Java está instalado.
  • O site de referência

Próximas etapas

Os dados coletados por meio da tag do Google Analytics podem ser suficientes para as necessidades básicas de geração de relatórios, mas, em alguns casos, talvez seja necessário responder a perguntas adicionais sobre seus usuários.

Nos guias deste site, explicamos como avaliar as interações importantes usando a analytics.js, mas, antes de implementar um recurso específico, é altamente recomendável ler os artigos indicados em Princípios básicos na navegação à esquerda. Esses artigos proporcionam uma visão geral de alto nível da biblioteca analytics.js e ajudam a entender os exemplos de código usados em todo o site.

O próximo guia dessa série explica como a analytics.js funciona.