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.
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.
Desta forma, temos dois caminhos distintos de execução. Onde:
Ao entrar na aplicação
- Aplicação é carregada e executa a rota requerida;
- Os endpoints são chamados e vão responder;
- O GTM vai ser carregado, executando o evento de pageview, que por sua vez roda as Tags.
Ao mudar de rota
- A aplicação vai carregar os chunks da rota requerida;
- O endpoint será requisitado e vai responder;
- O customEvent (routeChanged) será disparado, executando as Tags necessárias.
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.
