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:

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

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:

Há pouco mais de um ano, assumi o compromisso de ajudar, como CTO, a Guiando a escalar seu negócio e...
Ontem, dia 25/07/2018, a convite do Canal.NET, compartilhei alguns insights sobre modelagem de microsserviços a partir de processos de negócio....
Este é o primeiro post de uma série onde pretendo compartilhar, com considerável nível de detalhe, como resolver problemas de...
Ao utilizar recursos não gerenciados, em .NET, precisamos garantir que estes sejam devidamente liberados. Para isso, quando criamos classes que...
Como você pode se considerar um profissional se você não sabe se todo seu código funciona? Como você pode saber...
A aquisição de novos clientes é importante para o crescimento. Entretanto, a manutenção dos clientes atuais tende a ser mais...