Medir aplicativos de página única com o Gerenciador de tags do Google

Neste tutorial, mostramos como configurar a medição do Google Analytics para um aplicativo de página única (SPA) usando o Gerenciador de tags do Google. Você vai aprender a configurar sua propriedade do Google Analytics, ativar as variáveis necessárias do GTM e criar tags que são acionadas em mudanças no histórico.

Antes de começar

Este tutorial pressupõe que você já tem:

• Uma conta e uma propriedade do Google Analytics.
• Um contêiner do Gerenciador de tags do Google instalado no seu SPA.
• Função de editor (ou superior) no Google Analytics e no Gerenciador de tags do Google.

Etapa 1: preparar o fluxo de dados do GA4

Para rastrear manualmente eventos page_view em um SPA, primeiro desative as visualizações de página automáticas com base no histórico no GA4 para evitar contagem dupla.

1. Abra o Google Analytics.
2. Em Administrador, em Coleta de dados e modificação, clique em Fluxos de dados.
3. Selecione seu fluxo de dados da Web.
4. Em Medição otimizada, clique no ícone de configurações .
5. Em Visualizações de página > Mostrar configurações avançadas, desmarque Alterações na página de acordo com os eventos do histórico de navegação.
6. Clique em Salvar.

Etapa 2: ativar as variáveis de histórico integradas no Gerenciador de tags

Para usar acionadores ou variáveis com base no histórico no GTM, primeiro ative as variáveis integradas de histórico.

1. Abra o Gerenciador de tags do Google.
2. No espaço de trabalho, acesse Variáveis.
3. Em Variáveis incorporadas, clique em Configurar.
4. Na seção Histórico, ative as seguintes variáveis:
   • History New URL Fragment
   • History Old URL Fragment
   • History New State
   • History Old State
   • History Source
5. Feche o painel de configuração.

Observação: essas variáveis não são estritamente necessárias para a configuração básica de visualização de página. Eles só são usados se você quiser filtrar o acionador ou implementar uma lógica personalizada, como a lógica da página anterior mencionada na observação final desta página.

Observação: algumas documentações mais antigas podem se referir a Old History URL ou New History URL. Elas não são variáveis integradas padrão. Em vez disso, use as variáveis listadas.

Etapa 3: criar o acionador de mudança de histórico

Em seguida, crie um acionador que seja disparado sempre que um evento de mudança de histórico (como pushState ou replaceState) ocorrer no seu SPA.

1. No espaço de trabalho do Gerenciador de tags, acesse o menu Acionadores.
2. Clique em Novo.
3. Em Configuração do acionador, escolha o acionador Mudança no histórico.
4. (Opcional) Se você quiser rastrear apenas algumas mudanças de tela, atualize o acionador para ser disparado em Algumas mudanças no histórico.
5. Nomeie o acionador (por exemplo, "Mudança de histórico") e clique em Salvar.

Etapa 4: criar a tag do Google

Agora, crie uma tag do Google que atualize o parâmetro page_location sempre que ocorrer uma mudança no histórico.

1. No menu Tags, clique em Nova.
2. Em Configuração da tag, escolha a tag do Google.
3. Insira seu ID da tag (o mesmo ID usado para a tag do Google inicial).

4. Em Definições de configuração, adicione os seguintes parâmetros:

   • page_location: {{Page URL}}
   • page_title: {{Page Title}}
   • update: true
   Observação: o parâmetro update mescla os valores de configuração na configuração de tag atual e suprime um evento page_view duplicado imediato. O parâmetro page_referrer não está incluído aqui porque o Google Analytics rastreia automaticamente o referenciador externo original no carregamento de página inicial. Ao omitir esse parâmetro, o Google Analytics preenche automaticamente o URL da página virtual anterior como o referenciador para o detalhamento do caminho de navegação nos seus relatórios.

5. Dê um nome à tag (por exemplo, "Tag do Google - atualização de SPA") e clique em Salvar.

   Observação: não adicione um acionador na seção Acionamento para essa tag do Google. Ela é acionada como uma tag de configuração usando o sequenciamento de tags na etapa 5.

Etapa 5: enviar o evento virtual page_view

Por fim, crie uma tag de evento do GA4 para enviar o evento page_view real para cada carregamento de página virtual.

1. Clique em Nova no menu Tags.
2. Em Configuração da tag, escolha Google Analytics: evento do GA4.
3. Insira seu código da avaliação.
4. Defina o Nome do evento como page_view.
5. Em Configurações avançadas > Sequenciamento de tags, selecione Disparar uma tag antes do evento do GA4 - visualização de página virtual e escolha a tag Tag do Google - atualização de SPA que você criou na etapa 4.
6. Em Acionamento, selecione o acionador Mudança no histórico criado na Etapa 3.
7. Nomeie a tag (por exemplo, "Evento do GA4: exibição de página virtual") e clique em Salvar.

Etapa 6: verificar sua configuração

Para garantir que as visualizações de página virtual estejam sendo registradas corretamente:

1. No Gerenciador de tags, clique em Visualizar para entrar no modo de visualização.
2. Navegue pela SPA.
3. Na DebugView do Google Analytics, verifique se um novo evento page_view aparece para cada mudança de tela.
4. Verifique se os valores page_location correspondem às suas expectativas.

Observação: usar o {{Referrer}} padrão captura a origem inicial que levou o usuário ao seu site. Para rastrear a página virtual anterior no seu SPA como o referenciador, implemente uma variável personalizada do GTM para armazenar o local da página anterior.