GTM - Ferramenta oficial de features temporárias que viverão para sempre.
Tags: performance, javascript, gtm, googletagmanager
Published: 2021-09-11 13:53:36

No dia a dia de um time de desenvolvimento, a pressão para a implementação de uma feature ou principalmente a correção de um bug é gigantesca e realmente explicável, mas essa pressão pode nos levar a tomar decisões que a longo prazo oneram a performance do site.

Se você precisa ter em mãos os dados de sua página, provavelmente você utiliza a dupla: Google Analytics (GA) e o Google Tag Manager (GTM). Aqui não estarei tão focado em explicar as suas funções, neste [artigo da Alura](https://www.alura.com.br/artigos/google-analytics-e-google-tag-manager), temos uma explicação clara sobre a função e importância de cada um. Minha intenção é conseguir te ajudar a argumentar com seu PO sobre a importância de priorizarmos as soluções definitivas o mais rápido possível, sempre que o GTM for utilizado da maneira errada.

O GTM implementa uma série de tags na nossa página, isso é, blocos de código, com essa facilidade, a área de marketing tem uma ferramenta fácil e rápida para integrar scripts de terceiros na página, manipular cookies ou implementar trackings do GA, porém, junto disso, trazemos a possibilidade de alterar o front-end do nosso site em produção, tornando-se a ferramenta oficial para features temporárias que viverão para sempre no seu site.

## Qual o problema com o GTM?

O GTM traz a possibilidade de implementarmos HTML na página, incluindo a tag `<script>`, isso é, podemos inserir qualquer código Javascript, manipulando qualquer elemento do DOM.

![Imagem de uma tag da ferramenta Google Tag Manager](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gw7stkm3mi42hh2lomzu.png)

Junto disso, sabemos que muitas vezes o custo de criar uma feature dentro do fluxo comum de deploy é alto, algumas empresas passam por processos de aprovação de GMUD’s, podendo levar até alguns dias para que um deploy esteja de fato no ar, nesse momento, ferramentas como o GTM tornam-se tentadoras.

É lógico que, dentro desse cenário citado, caso aconteça um bug em produção, a busca por uma solução rápida fará todo sentido, não estou aqui para julgar e criticar quem pensa em resolver antes de qualquer outra coisa, minha crítica é quando não realizamos a priorização dessa correção no código fonte de maneira imediata.

O script do GTM é implementado no código fonte da sua página, quando o carregamento do seu site é iniciado no navegador, uma requisição é realizada para a API da ferramenta, retornando todas as tags que serão implementadas, incluindo as suas gambiarras. 
 
Apesar da ferramenta possuir um controle para que uma tag seja disparada apenas no momento desejado, por exemplo, podemos definir que uma tag carregue apenas em uma URL específica. Porém, independentemente se essa tag será disparada, o seu código é retornado pela API, aumentando o tamanho dessa resposta e carregando mais conteúdo que o necessário.

De maneira simplória, quanto mais script criarmos no GTM, maior o tamanho da resposta da API, consequentemente, mais lento será o carregamento da sua página.

Além de afetar a performance, temos um segundo problema, o carregamento do GTM é realizado no navegador, então caso você realize uma manipulação no DOM para alterar um elemento HTML, por exemplo, corre o risco que o usuário veja essa mudança acontecendo, gerando um efeito indesejado na página. 
 
A grosso modo, quando iniciamos o carregamento de um site, o servidor devolve o código fonte com o seu elemento HTML que é renderizado no seu navegador, então o script do GTM é acionado, realizando uma chamada para a API e aguardando seu retorno.

![Imagem do network, mostra-se o script do GTM sendo carregado posteriormente ao carregamento inicial da página](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/apu1ed2itgeh3jknp8nb.png)

Essa imagem do network de um famoso portal de notícias exemplifica bem, destacado em azul temos o script do GTM, podemos notar que somente algum tempo depois do carregamento inicial da página que o script foi disparado. É nesse momento que as suas tags serão carregadas, uma a uma, e a sua gambiarra aparecerá de fato. Além da possibilidade de gerar efeitos indesejados ao usuário, afeta diretamente o CLS, métrica do Google Web Vitals para estabilidade visual da sua página, podendo impactar negativamente para o rankeamento de SEO. Deixo esse [artigo](https://www.alura.com.br/artigos/google-page-experience-como-alcancar-uma-boa-estrategia-digital) para entender melhor a importância do Web Vitals para sua página. 

A minha intenção, caro leitor, é instigar o time de desenvolvedores para que sempre que uma mudança desse tipo seja realizada no GTM, logo, seja priorizada para implementar em definitivo e excluir a gambiarra nessa ferramenta, que apesar de muito fácil, pode gerar grandes problemas a longo prazo se não for gerenciada da maneira certa.

E você, qual sua experiência? Na sua empresa existe um site totalmente diferente sendo construído via GTM? Me diga nos comentários.