Medir aplicativos de página única

Este documento é destinado a desenvolvedores que querem medir as visualizações de página no aplicativo de página única usando o Google Analytics.

Os 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: imagine que você tem um formulário para adquirir alguns leads. O formulário tem três telas: > * A primeira tela para capturar as informações do cliente. * Segunda tela, em que os clientes indicam interesse em determinados serviços. * Terceira tela: 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

Esta página pressupõe que você já tenha:

• Uma conta e uma 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 uma 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 os métodos pushState() e replaceState() para atualizar as telas, use essa opção.

• Eventos personalizados: se o site usa o objeto DocumentFragment para renderizar telas diferentes, use essa opção.

Implementação da mudança no histórico do navegador

Se o SPA usa a API History, você pode ativar a medição otimizada no Google Analytics para acompanhar automaticamente as visualizações de página com base em eventos do histórico de navegação.

Ativar a medição otimizada no Google Analytics

Para medir page_views automaticamente com base no histórico de navegação:

1. Abra o Google Analytics.

2. Em Administrador, em Coleta de dados e modificação, clique em Fluxos de dados > Web.

3. Em Medição otimizada, deslize a chave para Ativado para habilitar todas as opções.

4. Clique para editar as opções individuais. Em Visualizações de página, clique em Mostrar configurações avançadas. Ative as opções Carregamentos de página e Alterações na página de acordo com os eventos do histórico de navegação.

   

5. Salve as alterações.

Verificar a configuração de medição

Para verificar se o aplicativo de página única mede as visualizações de página corretamente:

1. Ative o modo de depuração para cada tag na configuração de medição do SPA. Saiba como monitorar eventos no DebugView.

2. Clique no aplicativo de página única. Quando você clicar em uma nova tela virtual, um novo evento page_view vai aparecer no DebugView. Compare os parâmetros do evento page_view com o evento page_view anterior 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 aspectos adicionais 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 as visualizações em um SPA, o navegador geralmente mantém a posição de rolagem atual. Isso pode fazer com que os usuários não vejam a parte de cima da nova página virtual e afetar o acompanhamento da profundidade de rolagem.

Recomendação: redefina de forma programática 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 no topo do novo conteúdo, o que permite que o acompanhamento 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) não funcionar após um carregamento de página virtual, isso pode indicar como seu SPA atualiza o DOM.

Recomendação: verifique se o framework do SPA e a lógica de roteamento atualizam 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 as navegações virtuais para confirmar a acessibilidade do conteúdo.

Impacto nos eventos automáticos

Se você implementar corretamente a medição de visualizações de página virtuais no seu SPA, o Google Analytics vai processar outros eventos automáticos de forma adequada. Se as visualizações de página virtuais não forem registradas para mudanças de tela, o Google Analytics vai tratar o SPA como uma única página, levando a métricas distorcidas.

Por exemplo, o evento user_engagement mede o tempo que um usuário passa ativamente em uma página. Sem as visualizações de página virtuais, 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ções 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, geralmente antes do processamento do evento page_view da nova página virtual.
• Outros eventos, como cliques ou rolagens, são associados ao page_location da página virtual que o usuário está visualizando no momento.

Isso permite analisar o engajamento do usuário e outras métricas de telas ou seções individuais no SPA, oferecendo uma compreensão mais precisa da jornada do usuário.