Vibe Coding
Comente LP no Instagram @gastaomatos

Landing Page que Converte com IA

Uma LP que converte precisa de estrutura certa, rastreamento correto e CTA visível. Com IA você cria tudo isso de uma vez só com o prompt certo.

Exemplos reais criados com esse processo

  • Gramado Plazza (restaurante italiano, Gramado/RS): LP de reservas para o rodízio completo de massas, conversão por WhatsApp, fundo escuro com imagens do ambiente e da sequência italiana
  • Esmalteria Unhas Top (RioMar Shopping, Aracaju): 5 versões A/B com cores diferentes testadas em paralelo, DDI auto-detectado via ipapi.co para preencher o campo de telefone automaticamente
  • Dr. Wagner Rocha Advocacia Trabalhista (Cuiabá/MT): 4 modelos A/B, CAPI com SHA-256 em todos os campos (em, ph, fn, external_id), captura de _fbc/_fbp e fallback em memória para não perder lead
  • Dr. Leonardo Carvalho Teixeira (Divórcio para Homens, RJ): 60 leads em 30 dias com R$ 600 investidos, JSON-LD LegalService + Person + FAQPage, 10 atendimentos/semana como limitador de urgência

Por que usar Pixel + CAPI juntos

O Pixel Meta roda no navegador (client-side). Ad blockers e iOS bloqueiam até 40% desses eventos. A Conversions API envia os mesmos eventos do seu servidor para a Meta, sem depender do navegador. Com o mesmo event_id nos dois, a Meta deduplica automaticamente e você não conta duas vezes o mesmo lead.

Prompt completo

prompt
Crie uma landing page em Next.js 15 App Router para [SEU NEGÓCIO].

Dados: nome, serviço, diferencial, público, prova social, CTA, WhatsApp,
       Pixel ID, GA4 ID, CAPI Token

Seções: Hero > Problema > Solução > Como funciona > Resultados > FAQ > CTA final

META PIXEL (client-side, app/layout.tsx ou Script tag):
- fbq('init', '[PIXEL_ID]') + fbq('track', 'PageView') no load
- leadId = crypto.randomUUID() no submit
- fbq('track', 'Lead', { eventID: leadId })

META CONVERSIONS API (app/api/lead/route.ts):
- Validar body com Zod antes de qualquer processamento
- Capturar do request: IP (x-forwarded-for), User-Agent, cookies _fbc e _fbp
- SHA-256 de: em (email), ph (55+DDD+número), fn (nome), external_id (leadId)
- POST https://graph.facebook.com/v19.0/[PIXEL_ID]/events com mesmo leadId
- Usar waitUntil() para não bloquear a resposta

Salvar lead (Neon + Drizzle ORM):
tabela leads: id, nome, email, telefone, modelo,
              utm_source, utm_medium, utm_campaign, created_at
Fallback em memória (Map<string, Lead>) se banco cair — nunca perder lead

GA4: cta_click, form_start, form_submit, whatsapp_click,
     scroll_milestone (25%, 50%, 75%, 90%)

SEO: Metadata API + canonical + JSON-LD
- LocalBusiness para restaurantes e salões
- LegalService + Person para advogados
- MedicalBusiness + Physician para clínicas
- FAQPage schema com as objeções da seção FAQ

Stack: Next.js 15, Tailwind CSS v4, shadcn/ui, Neon
Deploy: Vercel com variáveis de ambiente

Como gerar o token da Conversions API

  • business.facebook.com > Gerenciador de Eventos
  • Selecione seu Pixel > Configurações
  • Role até "API de Conversões" > Gerar token de acesso
  • Salve como META_CAPI_TOKEN nas variáveis da Vercel

Perguntas frequentes

Qual a diferença entre Pixel Meta client-side e Conversions API?

O Pixel roda no navegador via JavaScript (fbq). A Conversions API (CAPI) roda no seu servidor e envia os eventos direto para a Meta. Com os dois juntos e o mesmo event_id, a Meta deduplica e você recupera os 20-40% de eventos que o Pixel perde por ad blockers e iOS 14.5+.

O que são _fbc e _fbp e por que capturá-los?

_fbc é o click ID do anúncio Meta — gravado automaticamente no cookie quando alguém clica no seu anúncio. _fbp é o identificador de browser do Pixel Meta. Enviar esses dois campos na CAPI aumenta a taxa de match da Meta, que consegue atribuir o lead ao conjunto de anúncios correto com muito mais precisão.

Por que usar fallback em memória para salvar leads?

Se o banco (Neon) ficar indisponível por qualquer motivo, um Map em memória no servidor garante que o lead não é perdido. Ao retornar, você pode migrar os dados. Para um negócio que paga por tráfego, perder um lead por erro de banco é inaceitável.

Quais schemas JSON-LD usar para cada tipo de negócio?

LocalBusiness para restaurantes, salões e varejo. LegalService + Person para escritórios de advocacia (junto com FAQPage para as objeções). MedicalBusiness + Physician para clínicas e consultórios. Esses schemas ajudam o Google e IAs como Perplexity e ChatGPT a entenderem o negócio e aparecerem em buscas relevantes.

Quais eventos do GA4 são mais importantes para tráfego pago?

Para tráfego pago, os eventos críticos são: form_submit (conversão principal), cta_click (intenção), whatsapp_click (conversão alternativa) e scroll_milestone (qualidade do tráfego). Com esses quatro você consegue otimizar campanhas e identificar páginas de baixo desempenho.

Quer implementar isso?

Me chama no WhatsApp. Ajudo você a configurar ou implemento pra você.

Quero ajuda no WhatsApp
DT

Gastão Matos

@gastaomatos