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 uma resposta

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:

This one comes from Ayende’s book about RavenDB. If you want to learn RavenDB basics, I would recommend you to...
Felicidade é uma coisa ótima. Tanto que, geralmente, nos sentimos plenos, inclusive, quando fazemos alguém feliz – não necessariamente a...
What kind of optimizations could we expect from the C# compiler and the JIT? In this post, I would like...
Recentemente, compartilhei uma excelente palestra, do Feredico Lois, colega no desenvolvimento do RavenDB, sobre padrões para alta performance com C#....
Ano passado, Mario Fusco escreveu uma série de posts questionando a forma como programadores Java estão implementando os padrões de projeto definidos...
Um de nossos objetivos, nesse momento, é  melhorar a comunicação, compartilhando a visão do nosso fluxo de trabalho com a...