Utilizando corretamente o Google Tag Manager (GTM) em uma SPA

Utilizar o Google Tag Manager (GTM) em uma Single-Page Aplication (SPA) exige alguns cuidados. Neste post, apresento algumas lições aprendidas na prática.

Para manter a objetividade, assumo que você já sabe o que é o Google Tag Manager e já o utilizou.

NOTA DO ELEMAR: Este post é uma contribuição do Thales Valle. Especialista em arquitetura e implementação de front-end Web.

Entendendo o problema

Em um site que não foi desenvolvido como SPA,  todas as páginas acessadas executam o script especificado na aba Page view do GTM. Logo, nesses sistemas, basta ancorar as tags dos parceiros nos Page Views corretos para que estes recebam as informações que precisam.

Tag do Google TagManager a partir de Pageview

Entretanto, em uma aplicação SPA, há a carga inicial da página, que executa o script definido no Page View, mas há também a necessidade de tratar a mudança por rota (que não dispara o Page View). Com frequência, temos visto implementações que utilizam o gatilho historyChange para tratar a mudança de página por rotas, porém, sem sucesso, pois o GTM acaba sendo acionado antes que a atualização da página tenha sido completada, ocasionando o envio de dados incorretos para parceiros.

Resolvendo o problema

Minha abordagem para enviar dados corretamente usando o GTM não inclui a utilização dos gatilhos de historyChange. Ao invés disso, utilizo um customEvent que aciono somente após ter garantias de que o conteúdo da página tenha sido devidamente atualizado.

global.dataLayer.push({
   event: "routeChanged"
});

No GTM, crio um gatilho que só irá ser executado quando o evento “routeChanged” for executado e a rota em questão der match.

 

Criando o customEvent no Google TagManger

Desta forma, temos dois caminhos distintos de execução. Onde:

Ao entrar na aplicação

  1. Aplicação é carregada e executa a rota requerida;
  2. Os endpoints são chamados e vão responder;
  3. O GTM vai ser carregado, executando o evento de pageview, que por sua vez roda as Tags.

Ao mudar de rota

  1. A aplicação vai carregar os chunks da rota requerida;
  2. O endpoint será requisitado e vai responder;
  3. O customEvent (routeChanged) será disparado, executando as Tags necessárias.

Tag do Google TagManager a partir de customEvent

Importante: as Tags precisam ter o gatilho do customEvent e do PageView ao mesmo tempo. Toda vez que um usuário atualizar a página ou entrar a partir de determinada rota, a Tag vai ser executada com o Pageview. daí para frente, toda rota alterada disparará as Tags com o customEvent.

Concluindo

É essencial para toda aplicação ter parcerias sólidas. Estes parceiros precisam receber os dados corretamente para poder executar seu trabalho.

A estratégia abordada aqui é uma das que funcionam para SPA. Mas sabemos que cada caso é um caso.

Precisando de ajuda, podemos ajudar a resolver algum problema com seus parceiros ou mesmo executar todo o setup inicial do GTM em sua organização.

Compartilhe este insight:

Elemar Júnior

Sou fundador e CEO da EximiaCo e atuo como tech trusted advisor ajudando diversas empresas a gerar mais resultados através da tecnologia.

Elemar Júnior

Sou fundador e CEO da EximiaCo e atuo como tech trusted advisor ajudando diversas empresas a gerar mais resultados através da tecnologia.

Mais insights para o seu negócio

Veja mais alguns estudos e reflexões que podem gerar alguns insights para o seu negócio:

Mais preocupante que o posicionamento do presidente é sua falta de constância. Há dois dias, uma medida provisória proposta pelo...
  Recently, I asked what would be the execution result of the following code: using System.Threading.Tasks; using static System.Console; class...
Este é o primeiro post de uma série onde pretendo compartilhar, com considerável nível de detalhe, como resolver problemas de...
  Recently, I asked what would be the execution result of the following code: using System.Threading.Tasks; using static System.Console; class...
I’ve been spending some time learning from the “Designing Data-Intensive Applications” book. I am reading it for the third time,...
Em contextos extremos, é bom lembrar que é importante dedicarmos esforço para aquilo que, de alguma forma, influenciamos. Se um...
Oferta de pré-venda!

Mentoria em
Arquitetura de Software

Práticas, padrões & técnicas para Arquitetura de Software, de maneira efetiva, com base em cenários reais para profissionais envolvidos no projeto e implantação de software.

× Precisa de ajuda?