# Portal — conversão e publicação

> Histórico de implementação. A instrumentação e o inventário abaixo foram ampliados em 15/09/2026. A referência atual é [rastreamento e migração](analytics-and-seo-migration.md).

## Implementado nesta prévia

- Home com WhatsApp na primeira tela, catálogo opcional e entrada de ajuda sem formulário.
- Identidade grafite/amarelo, imagens das linhas vindas do site da Portal e fotos reais existentes da loja. Não associamos as imagens de linha a SKUs demonstrativos.
- SIL, WEG, Tramontina, Soprano, WAGO e LEDVANCE: comercialização confirmada pelo usuário nesta tarefa. Não implica estoque imediato ou revenda autorizada.
- Menu móvel com diálogo nativo, Escape, foco isolado e fechamento ao voltar ao desktop.
- Barra móvel contextual: desaparece enquanto o CTA principal da home está visível.
- Guia de organização de lista com conteúdo acessível em HTML e links às categorias.
- Metadados próprios e manutenção de noindex/robots bloqueado no protótipo.
- Navegação HTML nativa para contornar um erro observado no Link/RSC do Vinext beta instalado. Os links entre páginas fazem carregamento completo; listas persistidas continuam preservadas. Reavaliar navegação cliente após atualização e teste do runtime.

## Instrumentação local, ainda sem plataforma de analytics

O evento `portal:conversion` é emitido no navegador. Últimos 50 registros em memória em `window.portalConversionEvents`, descartados no recarregamento. Nenhuma persistência, cookie ou envio de rede. Não inclui dados de formulário, texto do WhatsApp, telefone, query string ou identificador pessoal.

Para QA da prévia, o elemento oculto `#portal-conversion-diagnostics` espelha os mesmos eventos sem dados pessoais. Não é um painel de resultados comerciais.

Eventos: `page_view` e `whatsapp_click`. Propriedades: `page_path`, `cta_position` (apenas no clique).

Posições principais: `hero_whatsapp`, `header_whatsapp`, `menu_whatsapp`, `mobile_whatsapp`, `lista_whatsapp`, `ajuda_whatsapp`, `segmento_*`, `faq_whatsapp`, `final_whatsapp`, `footer_whatsapp`, `categoria_*`, `guia_lista_whatsapp`.

O link abre um rascunho. O visitante precisa enviar a mensagem e anexar arquivos no WhatsApp. Cliques não confirmam conversa, orçamento ou venda. Não existe atribuição automática de receita nesta versão.

Antes de conectar GA4/GTM/CRM: escolher a plataforma e conta, definir consentimento/privacidade, validar deduplicação e excluir tráfego interno. Conectar um único consumidor do evento, sem instrumentação duplicada. Não usar dados pessoais em propriedades analíticas.

Funil de negócio: visita → clique → conversa confirmada no atendimento → orçamento qualificado → venda. Os três últimos passos dependem de CRM/registro operacional. Definir responsável pelo WhatsApp, horário e expectativa de resposta antes de publicar promessas.

## Bloqueios reais de publicação

1. Confirmar domínio de produção, CNPJ, endereço e horário; aprovar textos, marcas e uso de imagens.
2. Revisar os dados reais e o uso das imagens importadas antes de publicar. Não fingir estoque, avaliações, preços ou especificações não disponíveis.
3. Revisar o guia editorial; exigir revisão profissional em qualquer conteúdo técnico de segurança.
4. Preservar/migrar URLs do site atual. O protótipo não substitui automaticamente as URLs WordPress existentes. Planejar redirecionamentos individuais e testar 404.
5. Definir `NEXT_PUBLIC_SITE_URL` no build para canonicals/Open Graph/schema; remover bloqueio de indexação apenas da produção aprovada. Manter staging/local com noindex.
6. Gerar sitemap apenas com páginas reais, canônicas e indexáveis; revisar robots, Search Console, redirecionamentos e dados estruturados sem avaliações/ofertas fictícias.
7. Atualizar o Perfil da Empresa no Google com dados coerentes, fotos reais e coleta legítima de avaliações.
8. Medir Core Web Vitals no ambiente publicado, inclusive celular: metas p75 LCP ≤2,5 s, INP ≤200 ms, CLS ≤0,1. Testes locais não comprovam esses resultados em campo.
9. Aprovar política de privacidade/termos e substituir formulários demonstrativos por fluxo real somente quando a integração estiver definida.

## Plano de validação comercial

Estabelecer linha de base antes de metas percentuais. Comparar clique/sessões e orçamento qualificado/sessões por origem e dispositivo. Testar uma hipótese por vez, com tráfego suficiente. Validar a jornada com clientes reais e acompanhar tempo de resposta e qualidade do orçamento. A nova interface não é prova de aumento de conversão ou ranking.

## Verificação da primeira entrega

- Typecheck, lint e build concluídos; sete testes automatizados aprovados, cobrindo 18 rotas, metadados, noindex, 404, mensagens contextuais e filtragem dos eventos.
- Navegador: 320×667, 375×812, 768×1024 e 1024×768 sem overflow horizontal e CTA principal inteiro na primeira tela. Revisão visual também em 1440×900.
- Menu: Shift+Tab/Tab circulam entre os extremos; Escape fecha e devolve foco ao acionador.
- Percurso real: home → guia → categoria fios e cabos → home; âncora Como cotar; FAQ de entrega abre por teclado.
- Clique de WhatsApp abriu o destino público com rascunho, sem envio de mensagem. Diagnóstico confirmou `page_view` e `whatsapp_click` / `hero_whatsapp`.
- Aba limpa não apresentou erros de console durante o teste final. A falha de Link/RSC anteriormente observada deixou de ser reproduzida com navegação nativa.

Esses testes não substituem auditoria completa de acessibilidade, medição em campo, validação comercial ou teste com clientes reais.

## Segunda rodada — catálogo e consulta

- A primeira tela oferece cotação com lista e ajuda sem lista, com mensagens distintas.
- Catálogo com busca próxima do topo, atalhos por linha, aceitação de vírgula/ponto decimal e unidades com/sem espaço. Busca vazia oferece contato levando o termo procurado.
- Cards com ícones sem promessa de estoque e WhatsApp levando nome/especificações. Nenhuma marca foi atribuída aos 18 exemplos.
- Páginas das seis linhas seguem a identidade da home e oferecem consulta no topo.
- `/orcamento` substitui o formulário simulado de três etapas por edição de quantidade/notas, lista livre opcional e prévia da mensagem. Itens persistidos preservados; campos adicionais apenas em memória. Não solicita cadastro nem transmite mensagens automaticamente.
- Texto extenso: acima de 6.500 caracteres codificados, pede cópia/colagem e abre apenas uma apresentação, sem truncar silenciosamente a lista. O limite é uma precaução de compatibilidade, não garantia para todos os aplicativos.
- Barra móvel na página de orçamento leva à revisão, não a uma conversa que perderia os itens.
- Eventos adicionais: `hero_ajuda_whatsapp`, `catalogo_topo_whatsapp`, `catalogo_consulta_whatsapp`, `busca_sem_resultado_whatsapp`, `produto_*`, `lista_revisada_whatsapp`.
- Typecheck, lint e 11 testes automatizados aprovados. Busca e rascunho também verificados no navegador sem enviar mensagem ao atendimento.
- Segunda rodada de QA: home, catálogo, linha de cabos e orçamento sem overflow horizontal em 320×667, 768×1024 e 1024×768; revisão visual em 375×812 e 1440×900. As seis imagens da home carregaram. Nenhum erro de console registrado no percurso verificado. Fallback de mensagem extensa confirmado; cópia para a área de transferência e envio real não foram exercitados.

### Origem das imagens de linha

Reutilizadas em 14/09/2026 de `https://portaldistribuidora.com.br/produtos/`, sem edição do bitmap; todas 600×400. Arquivos em `public/images/linhas/`:

| Local | Arquivo original em `/wp-content/uploads/` |
|---|---|
| fios-e-cabos.png | Fios-e-cabos.png |
| protecao.png | Disjuntores.png |
| infraestrutura.png | Eletrocalhas.png |
| iluminacao.png | Lampadas-de-LED.png |
| ferramentas.png | Ferramentas.png |
| quadros.png | Quadro-de-comando-de-energia.png |

As imagens ilustram famílias e podem mostrar marcas/modelos que não constam das seis marcas confirmadas pelo usuário. Não são evidência de estoque atual; confirmar o uso final e substituir por fotografia comercial aprovada antes de publicar.

### Dados ainda necessários para competir comercialmente

O catálogo agora tem referências reais. Ainda precisamos aprovar imagens e fichas dos produtos prioritários; horário; pagamento; área e condições de entrega; avaliações/depoimentos autorizados. Não substituir a falta desses dados por promessas. SEO competitivo ainda exige migração, publicação aprovada, conteúdo enriquecido e medição em campo.

## Terceira rodada — catálogo real

Importação somente de leitura de 5.828 produtos elegíveis; 100 registros excluídos por categoria ausente ou política de uso interno. Quinze categorias editoriais, 24 resultados por página, busca por nome/código/marca, filtros, páginas de produto, relacionados e cotação contextual. Primeiras 290 imagens otimizadas em WebP; importação de imagens restante é incremental. Os números são os desta entrega, não uma promessa de estoque.

A UI/UX Pro Max orientou hierarquia, filtros nativos, alvos de toque, contraste, foco e adaptação móvel. Metadados, breadcrumbs e links rastreáveis são renderizados no servidor. A indexação continua bloqueada. Consulte [segurança e SEO](catalog-security-and-seo.md) para limites e operação.