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 deve ser adicionada próximo na parte superior da tag <head> e antes de qualquer outro script ou tag CSS. Em seguida, inclua o ID 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 com base em 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 pelo parâmetro 'GA_MEASUREMENT_ID'.
  4. Inclui outro comando na fila de comandos do ga() para enviar uma exibiçã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 dão detalhes sobre a 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.