Marketing tecnico

Tag Assistant e conversao no Google Ads em site React: como validar o fluxo

Guia pratico para validar tag do Google Ads, conversao de formulario, SPA React, UTMs, Tag Assistant, backend e evidencias.

Guia de leitura

O que esta leitura cobre

Use os pontos abaixo como mapa para navegar pelo artigo, comparar sintomas, riscos e proximos passos antes de aplicar qualquer decisao tecnica.

  1. 011. Entenda o que a tag confirmou
  2. 022. Em React, rota interna nao garante novo carregamento
  3. 033. Defina o que merece ser conversao
  4. 044. Preserve UTM e landing page durante a sessao
  5. 055. Monte uma URL de teste controlada

Ver a tag do Google Ads aparecendo no Tag Assistant e uma boa noticia, mas ainda nao prova que a conversao esta correta. Em sites modernos, principalmente aplicacoes React com navegacao interna sem recarregar a pagina inteira, e comum a tag base carregar e mesmo assim o evento de lead nao ser registrado no momento certo.

Esse detalhe muda a leitura da campanha. O Google Ads pode estar contando visita, remarketing ou visualizacao de pagina, mas nao necessariamente o envio real do formulario. Para uma pequena empresa que investe em trafego pago, essa diferenca e importante: otimizar para um evento errado pode gastar verba sem trazer leads validos.

Este guia mostra como validar o fluxo completo de conversao em um site React, usando Tag Assistant, UTMs, formulario, backend, e-mail de notificacao e evidencias tecnicas.

1. Entenda o que a tag confirmou

Quando o Tag Assistant encontra a tag AW-..., ele confirma que o codigo base do Google Ads carregou naquela pagina. Isso normalmente cobre medicao, remarketing e preparo para eventos. Mas uma conversao de lead depende de outro passo: o evento configurado precisa ser enviado quando a acao relevante acontece.

Em outras palavras:

  • tag encontrada nao e o mesmo que conversao validada;
  • visualizacao de pagina nao e o mesmo que envio de formulario;
  • clique no botao nao e o mesmo que lead salvo;
  • evento disparado antes do sucesso pode gerar conversao falsa;
  • evento nao disparado depois do sucesso deixa a campanha sem aprendizado.

O artigo Google Ads, UTM e formulario de contato explica a base de origem, campanha e lead. Aqui o foco e a validacao tecnica do evento.

2. Em React, rota interna nao garante novo carregamento

Em um site tradicional, cada clique entre paginas costuma carregar um HTML novo. Em uma aplicacao React, a navegacao pode trocar a tela sem recarregar a pagina inteira. Isso e bom para experiencia, mas exige cuidado com tags e eventos.

Riscos comuns em SPA:

  • a tag global carrega so uma vez e a ferramenta espera novo carregamento de pagina;
  • a conversao foi configurada como visualizacao de pagina, mas nao existe pagina de obrigado real;
  • o usuario chega por uma URL com UTM, navega internamente e o formulario perde a origem;
  • o evento de conversao fica preso em um componente que desmonta antes de concluir;
  • o teste olha apenas a home e nao o caminho completo ate o formulario.

Por isso, em React, a validacao precisa acompanhar o fluxo real: entrada, navegacao, preenchimento, resposta do backend, evento de conversao e confirmacao do lead.

3. Defina o que merece ser conversao

Para formularios de contato, a conversao mais confiavel nao e o clique no botao. O clique pode acontecer com campo invalido, erro de rede, backend fora do ar ou rejeicao de dados. O melhor sinal costuma ser o sucesso confirmado apos o backend salvar o lead.

Um criterio mais forte:

  1. usuario preenche dados obrigatorios;
  2. frontend valida formato basico;
  3. formulario envia para a API;
  4. backend valida e salva o contato;
  5. frontend recebe sucesso;
  6. somente entao dispara o evento de conversao;
  7. mensagem de sucesso aparece ao usuario;
  8. lead chega com origem e UTM para a equipe.

Assim, o Google Ads aprende com uma acao mais proxima de negocio real, nao com uma tentativa incompleta.

4. Preserve UTM e landing page durante a sessao

Uma validacao de conversao fica incompleta se o evento dispara, mas o lead chega sem origem. Em campanhas, a URL de entrada pode trazer utm_source, utm_medium, utm_campaign, utm_content, utm_term e identificadores de clique.

Em SPA, e recomendavel guardar a atribuicao da sessao de forma controlada para que ela sobreviva a navegacao interna. Campos uteis:

  • landing_page: primeira pagina acessada;
  • source_page: pagina onde o formulario foi enviado;
  • referrer: origem informada pelo navegador;
  • utm_source, utm_medium e utm_campaign;
  • utm_content e utm_term, quando usados;
  • gclid, se a campanha e a politica de privacidade permitirem.

A pagina de indicadores tecnicos ajuda a acompanhar se os leads estao chegando com origem suficiente para decisao.

5. Monte uma URL de teste controlada

Antes de testar no Tag Assistant, crie uma URL com UTMs simples e identificaveis. Exemplo de estrutura:

/diagnostico-tecnico?utm_source=google&utm_medium=cpc&utm_campaign=rmportotech_leads_search&utm_content=teste_tag_assistant

Use valores que voce consiga reconhecer no e-mail e no banco. Evite misturar teste com campanha real quando ainda estiver validando.

Depois do envio, a equipe deve conseguir responder:

  • qual URL abriu a sessao?
  • qual pagina enviou o formulario?
  • qual campanha apareceu no lead?
  • o evento de conversao disparou depois do sucesso?
  • o e-mail de notificacao trouxe a origem correta?

6. Teste no Tag Assistant como uma pessoa real

Um teste bom nao e apenas abrir a home. Ele simula o visitante de ponta a ponta.

  1. Abra o Tag Assistant.
  2. Conecte ao dominio publico do site.
  3. Entre pela URL com UTMs de teste.
  4. Navegue ate a pagina que contem o formulario, se ela nao for a landing page.
  5. Preencha dados de teste claramente identificaveis.
  6. Envie o formulario.
  7. Espere a mensagem de sucesso.
  8. Volte ao Tag Assistant e confira os hits enviados.
  9. Compare com e-mail, banco e logs do backend.

Se o Tag Assistant mostra a tag, mas nao mostra o evento esperado, investigue o gatilho. Se mostra o evento, mas o lead chega sem UTM, investigue a preservacao da atribuicao.

7. Confira console e rede do navegador

O Tag Assistant ajuda, mas o navegador tambem conta parte da historia. Durante o teste, abra as ferramentas de desenvolvedor e acompanhe console e rede.

Procure por:

  • erros JavaScript no envio do formulario;
  • chamada para a API retornando erro;
  • payload sem campos de origem;
  • bloqueio por extensao, consentimento ou CSP;
  • evento enviado antes da resposta do backend;
  • redirecionamento inesperado;
  • duplicidade de evento em um unico envio.

O objetivo nao e transformar o teste em algo complexo. E evitar que uma ferramenta mostre sinal positivo enquanto outra camada esta quebrada.

8. Valide backend, banco e e-mail

Conversao boa precisa representar uma acao que a empresa consegue atender. Por isso, o teste deve passar tambem pelo backend.

Verifique:

  • lead salvo no banco;
  • status ou flag de notificacao por e-mail;
  • campos de UTM preenchidos;
  • landing page e source page preenchidas;
  • mensagem do visitante preservada;
  • e-mail interno recebido;
  • remetente autorizado e Reply-To correto;
  • logs sem senha, token ou dado sensivel desnecessario.

O artigo SMTP, formulario de contato e seguranca de e-mail aprofunda a validacao de notificacao e entregabilidade.

9. Evite conversao duplicada

Um erro frequente e disparar conversao mais de uma vez para o mesmo envio. Isso pode ocorrer por duplo clique, reenvio automatico, componente renderizando novamente ou codigo de evento em local inadequado.

Reduza esse risco com medidas simples:

  • desabilitar o botao enquanto o envio esta em andamento;
  • disparar evento apenas depois do sucesso da API;
  • nao disparar evento no carregamento do componente do formulario;
  • evitar evento em efeito que roda mais de uma vez sem controle;
  • registrar identificador do envio quando houver necessidade de auditoria.

Duplicidade confunde o Google Ads e cria uma visao inflada de resultado. Melhor poucas conversoes confiaveis do que muitos sinais fracos.

10. Respeite privacidade e consentimento

Tags, cookies, UTMs e identificadores de campanha devem ser tratados com transparencia. O site precisa explicar o uso de analytics, publicidade, formularios e dados de contato. Tambem deve evitar coletar mais informacao do que precisa.

Cuidados praticos:

  • manter politica de privacidade atualizada;
  • explicar cookies e ferramentas de medicao;
  • separar conteudo editorial de publicidade;
  • nao incentivar clique em anuncio;
  • evitar armazenar dado sensivel sem necessidade;
  • registrar apenas evidencias suficientes para suporte e decisao.

A politica de publicidade deve ficar coerente com o que o site realmente faz.

11. O que pode demorar no Google Ads

Mesmo com o teste correto, a interface do Google Ads pode levar tempo para mostrar conversoes e status de verificacao. Isso nao significa automaticamente que a implementacao esta errada. A leitura deve combinar ferramenta, teste tecnico e dados internos.

Antes de mexer no codigo novamente, confirme:

  • Tag Assistant encontrou a tag do Google Ads;
  • o evento de conversao apareceu durante o teste;
  • o formulario retornou sucesso;
  • o lead foi salvo;
  • o e-mail chegou;
  • as UTMs chegaram no lead;
  • o ID de conversao e o label estao corretos;
  • nao ha bloqueio por configuracao de consentimento ou navegador.

Se todos esses pontos estao corretos, muitas vezes o proximo passo e aguardar processamento e novo trafego real.

12. Checklist de validacao

  1. Confirmar tag global instalada uma unica vez.
  2. Confirmar ID do Google Ads correto.
  3. Definir conversao para envio concluido, nao clique bruto.
  4. Criar URL de teste com UTMs claras.
  5. Usar Tag Assistant no fluxo real.
  6. Enviar formulario com dados identificaveis de teste.
  7. Conferir evento de conversao depois do sucesso.
  8. Validar lead salvo no backend.
  9. Confirmar e-mail interno recebido.
  10. Conferir UTM, landing page e source page.
  11. Verificar console, network e logs.
  12. Registrar evidencias sem expor dados sensiveis.

A pagina de evidencias tecnicas pode servir como roteiro para guardar prints, logs e resultados de teste com cuidado.

Erros comuns ao validar conversao

  • achar que tag encontrada significa conversao funcionando;
  • configurar conversao por carregamento de pagina em SPA sem pagina de obrigado;
  • disparar evento no clique antes do backend salvar;
  • nao preservar UTM durante navegacao interna;
  • testar apenas a home e nao o formulario;
  • ignorar console e chamadas de rede;
  • duplicar a tag global;
  • duplicar conversao em um unico envio;
  • alterar codigo varias vezes sem registrar evidencias.

Validar conversao e menos sobre colar um script e mais sobre provar uma cadeia. O clique entra pelo anuncio, a visita navega pelo React, o formulario conversa com o backend, o lead fica salvo, a notificacao chega e o evento correto e enviado ao Google Ads.

Quando essa cadeia esta bem documentada, a campanha aprende com sinais melhores, a empresa entende de onde veio cada contato e o site deixa de depender de suposicao. Para uma pequena empresa, esse tipo de mensuracao simples e confiavel vale muito mais do que um painel bonito com numeros desconectados da operacao.

Glossario conectado

Termos tecnicos desta leitura

Alguns conceitos aparecem com frequencia neste tema. Abrir o glossario ajuda a comparar definicoes, exemplos e leituras relacionadas sem sair do contexto do artigo.

Marketing tecnicoConversaoAcao relevante que o site registra como resultado de uma visita, como envio de formulario, download de material ou contato comercial.Marketing tecnicoEvento de conversaoEvento enviado para uma ferramenta de medicao quando uma acao relevante acontece, como lead salvo, download concluido ou cadastro finalizado.Marketing tecnicoGCLIDIdentificador de clique do Google Ads usado para relacionar visitas e conversoes a anuncios, quando a configuracao da conta e do site permite.Marketing tecnicoLanding pagePrimeira pagina acessada por uma pessoa em uma visita, normalmente usada como destino de campanha ou busca.Marketing tecnicoLeadContato registrado por uma pessoa ou empresa interessada, com dados suficientes para retorno ou qualificacao.FrontendSPASingle Page Application, modelo em que a aplicacao troca telas no navegador sem recarregar todo o HTML a cada navegacao.
Continue a análise

Próximos passos para aprofundar o tema.

Veja conteúdos próximos e materiais práticos para transformar a leitura em uma revisão mais objetiva.

Marketing tecnico

Formulario de site que gera lead: campos, e-mail, SMTP e atendimento

Guia pratico para transformar formulario de site em fluxo confiavel de lead, com campos certos, consentimento, origem, e-mail, SMTP e follow-up.

Ler artigo
Marketing tecnico

AdSense e conteudo de baixo valor: como melhorar um site antes da revisao

Guia pratico para melhorar conteudo, navegacao, confianca, anuncios, politicas, SEO tecnico e experiencia antes de pedir revisao no AdSense.

Ler artigo
Marketing tecnico

Lead sem origem: como investigar formulario, UTM, referrer e landing page

Guia pratico para investigar leads sem origem usando UTMs, landing page, referrer, source page, frontend, backend, e-mail e evidencias.

Ler artigo

Converse sobre seu cenário técnico.

Envie sua dúvida ou contexto para avaliarmos o melhor caminho.

Prefere falar direto?

Tambem atendemos pelo WhatsApp em (12) 98855-9188.

Falar no WhatsApp

Ao enviar, você concorda que a RM Porto Tech utilize seus dados para responder ao contato solicitado.

WhatsApp(12) 98855-9188