GTM do lado do servidor para aplicativos de página única (SPAs)

O rastreamento de aplicativos de página única (SPAs) pode ser complicado, pois eles não recarregam páginas inteiras, dificultando o rastreamento padrão. O Google Tag Manager (GTM) do lado do servidor ajuda a resolver isso manipulando dados no lado do servidor e melhorando a precisão e o desempenho do rastreamento.

Neste guia, orientaremos você na configuração do GTM do lado do servidor para SPAs e abordaremos as melhores maneiras de gerenciar visualizações de página, eventos e interações.

Um aplicativo de página única (SPA) é um aplicativo da web que carrega inicialmente uma página HTML e atualiza seu conteúdo dinamicamente à medida que os usuários interagem, em vez de recarregar novas páginas para cada ação ou navegação.

Os SPAs se tornaram populares porque oferecem vantagens críticas em relação aos sites tradicionais de várias páginas:

Exemplos de SPAs incluem Gmail, onde o conteúdo é atualizado sem recarregar a página; Facebook, permitindo que você role, poste e comente sem atualizar; e Trello, onde as tarefas são gerenciadas na mesma página. Os SPAs oferecem uma experiência rápida e perfeita para aplicativos com muita interação do usuário.

Rastrear aplicativos de página única (SPAs) usando GA4 e GTM é mais complexo do que rastrear sites normais devido ao modo como os SPAs funcionam. Compreendemos essa complexidade e estamos aqui para orientá-lo.

Aqui está o porquê:

- Ao contrário dos sites tradicionais, não há recarregamentos de página inteira, onde cada clique carrega uma nova página (e aciona "Visualizações de página" do GA4). SPAs carregam conteúdo dinamicamente. Isso significa que o gatilho padrão "Visualização de página" não funciona da mesma maneira.

- São necessários acionadores de eventos personalizados. Como não há recarregamentos de página, você deve criar gatilhos personalizados que detectem interações específicas do usuário, como cliques em botões ou alterações no URL, para rastrear ações significativas.

- Complexidade no rastreamento de fluxos de usuários. Com SPAs, os usuários podem permanecer na mesma página enquanto interagem com diferentes seções. O rastreamento dessas interações requer a configuração de um rastreamento de eventos mais detalhado para capturar essas transições de página.

- Potenciais lacunas de dados. Você corre o risco de perder dados cruciais de engajamento sem o rastreamento adequado, pois o GA4 não rastreia automaticamente as alterações de conteúdo nos SPAs. Configurações personalizadas no GTM são necessárias para garantir que nada se perca.

A complexidade decorre em grande parte do comportamento dinâmico dos SPAs, que exige uma configuração mais manual para garantir uma coleta de dados precisa. Embora o Google Analytics 4 inclua rastreamento integrado para essas visualizações de página, ele nem sempre funciona perfeitamente imediatamente. Além disso, certos sites podem ser complicados de rastrear de forma eficaz.

Para resolver esse problema, é necessária uma configuração extra para rastrear esses sites ou aplicativos da web de maneira eficaz. Mas não se preocupe: mostraremos maneiras de rastrear aplicativos de página única usando o Google Analytics 4 e o Gerenciador de tags do Google.

Veja como você pode rastrear SPAs com eficácia usando três métodos comuns:

1. Medição Aprimorada do GA4 para Visualizações de Página

O GA4 possui um recurso integrado que rastreia automaticamente as visualizações de página em SPAs. Ele funciona detectando alterações de URL, mas pode precisar de alguns ajustes para rastrear tudo corretamente, dependendo de como seu site está configurado. É um bom ponto de partida, mas pode ser melhor para alguns sites.

2. Gatilho de Mudança de Histórico do GTM

Google Tag Manager pode rastrear quando os usuários navegam por um SPA usando o gatilho de alteração de histórico. Esse gatilho escuta alterações no histórico do navegador (como quando os usuários se movem entre as seções), permitindo rastrear interações mesmo que a página não seja totalmente recarregada.

3. Push de Data Layer Push com GTM

Nesse método, você envia eventos personalizados ou alterações de página para a camada de dados em seu SPA. O GTM pode então detectar esses pushes e enviar os dados corretos para o GA4. Essa abordagem oferece mais controle e permite rastrear interações específicas com mais precisão.

Se você puder implementar todas as três opções de rastreamento, é melhor escolher a última, que usa a assistência do desenvolvedor e o dataLayer.push. Este método oferece maior controle e flexibilidade, tornando-o a solução mais confiável. Enviar eventos específicos diretamente para a camada de dados garante que as principais interações sejam capturadas com precisão, mesmo em SPAs mais complexos. Embora possa exigir alguma contribuição do desenvolvedor, a precisão e a robustez dessa abordagem fazem com que o esforço valha a pena. Em nosso blog, você pode encontrar um guia completo sobre a data layer no Google Tag Manager.

Vamos dar uma olhada em cada uma das opções.

Para rastrear aplicativos de página única usando a medição aprimorada de visualizações de página do Google Analytics 4, siga estas etapas simples:

1. Vá para configurações de transmissão,

Faça login em sua conta GA4 e encontre suas configurações de fluxo de dados. 

2. Data Streams no Admin.

Clique no ícone Admin (canto inferior esquerdo) e, na seção Property, escolha Data Streams dados e selecione o fluxo que deseja rastrear.

Isso ajudará você a configurar o rastreamento de visualizações de página para seu SPA.

3. Clique na engrenagem de configurações em Medição aprimorada.

4. Clique em Mostrar configurações avançadas.

5. Verifique as alterações da página com base nos eventos do histórico do navegador.

Eventos de medição aprimorada, como rolagens, cliques externos e pesquisas no site, devem ser rastreados com precisão, levando a dados subnotificados ou exagerados. Para garantir um rastreamento preciso, é melhor desligá-los ou configurá-los usando GTM.

6. Quando terminar, clique no botão Salvar no canto superior direito.

Para verificar se tudo está funcionando corretamente, use o modo de visualização do GTM. Faça login no GTM e clique em Preview no canto superior direito.

Isso abrirá uma nova janela onde você poderá inserir o URL do seu site. Após clicar em Connect, a página será atualizada e exibirá os detalhes de rastreamento do seu site.

Ao selecionar o contêiner GTM na parte superior, você verá o evento de mudança de histórico, também conhecido como gtm.historyChange-v2.

Em seguida, clique no seu ID de medição GA4 na parte superior para verificar se o evento de visualização de página está sendo rastreado e enviado corretamente.

Se os eventos não estiverem sendo enviados para o GA4, não se preocupe – pode ser um sinal de que a configuração atual não está capturando tudo corretamente. 

Passar para o segundo método de rastreamento é uma boa ideia. Esse método pode fornecer uma maneira mais confiável de registrar com precisão seus eventos de visualização de página e outras interações. Às vezes, configurações diferentes funcionam melhor para SPAs específicos, portanto, experimentar outros métodos pode ajudar.

Este método também monitora mudanças no histórico do site, semelhante ao funcionamento do recurso de medição aprimorada do GA4.

By detecAo detectar essas alterações no histórico, você pode usá-las para acionar eventos de visualização de página e enviá-los ao GA4.ting these history changes, you can use them to trigger pageview events and send them to GA4.

Veja como rastrear aplicativos de página única usando o gatilho de alteração de histórico do Gerenciador de tags do Google:

1. Faça login no Google Tag Manager.

2. Vá para Triggers e clique em New para criar um novo gatilho.

3. Role para baixo e selecione History Change como o tipo de gatilho.

4. Defina o gatilho para disparar em Todas as alterações do histórico e clique em Save.

Deve ser configurado agora, mas vamos testá-lo para garantir. Entre no modo de visualização do GTM assim como fizemos no primeiro método.

Como você pode ver, a tag de configuração do GA4 está sendo acionada, mas você também pode notar vários eventos de histórico, que podem ocorrer com alguns SPAs.

Observe: anova tag do Google substituiu a tag de configuração do GA4.

Se você encontrar esse problema, é essencial revisar e ajustar seus gatilhos para disparar em alterações específicas, e não em todas as alterações, garantindo que os dados permaneçam limpos e precisos.

O terceiro método entra em ação quando os dois primeiros métodos não funcionam. Essa abordagem exige que um desenvolvedor insira um data layer no código do site. O data layer armazena valores e aciona visualizações de página no Google Tag Mananger.

Aqui está um exemplo de como o código pode parecer:

<script>

 window.dataLayer = window.dataLayer || [];

 window.dataLayer.push({

   'event': 'virtualPageview',

   'pageUrl': 'https://www.example.com/path/?example#example',

   'pageTitle': 'Example title'

 });

</script>

Isso permite capturar diretamente visualizações de páginas e outros eventos críticos, integrando-os ao código do site.

Os valores para pageUrl e pageTitle devem ser dinâmicos, pois serão alterados para cada página ou tipo de conteúdo. Idealmente, o desenvolvedor lidará com isso e quaisquer hashtags, pontos de interrogação ou outros parâmetros de consulta nos URLs.

Assim que a camada de dados estiver instalada, você pode concluir a configuração no GTM com estas três etapas:

1. Configurando duas variáveis ​​da camada de dados

2. Criando um gatilho de evento personalizado

3. Configurando uma tag de evento page_view do GA4 para enviar os dados ao GA4

Vamos começar criando as variáveis ​​da camada de dados para pageUrl e pageTitle:

1. Vá para Variables.

2. Clique New.

3. Selecione Data Layer Variable como o tipo e configure as variáveis ​​adequadamente para pageUrl e pageTitle.

4. Agora que armazenamos os valores do URL e do título da página nas variáveis ​​da data layer, a próxima etapa é criar um gatilho com base no evento personalizado (virtualPageview) que definimos anteriormente no data layer.

Veja como configurar o gatilho de evento personalizado:

Este gatilho será ativado sempre que o evento virtualPageview for enviado para a data layer.

5. A seguir, criaremos a tag de evento GA4 para enviar os dados ao GA4. Veja como configurá-lo:

Configure a tag da seguinte maneira:

- Event Name: page_view

- Parâmetros e valores do evento:

- Trigger: Define o gatilho para disparar sempre que o evento personalizado virtualPageview for detectado.

Isso enviará os dados de visualização de página, incluindo o URL dinâmico e o título, para o GA4.

Certifique-se de testar o terceiro método no modo de visualização GTM e no DebugView do GA4 para garantir que os dados corretos estejam sendo coletados, especialmente para os parâmetros page_location (URL) e page_title.

Não adicionamos esses parâmetros à tag de configuração do GA4 porque o GA4 os lê apenas uma vez durante o carregamento inicial da página. Isso significa que seriam perdidas alterações posteriores em um SPA, pois a página não é totalmente recarregada.

Embora alguns desses métodos possam ser desafiadores, eles geralmente são viáveis ​​com uma configuração cuidadosa.

Compreender os desafios dos SPAs não é essencial, mas pode facilitar o tratamento de problemas de rastreamento quando eles surgirem. Aqui estão alguns desafios comuns:

1. Dependência de JavaScript: SPAs dependem muito de JavaScript para funcionar. Se o JavaScript estiver desabilitado, nenhuma das interações será rastreada, pois o aplicativo não funcionará. Embora a renderização no lado do servidor possa oferecer uma solução alternativa, ela pode complicar as coisas, pois outras funções dinâmicas podem não se comportar conforme o esperado.

2. Rastreamento de URLs com parâmetros ou fragmentos: URLs que contêm parâmetros como hashtags ou pontos de interrogação não são rastreados automaticamente. Para lidar com isso, você precisará capturar o URL completo usando window.location.href em uma variável JavaScript e substituir o parâmetro page_location por este valor para cada tag de evento GA4, garantindo que todo o URL seja capturado com precisão.

3. Se vários eventos de alteração de histórico aparecerem no modo de visualização do GTM, é essencial investigar e eliminar quaisquer dados duplicados. Você pode fazer isso ajustando o gatilho para disparar apenas em eventos específicos de alteração do histórico, e não em todos eles.

4. Se você estiver usando o método da camada de dados e perceber que o evento virtualPageview é acionado sempre que o site é carregado, desative a opção Enviar um evento de visualização de página quando esta configuração for carregada para evitar eventos desnecessários de visualização de página.

5. Resolver um problema de referência desonesto, onde o Google atribui erroneamente o tráfego pago como orgânico, é essencial. Para mais detalhes, consulte o artigo de Simo Ahava sobre o tema. Infelizmente, esta correção específica não é atualmente compatível com GA4.

Lembre-se, esta é uma lista parcial de desafios, pois outros podem surgir dependendo da configuração do seu site. No entanto, esses pontos devem lhe dar uma boa ideia do que esperar.

Para rastrear SPAs com eficácia, é essencial seguir estas práticas recomendadas:

Seguir essas práticas recomendadas pode ajudá-lo a evitar problemas comuns e coletar dados precisos e confiáveis ​​ao rastrear SPAs com GA4 e GTM.

Rastrear aplicativos de página única (SPAs) pode ser complicado, mas o Google Tag Manager (GTM) do lado do servidor torna muito mais fácil obter dados precisos. Quer você use as ferramentas do GA4, o gatilho de histórico do GTM ou o método da data layer, essas opções ajudam a rastrear seu conteúdo dinâmico corretamente.

Na Stape.io, somos especialistas em rastreamento do lado do servidor e fornecemos ferramentas como integração da camada de dados e modo de visualização para garantir que sua configuração funcione sem problemas.

Quer melhorar seu rastreamento? Inscreva-se gratuitamente no Stape hoje e deixe-nos ajudá-lo a obter os resultados mais precisos para seus SPAs! Depois de se inscrever, você pode usar nossos guias detalhados de texto e vídeo sobre como configurar o rastreamento do lado do servidor com Stape.