Como configurar o Google Analytics em sites one page

PUBLICADO POR AYLTON INACIO
Tutoriais e Artigos > Google Analytics

Este conteúdo é sobre as propriedades do Google Analytics Universal (GAU ou GAv3).

Os sites One Page são os que possuem apenas uma página, com a presença ou não de um menu que ao receber cliques, desce a tela até o ponto com o conteúdo solicitado, sem recarregar a página.

Se você configurar o Google Analytics da maneira padrão em um site qualquer ou one page, receberá os pageviews normalmente toda vez que uma página for carregada. Agora, falando dos sites one page, como receber os pageviews dos cliques no menu sendo que ele não recarrega a página?

A solução para o problema é enviar pageviews virtuais em eventos personalizados, como cliques, por exemplo, usando programação ou os recursos do Google Tag Manager. Vamos ver as duas formas.

Vou considerar que você já sabe fazer a configuração padrão do Google Analytics e Tag Manager.

Se preferir, acesse "Como configurar o Google Analytics em sites one page" no YouTube.

Google Analytics em sites one page com programação

Enviar pageviews virtuais para o Google Analytics com programação é bem simples. Você deve identificar no seu site o gatilho, como um clique, e executar o exemplo de código a seguir:

gtag('config', 'UA-11006XXX-X', {'page_title' : 'Contato','page_path': '/contato'});

Lembrando que esse código é JavaScript e deve ser executado depois do carregamento do código de acompanhamento padrão do GA, no caso foi usado o gtag.js (Global).

Google Analytics em sites one page com GTM

Com o Google Tag Manager é possível enviar os pageviews personalizados para o Google Analytics de diversas formas, através dos acionadores específicos e uma configuração extra na tag.

Por exemplo, se você quiser enviar os pageviews conforme o usuário efetua a rolagem na tela, basta usar o acionador "Profundidade de Rolagem", assim como pode usar "Clique > Apenas links" para enviar os pageviews quando o usuário clicar nos itens do menu.

Já para a configuração extra da Tag, vamos ver um exemplo real!

A imagem a seguir é de um site fictício one page com menu no topo e queremos enviar pageviews para o Google Analytics no carregamento do site e também ao clicar no item "Contato" do menu, que não recarrega a página, por isso vamos precisar de uma configuração extra.

O primeiro passo é configurar o Google Analytics normalmente pelo Google Tag Manager, ou seja, uma Tag GA Universal com o acionador "All Pages Exibição de Página". Dessa forma sempre que alguém carregar o site, será enviado um pageview.

O próximo passo é enviar um pageview para o GA quando o usuário clicar no item Contato, então é preciso criar uma nova Tag GA Universal com uma configuração extra. Você deve clicar em "Mais Configurações" e definir o campo "page" com o valor "Contato", como na imagem a seguir:

Depois é só configurar o acionador de clique no item Contato do menu, vincular com a Tag, colocar em produção e ver no Google Analytics, em Tempo Real, o pageview de acesso ao site e também o pageview ao clicar no item Contato do menu.

Importante lembrar que você pode usar uma variável no lugar do valor "Contato" para não ter que criar uma Tag para cada item do menu, mas isso depende de como seu site foi feito e também do seu nível de conhecimento com Google Tag Manager.