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:

O ano era 2001 ou 2002. Não lembro ao certo. Eu era um jovem programador, pai recente, tentando “encontrar meu...
If you ask me one tip to improve the performance of your applications, it would be: Design your objects to...
Hoje completo 39 anos! Estou em Uberlândia, em um hotel, descansando após um dia de muito trabalho (e um bocado...
Em contextos extremos, é bom lembrar que é importante dedicarmos esforço para aquilo que, de alguma forma, influenciamos. Se um...
The following works as expected when building in Debug – the execution is done after three seconds. But, for some...
No último post desta série, tratamos da “Lei do Retorno Acelerado”. Sabemos que negócios digitais tem crescimento potencialmente exponencial. Neste...

Curso Reputação e Marketing Pessoal

Masterclasses

01

Introdução do curso

02

Por que sua “reputação” é importante?

03

Como você se apresenta?

04

Como você apresenta suas ideias?

05

Como usar Storytelling?

06

Você tem uma dor? Eu tenho o alívio!

07

Escrita efetiva para não escritores

08

Como aumentar (e manter) sua audiência?

09

Gatilhos! Gatilhos!

10

Triple Threat: Domine Produto, Embalagem e Distribuição

11

Estratégias Vencedoras: Desbloqueie o Poder da Teoria dos Jogos

12

Análise SWOT de sua marca pessoal

13

Soterrado por informações? Aprenda a fazer gestão do conhecimento pessoal, do jeito certo

14

Vendo além do óbvio com a Pentad de Burkle

15

Construindo Reputação através de Métricas: A Arte de Alinhar Expectativas com Lag e Lead Measures

16

A Tríade da Liderança: Navegando entre Líder, Liderado e Contexto no Mundo do Marketing Pessoal

17

Análise PESTEL para Marketing Pessoal

18

Canvas de Proposta de Valor para Marca Pessoal

19

Método OKR para Objetivos Pessoais

20

Análise de Competências de Gallup

21

Feedback 360 Graus para Autoavaliação

22

Modelo de Cinco Forças de Porter

23

Estratégia Blue Ocean para Diferenciação Pessoal

24

Análise de Tendências para Previsão de Mercado

25

Design Thinking para Inovação Pessoal

26

Metodologia Agile para Desenvolvimento Pessoal

27

Análise de Redes Sociais para Ampliar Conexões

Lições complementares

28

Apresentando-se do Jeito Certo

29

O mercado remunera raridade? Como evidenciar a sua?

30

O que pode estar te impedindo de ter sucesso

Recomendações de Leituras

31

Aprendendo a qualificar sua reputação do jeito certo

32

Quem é você?

33

Qual a sua “IDEIA”?

34

StoryTelling

35

Você tem uma dor? Eu tenho o alívio!

36

Escrita efetiva para não escritores

37

Gatilhos!

38

Triple Threat: Domine Produto, Embalagem e Distribuição

39

Estratégias Vencedoras: Desbloqueie o Poder da Teoria do Jogos

40

Análise SWOT de sua marca pessoal

Inscrição realizada com sucesso!

No dia da masterclass você receberá um e-mail com um link para acompanhar a aula ao vivo. Até lá!

A sua subscrição foi enviada com sucesso!

Aguarde, em breve entraremos em contato com você para lhe fornecer mais informações sobre como participar da mentoria.

Crie sua conta

Preencha os dados para iniciar o seu cadastro no plano anual do Clube de Estudos:

Crie sua conta

Preencha os dados para iniciar o seu cadastro no plano mensal do Clube de Estudos:

× Precisa de ajuda?