Como adicionar um código customizado à minha landing page?
Você pode adicionar seu próprio código HTML, formatação CSS e JavaScript à sua página de destino usando o elemento Código customizado.
Há algumas coisas a serem consideradas ao trabalhar com código customizado:
- Você pode adicionar código personalizado à seção <body> ou <head> da sua página de destino. Se estiver usando um código de terceiros, certifique-se de verificar com o provedor onde ele deve ser inserido.
- Para estar em conformidade com o GDPR, informe seus visitantes caso use código de terceiros que envolva mapeamento de calor ou rastreamento.
- Adicionar múltiplos códigos de rastreamento, widgets, etc., pode deixar sua página mais lenta. Páginas sobrecarregadas podem fazer os visitantes saírem rapidamente.
- No editor da página de destino, você verá apenas um espaço reservado para o código. O script só será executado no modo de visualização ou na página publicada. Teste antes de compartilhar o link da página.
- É recomendável verificar se a página com o código aparece corretamente em todos os navegadores, especialmente se estiver modificando CSS.
- A equipe de Sucesso do Cliente oferece suporte apenas para os recursos padrão do editor e não pode garantir o funcionamento de scripts de terceiros.
Adicionando código customizado ao corpo da página
O corpo (<body>) é onde o conteúdo principal é exibido, incluindo textos, imagens, vídeos e elementos interativos. Encontra-se entre o cabeçalho e o rodapé, servindo como espaço central para fornecer informação e envolver os visitantes.
Para adicionar um código customizado ao corpo da página de destino:
- No editor da página de destino, clique em Adicionar elementos.
- Arraste e solte o elemento Código customizado na página. Note que o editor irá destacar os pontos onde pode soltá-lo.
- Clique dentro do objeto Código customizado para abrir a barra de ferramentas e digite seu código.
Existem três tipos de código que pode utilizar na secção body:
- HTML – formatação padrão HTML, por exemplo:
<p> </p> - CSS – coloque o código CSS entre as tags:
<style> </style> - JavaScript – coloque o código JS entre as tags:
<script> </script>
Se quiser usar Less ou Sass, compile para CSS antes de adicionar entre as tags: <style> </style>
Também pode definir opções adicionais para o seu elemento de código personalizado:
- Adicionar nomes de classe adicionais – ative esta opção para adicionar nomes de classes ao contentor de elementos para que possa estilizá-lo de acordo com as suas necessidades.
- Posicionamento absoluto – ative esta opção para colocar o código personalizado em qualquer parte da sua landing page. Recomendamos que utilize esta opção apenas se tiver algum design invulgar que não possa ser criado de qualquer outra forma. Utilizar objetos com posicionamento absoluto pode tornar a sua página menos visível em dispositivos móveis. Pode encontrar mais informações sobre este recurso aqui.
- Ocultar em dispositivos móveis – ative esta opção para ocultar o resultado do código personalizado quando a sua página é aberta num dispositivo móvel.
Adicionando código customizado ao head da página
A seção <head> de uma página de destino é a parte que contém metadados e informações sobre a página, como seu título, codificação de caracteres, folhas de estilo vinculadas, scripts e tags relacionadas ao SEO. Ela não exibe conteúdo diretamente na página, mas fornece instruções essenciais para navegadores e mecanismos de busca.
Para adicionar código personalizado ao head da página:
- No editor da página de destino, clique em Gerenciar páginas.
- Passe o mouse sobre o botão de ação ao lado da página Home e clique em Configurações.
- Na janela Configurações de página, acesse a Elemento <head> e cole seu código.
Nota: as alterações são guardadas automaticamente quando clica fora da caixa de texto.
Certifique-se de usar as tags adequadas para renderização:
- Para HTML, utilize tags HTML, como:
<h2> </h2> - Para CSS, envolva o código com tags
<style> </style> - Para JavaScript, envolva o código com tags
<script> </script>
Passos para landing pages legadas
Pode adicionar um código personalizado (HTML, CSS e JavaScript) à sua landing page utilizando o espaço reservado para código personalizado no editor de landing page. Utilize esta opção sempre que pretender adicionar ferramentas e widgets não incluídos no editor.
O código é adicionado às versões para desktop e dispositivos móveis da sua landing page. Se pretender executar um teste A/B na sua landing page, adicione o espaço reservado a cada variante. Também pode adicioná-lo a uma página de agradecimento.
Pode adicionar o código personalizado a qualquer modelo novo ou existente no editor. Veja como lá chegar:
1. Aceda a Landing pages e faça uma das seguintes ações:
- clique no botão Criar landing page para criar uma nova página
- selecione Editar página no menu Ações junto ao nome da página
2. Clique duas vezes no ícone Código personalizado para adicionar o espaço reservado ao modelo.
O espaço reservado aparece no canto superior esquerdo da secção apresentada.
Ao clicar duas vezes no ícone, é aberto automaticamente um modal onde pode introduzir o código.
3. (Opcional) Pegue e arraste o espaço reservado se pretender que apareça num local específico da página. Clique duas vezes no espaço reservado para abrir um modal onde pode introduzir o código.
4. Cole ou introduza o código. Certifique-se de que envolve os seus scripts em tags
5. (Opcional) Se estiver a realizar um teste A/B, repita os passos 2 a 4 para cada variante da página.
6. Ao criar uma nova página, clique no ícone do telemóvel para gerar uma versão da sua página compatível com dispositivos móveis. Se estiver a editar uma página existente, clique nela para verificar se aprova as alterações.
7. (Opcional) Clique em Pré-visualização para verificar se o código apresenta corretamente todos os elementos que adicionou e que devem estar visíveis para os seus visitantes.
8. Guarde as alterações ou publique a landing page.
9. Veja a landing page publicada para verificar se está a ser apresentada corretamente.