Documentação do Editor

Como usar o Editor de Landing Page

Guia completo para carregar, editar, configurar rastreamento e exportar a landing page da Dra. Daniele Nascimento sem tocar no código-fonte.

1 Visão Geral

O editor (admin.html) é uma ferramenta visual que funciona inteiramente no navegador — sem servidor, sem login, sem internet obrigatória. Ele lê o arquivo index.html da landing page, permite editar todos os textos e configurações, e gera um novo index.html pronto para publicação.

Funciona 100% offline. Nenhum dado é enviado para servidores. Todo processamento ocorre localmente no seu navegador. Basta abrir o arquivo admin.html com duplo clique.

Arquivos do projeto

ArquivoFunção
admin.htmlO editor. Abra este arquivo para editar a LP.
index.htmlA landing page pública. Nunca edite manualmente — use o editor.
docs.htmlEsta documentação.
assets/Imagens, fontes e demais recursos da LP. Não modifique.

2 Fluxo de Trabalho

O ciclo completo de uma edição segue sempre a mesma sequência:

1
Abrir o editor

Dê duplo clique em admin.html. Ele abre diretamente no navegador (Chrome, Edge ou Firefox).

2
Carregar a LP atual

No Dashboard, clique em Selecionar index.html e escolha o arquivo index.html da pasta do projeto. O editor lê o arquivo e preenche automaticamente todos os campos com os valores já configurados.

3
Editar os campos desejados

Navegue pelos painéis na barra lateral (Rastreamento, WhatsApp, Textos, Clínica) e altere apenas o que precisar. Campos em branco são ignorados — o conteúdo original da LP é mantido.

4
Gerar o HTML atualizado

Vá para o painel Gerar LP e clique em Baixar index.html Atualizado. O editor aplica todas as alterações e faz o download do arquivo.

5
Publicar

Substitua o index.html antigo pelo recém-baixado — na pasta local ou via upload no servidor (Netlify, Vercel, cPanel, FTP etc.).

Importante: sempre carregue o index.html atual antes de editar. Se você clicar em "Gerar" sem ter carregado um arquivo, o editor avisa que a LP não foi carregada. Nunca gere a partir de um arquivo desatualizado.

3 Dashboard

Tela inicial do editor. Exibe o status atual das configurações mais importantes da LP carregada.

Cards de status

Assim que um arquivo é carregado, quatro cards mostram o estado de cada integração:

CardVerde (ativo)Cinza (off)
Google TagID como G-ABC123 ou GTM-XXXXXSem script de rastreamento detectado
Meta PixelID numérico do PixelSem Pixel detectado
WhatsAppNúmero configuradoNenhum link WA encontrado
CRO/PENúmero do registroNão encontrado no JSON-LD

Carregando a LP

Clique em Selecionar index.html (ou use o botão de upload no topo direito). O editor lê o arquivo localmente — não faz nenhum upload para a internet.

Extração automática. Ao carregar o arquivo, o editor extrai automaticamente todos os valores existentes (IDs de rastreamento, número de WhatsApp, textos, endereço, CRO etc.) e preenche os campos correspondentes. Você só precisa alterar o que mudou.

4 Rastreamento

Painel central para todas as integrações de analytics e publicidade. Cada ferramenta tem seu próprio card com status visual (badge ativo em verde ou off em cinza).

Google Tag — GA4 ou GTM

CampoFormatoObrig.Descrição
ID do Google Tag G-XXXXXXX ou GTM-XXXXXXX opcional Use G- para Google Analytics 4 direto. Use GTM- se você gerencia tags pelo Google Tag Manager.

Como encontrar o ID:

  • GA4: Google Analytics → Admin → Fluxos de dados → clique no fluxo → ID de medição (começa com G-)
  • GTM: tagmanager.google.com → selecione o contêiner → ID no topo (começa com GTM-)

Meta Pixel (Facebook/Instagram Ads)

CampoFormatoObrig.Descrição
Pixel ID 15 dígitos numéricos opcional Encontre em: Meta Business Suite → Gerenciador de Eventos → selecione o Pixel → o ID aparece no topo.
O Pixel dispara automaticamente eventos Lead e Contact a cada clique em qualquer botão de WhatsApp da LP. Não é preciso configurar eventos manualmente.

Google Ads — Tag de Conversão

CampoFormatoObrig.Descrição
Conversion ID AW-000000000 opcional O ID da sua conta do Google Ads. Inclua o prefixo AW-.
Conversion Label AbCd_EfGhIj0K opcional Label específico da ação de conversão. Encontre junto ao ID na configuração da tag de conversão do Google Ads.

Como encontrar os valores: Google Ads → Metas → Conversões → selecione a conversão → clique em Configurar tag → escolha Usar o Google Tag Manager → os dois valores aparecem no padrão send_to: 'AW-XXXXXXXXX/AbCdLabel'.

Ambos os campos são necessários. O evento de conversão só é disparado quando Conversion ID e Conversion Label estão preenchidos. Se deixar um dos dois em branco, o evento não é enviado (sem erro, apenas silencioso).

Microsoft Clarity

CampoFormatoObrig.Descrição
Project ID 10 caracteres alfanuméricos opcional Gravação de sessão + mapas de calor gratuitos. Encontre em: clarity.microsoft.com → selecione o projeto → Configurações → o ID aparece na URL ou na aba de instalação.

Hotjar

CampoFormatoObrig.Descrição
Site ID Número (ex: 3450912) opcional Heatmaps e gravações de sessão. Encontre em: insights.hotjar.com → Configurações → Tracking Code → hjid: XXXXXXX.

5 WhatsApp

Controla todos os links de WhatsApp da LP de uma vez. Ao alterar o número aqui, todos os 7 botões da LP são atualizados automaticamente.

CampoFormato / ExemploObrig.Descrição
Número com DDI+DDD 5581999606911 req. Apenas dígitos: DDI (55) + DDD (81) + número. Não use espaços, traços ou parênteses.
Telefone exibido no rodapé (81) 9 9960-6911 opcional Texto visível ao visitante. Pode ser formatado como preferir.
Texto do tooltip Fale conosco opcional Pequena dica que aparece ao passar o mouse sobre o botão flutuante de WhatsApp.
Mensagens pré-preenchidas são preservadas. Cada botão da LP tem uma mensagem de abertura diferente (ex: "Quero agendar consulta", "Tenho interesse na garantia"). Ao trocar o número, as mensagens são mantidas — apenas o destinatário muda.

6 Textos & Copy

Edite todos os textos visíveis da LP: hero, CTAs, benefícios, depoimentos, galeria, processo e FAQ. Deixar um campo em branco preserva o texto original.

Seção Hero

CampoObservações
Badge (topo do hero)HTML Suporta tags como <strong>. Ex: Restauração <strong>Premium</strong> em Resina
CTA principal (hero)Texto do botão verde grande. Ex: "Tirar Dúvidas Agora"
CTA fixo no topoBotão no header que fica visível durante o scroll
Botão secundário heroBotão com contorno ao lado do CTA principal
Título do card da doutoraFrase abaixo da foto da doutora no hero
Subtítulo heroTexto menor abaixo do título principal

Benefícios

Três linhas de argumento exibidas logo abaixo do hero. Use frases curtas e diretas.

Resultados (Números)

CampoTipoDescrição
Anos de experiênciaNúmeroContador animado. Ex: 12
Casos / sorrisosNúmeroContador animado. Ex: 500

Depoimentos (3 slots)

Cada depoimento tem três campos: o texto da fala (suporta múltiplas linhas), o nome do paciente e a profissão/idade.

Galeria de Casos

Três legendas para os casos clínicos exibidos na galeria de fotos.

Processo (4 passos)

Cada passo tem título curto e descrição de uma linha. Ex: passo 1 — "Você Agenda" / "WhatsApp em 30 segundos."

FAQ (5 perguntas)

Apenas o texto das perguntas é editável aqui. As respostas ficam no código da LP e podem ser editadas diretamente no index.html se necessário.

7 Dados da Clínica

Informações institucionais que aparecem no rodapé, no schema de SEO e no link do Instagram.

CampoFormato / ExemploObrig.Descrição
Endereço completo Texto livre, quebra de linha permitida opcional HTML Quebras de linha (Enter) são convertidas em <br>. Aparece no rodapé da LP.
CRO/PE 9111 (só números) opcional Atualiza o número visível no footer e o campo identifier.value no schema JSON-LD (SEO).
Instagram dradanielenascimento opcional Sem o @. Atualiza o link e o texto exibido no rodapé, e o campo sameAs no schema.
Horários Seg–Sex: 9h–18h opcional Texto exibido no rodapé ao lado do endereço.

8 Gerar LP

Painel de exportação. Revise o checklist e clique no botão para baixar o index.html atualizado.

Checklist de pré-exportação

O painel exibe automaticamente quais itens estão concluídos:

  • ✅ LP carregada — sempre verde após carregar o arquivo
  • Google Tag configurado — verde se o campo foi preenchido
  • Meta Pixel configurado — verde se o campo foi preenchido
  • ✅ WhatsApp verificado — sempre verde (valor padrão presente)
Itens do checklist sem marca não bloqueiam a exportação. Você pode exportar sem Google Tag ou Pixel — eles simplesmente não serão incluídos.

Após o download

  1. Localize o index.html baixado na pasta de downloads
  2. Mova-o para a pasta do projeto, substituindo o arquivo antigo
  3. Faça upload para o servidor de hospedagem
  4. Teste abrindo a LP no navegador e verificando que as alterações apareceram

9 Eventos de Tracking

A LP dispara eventos automáticos para GA4, Meta Pixel e Google Ads sem necessidade de configuração adicional. Os eventos também carregam os UTM parameters da URL (campanhas do Google/Meta).

Evento Plataformas Quando dispara Dados enviados
whatsapp_click GA4 Clique em qualquer botão WA cta_id (qual botão), message_preview, UTMs
Lead / Contact Pixel Clique em qualquer botão WA content_name (qual CTA)
conversion G.Ads Clique em qualquer botão WA send_to (AW-ID/Label), currency: BRL
scroll_depth GA4 Usuário atinge 25%, 50%, 75%, 100% da página percent, UTMs
section_view GA4 Seção entra no viewport (40% visível) section (nome da seção), UTMs
faq_open GA4 Usuário abre uma pergunta do FAQ question (texto da pergunta)

Seções rastreadas por section_view

Valor do campo sectionSeção na LP
secao_resultadosBloco de números (anos de exp., casos)
secao_galeriaGaleria de casos clínicos
secao_processo4 passos do processo
secao_garantiaBloco de garantia
secao_faqPerguntas frequentes
secao_depoimentosDepoimentos de pacientes

UTM Preservation

Se o visitante chegar pela URL ?utm_source=google&utm_campaign=verao, esses parâmetros são salvos em sessionStorage e anexados automaticamente a todos os eventos GA4 da sessão — mesmo se o visitante navegar internamente antes de clicar no WhatsApp.

10 Ciclo de Exportação (Técnico)

Como o editor transforma o arquivo internamente:

  1. 1
    Leitura O arquivo index.html é lido com a API FileReader em UTF-8. O conteúdo fica em memória como string.
  2. 2
    Parse DOM A string é convertida em um documento DOM real via DOMParser.parseFromString(). A partir daqui, todas as operações são no DOM — nunca regex no HTML.
  3. 3
    Aplicação das transformações Sete funções especializadas são executadas em sequência: Google Tag, Meta Pixel, WhatsApp, Instagram, Schema JSON-LD, Campos de texto, Google Ads, Clarity, Hotjar.
  4. 4
    Re-exportação idempotente Scripts injetados em exportações anteriores são identificados pelo atributo data-managed e removidos antes de novos serem inseridos. Isso garante que exportar duas vezes não duplica scripts.
  5. 5
    Serialização + Download O DOM modificado é serializado via outerHTML para string, encapsulado em um Blob UTF-8 e disponibilizado para download.
Encoding UTF-8 é preservado. Todo o pipeline (leitura → DOM → blob) é lossless para caracteres especiais do português (ã, ç, é etc.). Não há risco de corrupção de acentos.

11 Perguntas Frequentes

Posso usar o editor sem Internet?
Sim. O editor funciona 100% offline. A única dependência de internet é o carregamento das fontes do Google Fonts — mas isso afeta apenas o estilo do próprio editor, não a funcionalidade. Se estiver offline, o editor usa fontes do sistema e tudo continua funcionando normalmente.
O que acontece se eu clicar em Gerar sem ter preenchido todos os campos?
Campos em branco são simplesmente ignorados. O conteúdo original da LP é mantido nesses campos. Por exemplo, se você não preencher o Google Tag, nenhum script de rastreamento é adicionado — mas os demais campos continuam sendo aplicados normalmente.
Posso exportar múltiplas vezes sem duplicar scripts?
Sim. O editor marca todos os scripts que ele injeta com o atributo data-managed. Na próxima exportação, esses scripts são identificados e removidos antes de novos serem inseridos. O resultado é sempre um HTML limpo, sem duplicatas, independente de quantas vezes você exportar.
Como trocar as imagens da galeria?
As imagens ficam na pasta assets/ do projeto. Substitua os arquivos de imagem mantendo o mesmo nome de arquivo — a LP continuará apontando para eles corretamente. Para trocar as legendas das fotos, use o painel Textos & Copy → seção Galeria de Casos.
Posso usar GA4 e GTM ao mesmo tempo?
Não via o campo do editor — ele aceita apenas um ID no campo Google Tag. Se você usa GTM, insira o GTM-XXXXX e configure o GA4 dentro do próprio GTM. Essa é a prática recomendada para quem usa Tag Manager.
O editor altera as imagens ou o CSS da LP?
Não. O editor opera apenas em elementos marcados com os atributos data-lp e data-managed. CSS, imagens, estrutura de layout, animações e demais elementos sem marcação não são tocados.
Clarity e Hotjar gravam vídeos dos visitantes — isso é legal?
Sim, com as devidas ressalvas. Ambas as ferramentas anonimizam dados sensíveis por padrão (campos de formulário, senhas). Para conformidade com a LGPD, certifique-se de incluir a menção dessas ferramentas na sua Política de Privacidade e, idealmente, apresente um banner de consentimento de cookies.

12 Glossário

data-lp
Atributo HTML personalizado que marca elementos editáveis na LP. Ex: data-lp="cta-hero" identifica o texto do botão principal. O editor usa esses marcadores para saber onde aplicar cada campo.
data-managed
Atributo que identifica scripts e links gerenciados pelo editor. Ex: data-managed="google-tag-script". Permite que o editor remova e reinsira esses elementos de forma segura em exportações consecutivas.
data-wa-message
Atributo nos links de WhatsApp que armazena o texto da mensagem pré-preenchida (decodificado). O editor usa esse valor para reconstruir o href com encodeURIComponent() ao exportar.
DOM Pipeline
Técnica de processamento onde o HTML é convertido em uma árvore de objetos (DOM) antes de ser modificado. Garante que alterações em um elemento nunca afetam outros acidentalmente — ao contrário de regex aplicada diretamente no HTML.
GA4
Google Analytics 4. Plataforma de analytics da Google. ID começa com G-.
GTM
Google Tag Manager. Gerenciador de tags que permite inserir e configurar scripts (GA4, Pixel, etc.) sem alterar o código. ID começa com GTM-.
Meta Pixel
Script de rastreamento do Facebook/Instagram. Permite medir conversões e criar audiências personalizadas para anúncios.
JSON-LD
Formato de dados estruturados para SEO. O bloco <script type="application/ld+json"> na LP contém informações sobre a clínica (nome, telefone, CRO, Instagram) para que buscadores como o Google entendam o contexto do site.
UTM
Parâmetros de URL usados para identificar a origem de visitas (ex: ?utm_source=google&utm_campaign=agosto). A LP preserva esses parâmetros durante toda a sessão e os inclui nos eventos de tracking.
Idempotência
Propriedade de uma operação que produz o mesmo resultado independente de quantas vezes é executada. O ciclo de exportação do editor é idempotente: exportar 10 vezes seguidas com os mesmos dados produz exatamente o mesmo HTML.