Medir aplicativos de página única

Este documento é destinado a desenvolvedores que querem medir 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: suponha que você tenha um formulário para adquirir alguns leads. O formulário 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.
• Página da terceira tela para se inscrever em webinars relacionados aos interesses do cliente.

A chave para medir corretamente as visualizações de página de SPAs é contar as visualizações de página de cada tela com que um usuário interage e obter o referenciador da página correto para que você possa rastrear a jornada do usuário corretamente.

Antes de começar

Nesta página, presume-se que você já tenha:

• Uma conta e uma propriedade do Google Analytics 4 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 exibiçã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 telas, use essa opção.

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

Implementação do histórico do navegador Implementação de eventos personalizados

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

Ativar a medição otimizada no GA4

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

1. Abra o Google Analytics.

2. Em Administrador, em Coleta e modificação de dados, 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 sua 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 todas as tags na configuração de medição do SPA. Saiba como monitorar eventos no DebugView.

2. Clique no aplicativo de página única. Ao clicar em uma nova tela virtual, um novo evento page_view vai aparecer na 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.