O construtor de páginas da Marketek oferece flexibilidade para adicionar código personalizado em HTML, CSS e JavaScript. Isso permite integrar pixels de rastreamento, personalizar estilos além do editor visual e adicionar funcionalidades interativas avancadas.
Onde Inserir Código Personalizado
Existem três locais principais para adicionar código nas suas páginas:
| Local | Acesso | Uso recomendado |
|---|---|---|
| Configurações da página (Header) | Página > Configurações > Header Code | Pixels de rastreamento, meta tags, CSS global |
| Configurações da página (Footer) | Página > Configurações > Footer Code | Scripts de analytics, chat widgets, JavaScript que precisa carregar após o DOM |
| Elemento de código customizado | Arraste o elemento Custom Code para a página | HTML/JS em posição específica dentro do conteúdo |
Casos de Uso Comuns
Pixels de Rastreamento
Insira pixels do Facebook (Meta), Google Analytics, Google Ads e outras plataformas de anuncios na secao Header Code das configurações da página:
- Cole o snippet fornecido pela plataforma de anuncios exatamente como recebido.
- Para rastrear conversões em páginas de agradecimento, adicione o evento de conversão específico na página de destino pos-formulário.
Estilos CSS Customizados
Para personalizar a aparência além do que o editor visual permite:
- Adicione uma tag <style> na secao Header Code.
- Use seletores CSS para alterar fontes, cores, espacamentos e animações.
- Inspecione elementos da página com as ferramentas de desenvolvedor do navegador (F12) para identificar os seletores corretos.
💡 Dica: Prefira usar classes CSS em vez de IDs para estilos, pois classes sao mais reutilizáveis e menos propensos a conflitos.
Elementos Interativos com JavaScript
Adicione funcionalidades dinâmicas como:
- Contadores regressivos para ofertas por tempo limitado.
- Abas de conteúdo e acordeoes customizados.
- Validação de formulários personalizada.
- Pop-ups e modais acionados por comportamento do usuário.
Widgets de Terceiros
Integre ferramentas externas adicionando seus scripts:
- Chats ao vivo de provedores externos.
- Widgets de agendamento.
- Formulários de pesquisa incorporados.
- Players de vídeo de plataformas como YouTube ou Vimeo com parametros customizados.
Depuração de Código Personalizado
📌 Passo 1: Use o console do navegador
Pressione F12 para abrir as ferramentas de desenvolvedor. A aba Console exibira erros de JavaScript e a aba Elements mostra o HTML renderizado.
📌 Passo 2: Teste em modo preview
Sempre use o modo de pre-visualização da página antes de publicar. Verifique se o código funciona em desktop e dispositivos moveis.
📌 Passo 3: Verifique conflitos
Código personalizado pode entrar em conflito com os scripts nativos da plataforma. Se algo parar de funcionar após adicionar código, remova-o temporariamente para isolar o problema.
⚠️ Importante: Nunca insira código de fontes não confiáveis. Scripts maliciosos podem comprometer a segurança da sua página e dos dados dos visitantes.
Boas Práticas de Segurança
- Revise todo código antes de inserir — entenda o que cada linha faz.
- Use HTTPS para todas as fontes externas (scripts, imagens, iframes).
- Mantenha um registro de todos os códigos adicionados para facilitar manutenção.
- Teste em diferentes navegadores (Chrome, Firefox, Safari, Edge) para garantir compatibilidade.
- Minimize a quantidade de scripts externos para não prejudicar a velocidade de carregamento.
🤖 Ficou com alguma dúvida?
Converse com o TekBot, nosso assistente IA especialista em Marketek. Ele pode te ajudar com configurações, dúvidas técnicas e melhores práticas — 24h por dia.