O app ficou pronto em uma tarde. A mensuração, não. Apps gerados por IA costumam ser aplicações de página única, e isso quebra a medição padrão. Veja como instalar GTM e GA4 do jeito certo.
Índice do artigo
- Por que apps gerados por IA medem errado
- Passo 1: definir o que medir antes de pedir
- Passo 2: instalar o GTM
- Passo 3: page_view em aplicações de página única
- Passo 4: eventos pela camada de dados
- Passo 5: consentimento
- Passo 6: validar
- Prompt pronto para pedir a implementação
- Os erros que mais aparecem
- Perguntas frequentes
Por que apps gerados por IA medem errado
Ferramentas como Lovable, Replit, Bolt e v0 geram, com frequência, aplicações em React que funcionam como SPA (single page application): a página carrega uma vez e o conteúdo muda sem recarregar. Consequências comuns:
- só a primeira página vista é registrada, e as navegações seguintes somem;
- eventos de formulário e clique não disparam, porque os elementos são criados dinamicamente;
- o snippet é colocado num componente e carrega várias vezes (ou nenhuma);
- nenhum consentimento é tratado.
Em uma frase: se você não pedir mensuração explicitamente, o app gerado por IA quase sempre nasce sem ela ou com ela quebrada.
Passo 1: definir o que medir antes de pedir
Antes de qualquer código, liste:
- as páginas e telas que importam;
- as conversões (cadastro, lead, compra, ativação);
- os eventos intermediários do funil;
- as propriedades de cada evento, seguindo o dicionário de eventos da empresa.
Passo 2: instalar o GTM
O snippet do Google Tag Manager tem duas partes: um script que vai no head e um noscript logo após a abertura do body. Em apps React gerados por essas ferramentas, o lugar certo costuma ser o arquivo HTML base do projeto (geralmente index.html), e não um componente, para que o GTM carregue uma única vez em todas as rotas.
Peça isso explicitamente à ferramenta ou edite o arquivo, caso tenha acesso ao código (por exemplo, via sincronização com o GitHub).
Passo 3: page_view em aplicações de página única
Em SPA, é preciso avisar o GA4 quando a rota muda. Dois caminhos:
A) Evento na camada de dados a cada mudança de rota (recomendado): O app envia um evento a cada navegação, e o GTM dispara o page_view do GA4 a partir dele.
// executado a cada mudança de rota
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'virtual_page_view',
page_path: window.location.pathname,
page_title: document.title
});
No GTM, crie um acionador de evento personalizado para virtual_page_view e uma tag de evento do GA4 page_view com os parâmetros de página. Desative o envio automático de page_view na tag do Google para evitar duplicidade.
B) Acionador de alteração de histórico no GTM: detecta mudanças de URL sem código no app. É mais rápido, mas menos controlado (o título da página pode não estar atualizado no momento do disparo).
A medição aprimorada do GA4 também consegue registrar mudanças de histórico do navegador. Escolha uma única abordagem e evite duplicar page_views.
Passo 4: eventos pela camada de dados
Em vez de depender de acionadores de clique ou formulário do GTM, peça que o app envie eventos no momento certo, pela camada de dados:
// após o cadastro ser confirmado pelo backend
window.dataLayer.push({
event: 'sign_up',
method: 'email'
});
Regras:
- dispare na confirmação de sucesso (resposta do backend), não no clique do botão;
- use os nomes do dicionário de eventos e, quando existirem, os eventos recomendados do GA4;
- nunca envie dado pessoal (e-mail, nome, telefone) nos eventos.
Passo 5: consentimento
Se o app coleta dados de visitantes, ele precisa de banner de consentimento e integração com o modo de consentimento das tags. Defina com o jurídico as categorias e a base legal. Tecnicamente, o banner publica a escolha do usuário na camada de dados, e o GTM só carrega ou libera as tags de acordo com as categorias aceitas.
Passo 6: validar
- Modo de visualização (Preview) do GTM: navegue por várias rotas e confira um page_view por navegação.
- DebugView do GA4: confirme eventos e parâmetros.
- Teste a conversão ponta a ponta com um usuário de teste.
- Teste em mobile.
- Confirme que recusar o consentimento bloqueia o que deve ser bloqueado.
- Depois da publicação, confira os relatórios em tempo real.
Prompt pronto para pedir a implementação
Implemente o Google Tag Manager neste app. Adicione o snippet do GTM com o ID [GTM-XXXXXXX] no arquivo HTML base do projeto: o script no head e o noscript logo após a abertura do body, para carregar uma única vez em todas as rotas. Crie uma função utilitária de tracking que inicialize window.dataLayer e faça push de eventos. A cada mudança de rota, envie o evento virtual_page_view com page_path e page_title. Envie estes eventos apenas após a confirmação de sucesso do backend: [lista de eventos com propriedades]. Não envie nenhum dado pessoal nos eventos. Não instale o GA4 diretamente no código; o GA4 será configurado no GTM. Mostre os arquivos alterados.
Os erros que mais aparecem
- Snippet dentro de um componente, carregando várias vezes.
- Só a primeira página registrada numa SPA.
- page_view duplicado (medição aprimorada + evento manual).
- Eventos de conversão disparando no clique, e não na confirmação.
- GA4 instalado direto no código e também pelo GTM.
- E-mail do usuário enviado em parâmetro de evento.
- Nenhum consentimento tratado.
Perguntas frequentes
Como instalar o Google Analytics num site feito no Lovable?
Instalando o GTM no arquivo HTML base do projeto, configurando o GA4 no GTM e enviando page_view a cada mudança de rota.
Por que o GA4 só registra a primeira página do meu app?
Porque apps de página única não recarregam a página; é preciso enviar page_view a cada mudança de rota.
Posso usar o acionador de alteração de histórico do GTM?
Pode, mas o evento na camada de dados enviado pelo app é mais controlado.
Devo instalar o GA4 direto no código ou pelo GTM?
Pelo GTM, para centralizar e governar as tags; e nunca pelos dois ao mesmo tempo.
Como medir conversões em apps criados com IA?
Enviando eventos pela camada de dados apenas após a confirmação de sucesso do backend.
Preciso de banner de cookies no meu app?
Se coleta dados de visitantes, a necessidade e a base legal devem ser avaliadas com o jurídico; tecnicamente, as tags devem respeitar o consentimento.