Este documento é destinado a desenvolvedores que querem medir as visualizações de página no aplicativo de página única usando o Google Analytics.
Aplicativos de página única (SPA) são sites que carregam um documento HTML uma vez e buscam qualquer conteúdo adicional usando APIs JavaScript.
Exemplo: suponha que você tenha um formulário para adquirir alguns leads. Ele tem três telas:
- Primeira tela para capturar as informações do cliente.
- Segunda tela em que os clientes indicam interesse em determinados serviços.
- Terceira página para se inscrever em webinars relacionados aos interesses do cliente.
A chave para medir as visualizações de página de SPAs corretamente é contar as visualizações de página de cada tela com que um usuário interage e acertar o referenciador da página, para que você possa rastrear corretamente a jornada do usuário.
Antes de começar
Nesta página, presume-se que você já tenha:
Uma conta e propriedade do Google Analytics para seu site. Saiba como configurar o Google Analytics.
Uma tag do Google implementada no seu site que é disparada quando a página é carregada inicialmente. Saiba como configurar a tag do Google.
Implementar a medição de aplicativos de página única
Para implementar a medição precisa de SPA, use um destes métodos para acionar uma nova visualização de página virtual:
Mudanças no histórico do navegador (recomendado): se o SPA usa a API History, especificamente o método
pushState()ereplaceState()para atualizar telas, use essa opção.Eventos personalizados: se o site usa o
DocumentFragmentobjeto para renderizar telas diferentes, use essa opção.
Implementação de mudança de histórico do navegador
Se o SPA usa a API History, você pode ativar a medição otimizada no Google Analytics para rastrear automaticamente as visualizações de página com base nos eventos do histórico de navegação.
Ativar a medição otimizada no GA4
Para medir page_views automaticamente com base no histórico de navegação:
Abra o Google Analytics.
Em Administrador, na seção Coleta de dados e modificação, clique em Fluxos de dados > Web.
Em Medição otimizada, deslize a chave para Ativado para habilitar todas as opções.
Clique para editar as opções individuais. Em Visualizações de página, clique em Mostrar configurações avançadas. Ative Carregamentos de página e Alterações na página de acordo com os eventos do histórico de navegação.
Salve as alterações.
Observação:quando a medição otimizada está ativada para "Alterações na página de acordo com os eventos do histórico de navegação", o Google Analytics detecta automaticamente eventos de histórico (como os usados em SPAs) e envia eventos page_view. Não é necessário configurar variáveis ou acionadores de histórico específicos no Gerenciador de tags do Google para enviar visualizações de página ao GA4.
Usar acionadores do Gerenciador de tags do Google para eventos de histórico
Se você precisar disparar outros tipos de tags no Gerenciador de tags do Google com base em mudanças no histórico de navegação, como enviar dados para outras plataformas de marketing, use o tipo de acionador "Mudança de histórico".
Ao configurar tags ou variáveis para trabalhar com o acionador de mudança de histórico, use as variáveis integradas corretas fornecidas pelo Gerenciador de tags do Google:
History New URL Fragment: o fragmento do URL após o evento de histórico.History Old URL Fragment: o fragmento do URL antes do evento de histórico.History New State: o novo objeto de estado do histórico.History Old State: o objeto de estado do histórico antigo.History Source: a origem do evento de histórico (comopopstate,pushState,replaceState).
Essas variáveis integradas podem precisar ser ativadas primeiro no Gerenciador de tags do Google em Variáveis > Configurar.
Para mais detalhes sobre esse acionador, consulte Acionador de mudança de histórico.
Verificar a configuração de medição
Para verificar se o aplicativo de página única mede as visualizações de página corretamente:
Ative o modo de depuração para cada tag na configuração de medição do SPA. Saiba como monitorar eventos no DebugView.
Clique no aplicativo de página única. Quando você clica em uma nova tela virtual, um novo evento
page_viewaparece no DebugView. Compare os parâmetros do eventopage_viewcom o eventopage_viewanterior para verificar se o referenciador e o local da página foram atualizados corretamente.
Outras considerações para SPAs
Além de enviar eventos page_view, considere estes outros aspectos para uma integração robusta de SPA com o Google Analytics e uma melhor experiência do usuário:
Gerenciar a posição de rolagem
Quando os usuários navegam entre visualizações em um SPA, o navegador normalmente retém a posição de rolagem atual. Isso pode significar que os usuários não veem a parte de cima da nova página virtual, e isso pode afetar o rastreamento da profundidade de rolagem.
Recomendação:redefina programaticamente a posição de rolagem para a parte de cima da página ou o contêiner de conteúdo principal após cada transição de página virtual.
// Example: Reset window scroll position on a route change in your SPA
window.scrollTo(0, 0);
// Or, if your content is within a specific element:
// document.getElementById('main-content').scrollTo(0, 0);
Com essa mudança, os usuários vão começar na parte de cima do novo conteúdo, o que permite que o rastreamento de rolagem do Google Analytics meça o engajamento na nova página virtual com precisão.
Garantir a acessibilidade do conteúdo para recursos do navegador
Se os usuários relatarem problemas com recursos do navegador, como a pesquisa na página (Ctrl + F) que não funciona após um carregamento de página virtual, isso pode indicar como o SPA atualiza o DOM.
Recomendação:garanta que a estrutura do SPA e a lógica de roteamento atualizem de forma completa e síncrona as partes relevantes do DOM com o conteúdo da nova página. A renderização atrasada ou o conteúdo oculto da árvore do DOM principal podem não ser indexáveis imediatamente pela função de pesquisa do navegador. Teste a pesquisa na página após navegações virtuais para confirmar a acessibilidade do conteúdo.
Impacto em eventos automáticos
Se você implementar corretamente a medição de visualização de página virtual no SPA, o Google Analytics vai processar outros eventos automáticos de maneira adequada. Se as visualizações de página virtual não forem registradas para mudanças de tela, o Google Analytics vai tratar o SPA como uma única página, o que vai gerar métricas distorcidas.
Por exemplo, o evento user_engagement mede o tempo que um usuário passa ativamente em uma página. Sem visualizações de página virtual, todo o tempo de engajamento é atribuído ao carregamento de página inicial, o que impossibilita a análise do tempo gasto em telas individuais.
Quando a medição de visualização de página virtual é implementada corretamente:
- O evento
user_engagementé enviado quando o usuário navega de uma página virtual para outra. - O tempo de engajamento da página virtual anterior é calculado e enviado com o evento
user_engagement, normalmente pouco antes do eventopage_viewda nova página virtual ser processado. - Outros eventos, como cliques ou rolagens, são associados ao
page_locationda página virtual que o usuário está visualizando.
Isso permite analisar o engajamento do usuário e outras métricas de telas ou seções individuais no SPA, proporcionando uma compreensão mais precisa da jornada do usuário.