Esse papo aqui começou la na nossa comunidade do Discord em cima de uma troca de idéia que tivemos, muito obrigado por trazer o assunto Élcio, tmj :)

A necessidade de anonimização e segurança de dados no Google Tag Manager (GTM) tem levado muitos profissionais a buscar maneiras de calcular hashes, como o SHA-256, diretamente no navegador. No entanto, existem desafios técnicos e implicações importantes ao tentar fazer isso no frontend via cGTM. Primeiro vamos a alguns esclarecimentos:

Qual a Diferença? Google Tag Manager Client vs. Google Tag Manager Server
Antes de discutir a implementação do SHA-256 no Google Tag Manager, é essencial entender as diferenças entre o Google Tag Manager Client-Side (cGTM) e o Google Tag Manager Server-Side (sGTM):

| Característica       | cGTM (Client-Side)                      | sGTM (Server-Side)                         |
|----------------------|----------------------------------------|--------------------------------------------|
| Execução            | No navegador do usuário               | No servidor, antes do envio dos dados     |
| Desempenho          | Depende do dispositivo do usuário      | Maior controle e otimização               |
| Segurança           | Exposto ao frontend, pode ser manipulado | Maior proteção contra inspeção e alteração |
| Bloqueadores        | Pode ser afetado por AdBlockers e restrições de privacidade | Menos suscetível a bloqueios |
| Controle de dados   | Limitado                               | Maior flexibilidade e anonimização        |

> É importante ressaltar que um não exclui o outro, na verdade na maioria dos casos o Google Tag Manager Server Side é complementar ao Google Tag Manager Client, beleza?

Agora que entendemos essa diferença, vamos explorar como calcular SHA-256 no cGTM e suas implicações.

O que é SHA-256?

O SHA-256 (Secure Hash Algorithm 256-bit) é uma função criptográfica que transforma qualquer dado de entrada em um valor hash de 256 bits (64 caracteres hexadecimais). Esse processo é unidirecional, o que significa que não é possível recuperar o dado original a partir do hash gerado.

Para que serve?

[SHA-256](https://www.devlingo.com.br/termos/sha-256?utm_source=metricasboss&utm_medium=inside_post) é amplamente utilizado para:

1. Proteção de senhas → Em vez de armazenar senhas diretamente, os sistemas armazenam seus hashes.
2. Integridade de dados → Garante que arquivos ou mensagens não foram alterados.
3. Assinaturas digitais → Utilizado para autenticar a origem de documentos e transações.
4. Blockchain e Criptomoedas → SHA-256 é a base da segurança do Bitcoin e outras criptomoedas.

> No mundo do marketing + dados utilizamos esse modelo de criptografia quando precisamos enviar algum dado sensível a plataformas de terceiros, como api de conversão do Meta por exemplo.

## Como calcular SHA-256 no cGTM?

Existe algumas formas que hoje são amplamente utilizadas para implementação de hashing dentro de um ambiente de navegador, vamos explorar alguns deles trazendo meus 2 centavos para cada uma das opções.

### Usando a API Nativa do Navegador 

O JavaScript fornece através da Web Crypto API uma série de recursos de criptografia para utilização no navegador. O método crypto.subtle.digest() permite calcular SHA-256 de forma nativa. O problema? Ela é assíncrona, e o cGTM não suporta async/await dentro de Variáveis JavaScript Personalizadas.

Para ilustrar a diferença entre operações síncronas e assíncronas, imagine que você está em um restaurante:

Se o serviço fosse síncrono, você faz o pedido e precisa esperar que a comida seja servida antes de continuar qualquer outra atividade.

Se fosse assíncrono, você faz o pedido e pode continuar conversando ou mexendo no celular enquanto aguarda a comida ser preparada e entregue.

No cGTM, precisamos de código síncrono, ou seja, tudo deve acontecer imediatamente sem esperar nada, como se estivéssemos pegando um lanche em um fast-food onde recebemos o pedido na hora. Já a API crypto.subtle.digest() funciona de forma assíncrona, como em um restaurante tradicional onde o prato é preparado enquanto você aguarda.

> Se você pensou "ahh, mas é simples, vou criar uma variável HTML personalizada para tratar as informações de maneira assíncrona e depois enviar como um evento personalizado no Google Tag Manager", você ainda não tem a maturidade necessária para essa conversa, tá?

### Usando bibliotecas externas e seu impacto no carregamento

O uso de bibliotecas externas como CryptoJS foi, por muito tempo, uma solução prática para hashing no navegador. No entanto, esse tipo de abordagem pode trazer diversos impactos negativos no desempenho e na segurança da aplicação. Vamos ver algumas delas abaixo:

1. Tamanho do arquivo e tempo de carregamento → Bibliotecas externas adicionam peso extra ao carregamento da página, impactando o tempo de resposta e, consequentemente, a experiência do usuário.
2. Dependência de terceiros → Utilizar bibliotecas descontinuadas, como o CryptoJS, representa um risco, pois elas não recebem mais atualizações de segurança ou correções de bugs.
3. Possível impacto em SEO e Core Web Vitals → Maior tempo de carregamento e execução de scripts afeta métricas como Largest Contentful Paint (LCP) e Total Blocking Time (TBT), prejudicando o ranqueamento da página.
4. Exposição a vulnerabilidades → Como o código dessas bibliotecas pode ser inspecionado, manipulado e até explorado por atacantes, o uso de soluções puramente client-side para segurança de dados não é recomendado

### Implementação de SHA-256 Síncrona no cGTM de maneira manual
Embora seja possível rodar SHA-256 diretamente no cGTM com uma implementação síncrona, essa abordagem ainda apresenta problemas significativos.

Como o processamento do hash ocorre no navegador do usuário, a performance pode ser afetada, principalmente em dispositivos mais lentos. Além disso, essa implementação ainda depende da máquina do usuário para processar cada requisição, o que significa que o tempo de execução pode variar bastante e, em alguns casos, gerar travamentos perceptíveis em páginas com muitas execuções simultâneas.

Outro problema relevante é que, mesmo sendo uma solução funcional dentro do contexto do cGTM, o código continua sendo exposto no frontend, permitindo que usuários mal-intencionados o inspecionem e manipulem. Isso compromete a segurança da aplicação e pode até gerar inconsistências nos dados coletados.

Portanto, apesar de ser tecnicamente viável, essa abordagem **não é recomendada** para aplicações onde performance e segurança são fatores críticos. O ideal, sempre que possível, é deslocar esse processamento para o backend (sGTM ou outra solução server-side).

## Problemas ao gerar isso no lado do cliente
Existem certas coisas na vida da gente que não tem o que fazer, é melhor escutar cuidado do que escutar coitado. Meu ponto é sobre agora que você leu esse artigo é você fazer a gambiarra sabendo que é uma gambiarra fica ai para seu livre arbítrio tomar a sua decisão.

E Mesmo que qualquer implementação de guru de internet funcione, há **problemas críticos** ao rodar hashing no cGTM:

1. **Exposição do código no navegador** → Qualquer pessoa pode inspecionar e modificar a lógica.
2. Maior consumo de CPU no cliente → O hash será processado no navegador do usuário, podendo impactar performance.
3. **Dificuldade em garantir integridade dos dados** → Se a intenção for anonimização segura, o frontend **não é o melhor lugar**.

Agora, com um entendimento melhor das diferenças entre cGTM e sGTM, fica mais claro por que, em muitos casos, calcular SHA-256 no backend é a melhor opção. Espero ter ajudado beijos de luz.



A necessidade de anonimização e segurança de dados no Google Tag Manager (GTM) tem levado muitos profissionais a buscar maneiras de calcular hashes, como o SHA-256, diretamente no navegador. No entanto, existem desafios técnicos e implicações importantes ao tentar fazer isso no frontend via cGTM.

small_4r.png

thumbnail_4r.png

4r.png

Implementar SHA-256 no Google Tag Manager: Vale a Pena?

A Métricas Boss é uma agência de Web Analytics e usabilidade. Conte com uma empresa certificada Google Analytics para sua gestão de web analytics.

O que você irá aprender?