Como implementar o evento generate_lead no GA4 usando GTM em sites no Framer (SPA)

A implementação de eventos de conversão no Google Analytics 4 (GA4) em ambientes SPA (Single Page Application), como sites desenvolvidos no Framer, exige uma abordagem diferente da tradicional.

Eventos como generate_lead, que representam conversões críticas para negócios, frequentemente apresentam problemas como:

• disparos duplicados

• ausência de disparo

• inconsistência entre front-end e GA4

• perda de dados em navegação sem reload

Neste artigo, mostramos como estruturamos uma implementação robusta utilizando Google Tag Manager (GTM) para garantir a coleta correta do evento generate_lead em um site SPA no Framer.

O problema: eventos inconsistentes em SPA

Diferente de sites tradicionais, o Framer funciona como uma SPA baseada em React.

👉 Isso significa que:

• não há reload completo da página

• navegação acontece via JavaScript

• o evento gtm.js ocorre apenas uma vez

Consequentemente:

• triggers como "Page View" não funcionam corretamente para conversões

• eventos podem disparar mais de uma vez ou não disparar

Objetivo da implementação

Garantir que o evento:

generate_lead

generate_lead

generate_lead

seja disparado:

• exatamente uma vez por conversão

• com dados estruturados

• compatível com GA4 e campanhas de mídia

• sem depender de reload de página

Arquitetura da solução

A solução foi estruturada em três camadas:

1. Detecção de conversão no front-end (Framer)

2. Envio do evento via dataLayer

3. Disparo controlado via GTM para GA4

1. Disparo do evento no front-end (Framer)

No momento da conversão (ex: envio de formulário), adicionamos:

window.dataLayer = window.dataLayer || [];

window.dataLayer.push({
  event: "generate_lead",
  lead_type: "form_contato",
  page_location: window.location.href
});

window.dataLayer = window.dataLayer || [];

window.dataLayer.push({
  event: "generate_lead",
  lead_type: "form_contato",
  page_location: window.location.href
});

window.dataLayer = window.dataLayer || [];

window.dataLayer.push({
  event: "generate_lead",
  lead_type: "form_contato",
  page_location: window.location.href
});

2. Criação da trigger no GTM

No Google Tag Manager:

Tipo de Trigger:

Custom Event

Custom Event

Custom Event

Nome do evento:

generate_lead

generate_lead

generate_lead

3. Configuração da tag do GA4

Criamos uma tag:

Tipo:

GA4 Event

GA4 Event

GA4 Event

Event Name:

generate_lead

generate_lead

generate_lead

Parâmetros recomendados:

lead_type → {{lead_type}}
page_location → {{Page URL}}

lead_type → {{lead_type}}
page_location → {{Page URL}}

lead_type → {{lead_type}}
page_location → {{Page URL}}

4. Evitando duplicidade em SPA

Esse é o ponto mais crítico.

Como o Framer re-renderiza componentes, o mesmo evento pode ser disparado mais de uma vez.

Solução aplicada:

if (!window.__lead_sent) {
  window.__lead_sent = true;

  window.dataLayer.push({
    event: "generate_lead",
    lead_type: "form_contato"
  });
}

if (!window.__lead_sent) {
  window.__lead_sent = true;

  window.dataLayer.push({
    event: "generate_lead",
    lead_type: "form_contato"
  });
}

if (!window.__lead_sent) {
  window.__lead_sent = true;

  window.dataLayer.push({
    event: "generate_lead",
    lead_type: "form_contato"
  });
}

👉 Isso garante idempotência no front-end.

5. Confirmação visual (debug)

Durante testes, validamos via console:

window.dataLayer

window.dataLayer

window.dataLayer

E no GTM Preview:

• evento generate_lead aparece 1x

• tag GA4 dispara corretamente

6. Validação no GA4

No GA4:

Caminho:

👉 Configure → Events

👉 DebugView

Validação:

• evento generate_lead recebido

• parâmetros corretos

• sem duplicação

7. Integração com campanhas

Após validação:

• marcamos generate_lead como conversão no GA4

• integramos com Google Ads

• utilizamos para otimização de campanhas

Problemas comuns (e como evitar)

❌ Usar Page View como trigger

Não funciona corretamente em SPA

❌ Disparar evento via gtag direto no código

Perde controle e rastreabilidade

❌ Não usar dataLayer

Dificulta debug e padronização

❌ Não tratar duplicação

Leva a métricas infladas

Boas práticas recomendadas

✔ Sempre usar dataLayer.push()

✔ Usar Custom Event no GTM

✔ Implementar controle de duplicidade

✔ Validar no DebugView do GA4

✔ Separar lógica de tracking do front-end

Resultado da implementação

Após a correção:

• eventos de lead 100% confiáveis

• eliminação de duplicações

• consistência entre GTM e GA4

• base sólida para otimização de mídia paga

FAQ

O GA4 funciona corretamente em SPA?

Sim, desde que os eventos sejam disparados manualmente via dataLayer.

O que é generate_lead no GA4?

É um evento padrão recomendado pelo Google para capturar conversões de formulário e geração de leads.

Posso usar apenas Page View no GTM?

Não. Em SPA, é necessário usar eventos customizados ou History Change.

Como evitar duplicação de eventos?

Implementando controle no front-end (idempotência) e validando triggers no GTM.

Conclusão

Em ambientes modernos como o Framer, o tracking precisa ser tratado como uma camada técnica estratégica — não apenas como configuração de ferramenta.

A combinação:

👉 Framer (SPA) + GTM + GA4 + dataLayer

quando bem implementada, permite um nível de controle e confiabilidade muito superior ao modelo tradicional.

👉 Se você está enfrentando inconsistências em eventos ou quer estruturar um tracking profissional, vale revisar sua arquitetura atual — especialmente se estiver usando SPA.

Na Ad Rock, tratamos tracking como parte essencial da performance, não como etapa secundária.