Criar landing pages
Saiba como criar e personalizar uma landing page usando o editor de arrastar e soltar para expandir seu público e coletar preferências diretamente na Braze.
Pré-requisitos
Para acessar o construtor de landing pages, você precisa de determinadas permissões. Se você não tiver acesso, peça ajuda ao administrador da Braze.
Criar uma landing page
Uma landing page é uma página web publicada e ativa, com uma URL compartilhável que seus clientes podem visitar.
Os modelos de landing page são pontos de partida de design não publicados, sem URL pública, o que significa que não podem ser compartilhados com seus clientes. Para criar uma página a partir de um modelo, consulte Usando modelos.
Etapa 1: Criar um novo rascunho
Acesse Messaging > Landing Pages e selecione Create landing page. Você também pode selecionar o nome de uma landing page existente para duplicá-la ou fazer alterações.
Etapa 2: Inserir os detalhes da página
Adicione detalhes internos e públicos que ajudam a organizar, personalizar a marca e compartilhar sua landing page.
Detalhes gerais
Insira um nome e uma descrição para a landing page. Esses detalhes são usados para buscar a página no espaço de trabalho interno. Eles não serão visíveis para seus clientes.
Detalhes do site
Configure metatags para personalizar a aparência da página na aba do navegador e otimizar para resultados de mecanismos de busca. Esses detalhes são visíveis para seus clientes.
Recomendamos seguir estas boas práticas:
| Campo | Descrição | Recomendações |
|---|---|---|
| Título do site | O título exibido na aba do navegador. | Use até 60 caracteres. |
| Meta descrição | Um trecho de texto exibido nos resultados de busca. | Use entre 140 e 160 caracteres. |
| Favicon | O ícone que aparece ao lado do título do site na aba do navegador. | Use uma proporção de 1:1 e um tipo de arquivo compatível: PNG, JPEG ou ICO. |
| URL da página | Este é o caminho da URL para sua landing page. Esse valor também é referenciado ao usar Liquid tags de landing page, que você pode incorporar em uma mensagem para identificar automaticamente quando os usuários enviam seu formulário. | Esse valor deve ser único no seu espaço de trabalho. |
Etapa 3: Personalizar a página
Se ainda não fez isso, selecione Save as draft. Para começar a personalizar sua página, selecione Edit landing page. O editor de arrastar e soltar carrega previamente um modelo padrão que você pode customizar de acordo com seu caso de uso.
O editor usa dois tipos de componentes para a composição de landing pages: blocos básicos e blocos de formulário. Todos os blocos devem ser colocados em uma linha. Para uma referência detalhada de cada bloco e suas propriedades, consulte Blocos do editor (landing pages).
Você pode usar esses blocos para adicionar conteúdo e personalizar o layout da sua landing page.
| Tipo de bloco | Descrição |
|---|---|
| Título | Um bloco de texto para adicionar um cabeçalho ou título ao conteúdo. Útil para estruturar seções e melhorar a legibilidade. |
| Parágrafo | Um bloco de texto para descrições mais longas ou contexto adicional. Suporta formatação de rich text. |
| Botão | Um elemento clicável que direciona os usuários a uma ação específica, como abrir um link ou enviar um formulário. |
| Botão de rádio | Adiciona uma lista de opções das quais os usuários devem selecionar uma. Ao enviar, o perfil do usuário registra o atributo personalizado associado. |
| Imagem | Um bloco para exibir imagens. Você pode fazer upload de uma imagem ou fornecer uma URL para referenciar uma fonte externa. |
| Link | Um hiperlink que os usuários podem clicar para navegar até uma URL especificada. Pode ser incorporado ao texto ou ser independente. |
| Espaçador | Um bloco invisível que adiciona espaçamento vertical entre elementos para melhorar o layout e a legibilidade. |
| Código personalizado | Um bloco que permite inserir e executar HTML, CSS ou JavaScript personalizados para customizações avançadas. Para interagir com o SDK da Braze a partir desse bloco, consulte Ponte JavaScript para landing pages e Criar blocos de formulário personalizados. |
Texto com span
Para aplicar estilos específicos a blocos de texto sem código personalizado, destaque o texto que deseja estilizar e selecione Wrap with span for style.
Ajuste as propriedades do span para atualizar o estilo do texto, que inclui:
- Família, peso e tamanho da fonte
- Altura da linha
- Espaçamento entre letras
- Alinhamento e cor do texto
- Preenchimento do bloco
Você pode usar esses blocos para criar um formulário que vincula os dados enviados pelos usuários ao perfil deles na Braze. Lembre-se de que, se usar blocos de formulário, você também precisará criar uma landing page adicional para o estado de confirmação.
Você pode dividir um formulário longo em várias etapas, cada uma com seus próprios campos e uma etapa de confirmação integrada, usando um formulário de várias etapas em vez de colocar blocos de formulário diretamente em uma linha.
| Tipo de bloco | Descrição |
|---|---|
| Captura de e-mail | Um campo de formulário para endereços de e-mail. Ao enviar, o endereço de e-mail é adicionado ao perfil do usuário na Braze. |
| Captura de telefone | Um campo de formulário para números de telefone. Ao enviar, o usuário é inscrito no seu grupo de inscrições de SMS ou WhatsApp. |
| Campo de entrada | Um campo de formulário que suporta atributos padrão (como nome e sobrenome) ou uma string de atributo personalizado de sua escolha. |
| Menu suspenso | Os usuários podem selecionar um item de uma lista predefinida. Você pode adicionar qualquer string de atributo personalizado à lista. |
| Caixa de seleção | Se o usuário marcar a caixa, o atributo do bloco é definido como true. Se não for marcado, o atributo é definido como false. |
| Grupo de caixas de seleção | Os usuários podem selecionar entre várias opções apresentadas. Os valores são definidos ou adicionados a um atributo personalizado de array definido. |
| Gerenciar inscrições | Uma lista de grupos de inscrições de e-mail, SMS ou WhatsApp. Os usuários selecionam em quais grupos desejam participar ao enviar o formulário. Cada bloco é para um canal. Para saber mais, consulte Bloco Gerenciar inscrições. |
Após criar uma landing page com um formulário, certifique-se de incorporar a Liquid tag de landing page na sua mensagem. Com essa tag, a Braze pode identificar e atualizar automaticamente os perfis de usuário existentes quando eles enviam o formulário.
Estilos do contêiner da página
Você pode definir estilos que serão aplicados a todos os blocos de componentes relevantes na sua landing page a partir da guia Page container. Esses estilos se aplicam em toda a página, exceto quando você os substitui com um bloco específico.
Recomendamos configurar os estilos no nível do contêiner da página antes de personalizar os estilos no nível do bloco. Você também pode adicionar uma imagem de fundo para a página inteira.
Responsividade para dispositivos dos usuários
Você pode tornar sua landing page responsiva ao tamanho do dispositivo do usuário, empilhando colunas verticalmente em telas menores. Para ativar isso, adicione uma coluna à linha que deseja tornar responsiva e, em seguida, ative Vertically stack on smaller screens na seção Customize columns.
Quando ativado, você também pode inverter a ordem de empilhamento das colunas para controlar a ordem vertical do conteúdo de várias colunas em telas menores. Isso faz com que as páginas fiquem melhores no celular sem necessidade de código personalizado.
Ocultar linhas e blocos por dispositivo
Você pode ocultar uma linha ou bloco no desktop ou em tablets e dispositivos móveis. Selecione a linha ou bloco no canvas. No painel de propriedades, selecione Hide on e, em seguida, selecione Desktop ou Tablet and smaller devices.
Uma linha ou bloco oculto não aparece para esse tipo de dispositivo na prévia do editor de arrastar e soltar nem na landing page ativa.
Campos opcionais e obrigatórios
Você pode escolher se determinados campos de formulário são obrigatórios ou opcionais. Os campos obrigatórios devem ser preenchidos antes que o formulário possa ser enviado. Os campos opcionais podem ser deixados em branco ou não selecionados pelo usuário.
Os botões de rádio são sempre obrigatórios e não podem ser definidos como opcionais. Se você precisar de um campo de escolha única opcional, considere usar um menu suspenso.
Por exemplo, para garantir a captura de consentimento antes do envio do formulário, você pode ativar Required field input para definir uma caixa de seleção como obrigatória com o texto de aviso apropriado.
Etapa 4: Criar uma página de confirmação (opcional)
Se sua landing page não inclui um formulário, pule para a próxima etapa.
Se o formulário usa um formulário de várias etapas, pule esta etapa. Os formulários de várias etapas incluem uma etapa de confirmação integrada e bloqueada, então você não precisa de uma página de confirmação separada.
Se sua landing page inclui um formulário, você pode opcionalmente criar uma segunda landing page para servir como a experiência de confirmação. Essa página deve agradecer aos usuários ou fornecer uma próxima etapa após o envio do formulário.
- Selecione o botão Submit no seu formulário
- Escolha se deseja incluir uma página de confirmação quando os usuários enviarem o formulário
- Use o comportamento ao clicar Open web URL para enviar os usuários a uma página de confirmação
- Use o comportamento ao clicar None para que os usuários permaneçam na landing page
Se você não incluir uma página de confirmação, os usuários podem não saber que o formulário foi enviado com sucesso. Sempre inclua uma experiência de confirmação para completar a jornada.
Se a página de confirmação abre em uma nova aba, um usuário que retorna à landing page original e reenvia com informações atualizadas pode sobrescrever o envio anterior, resultando em dados inconsistentes.
Etapa 5: Visualizar a página
Você pode visualizar sua landing page na guia Preview do editor. Após salvar sua landing page como rascunho, você pode visitar a URL acessando Landing Pages e selecionando Copy URL ao lado da sua landing page.
Compartilhando um link de prévia
No editor, você também pode selecionar Copy preview link para compartilhar a página com revisores que não têm acesso ao dashboard.
- Se sua landing page não usa Liquid, esse link é o mesmo que a URL direta de Copy URL, aberta no modo de prévia.
- Se sua landing page usa Liquid e você tem o direito ao Landing Pages Pro, o link renderiza a página ativa sob demanda e reflete suas alterações atuais, em vez de um snapshot de quando você gerou o link. O conteúdo é personalizado por usuário. A prévia exibe o favicon da Braze e não pode ser alterada.
- Se você adicionar Liquid a uma landing page sem o plano Pro, as Liquid tags não são avaliadas e aparecem como texto bruto para os visitantes na página publicada.
Para links de prévia em outros canais, consulte prévia compartilhável.
Etapa 6: Publicar
Antes de publicar, certifique-se de que:
- Você não excedeu o limite de landing pages publicadas do seu plano
- Cada página com formulário está vinculada a uma página de confirmação usando a ação Open web URL, ou usa um formulário de várias etapas com sua etapa de confirmação integrada
- Todos os campos obrigatórios da página (como caminho da URL e título) estão preenchidos
Quando estiver pronto, selecione Publish Landing Page.
Bloqueadores de pop-up agressivos e bloqueadores de anúncios no iOS e no Safari (incluindo os controles nativos do Safari e extensões de terceiros) podem impactar negativamente o comportamento das landing pages quando o botão Submit de um formulário também abre outra URL, seja na mesma aba ou em uma nova aba.
Usar modelos
Os modelos de landing page são pontos de partida reutilizáveis de design que ajudam você a criar landing pages mais rapidamente. Um modelo não possui URL pública e não pode ser visitado por clientes. Para criar uma landing page ativa a partir de um modelo, selecione o modelo ao criar uma nova landing page, personalize conforme necessário e publique.
Os modelos podem ser acessados e gerenciados tanto no editor de landing pages quanto na página Landing Page Templates (Content > Landing Page). Os modelos de landing page exigem um nome e uma descrição opcional.
Gerenciar modelos
Você pode pré-visualizar, arquivar ou editar modelos de landing page. Você pode duplicar seus próprios modelos de landing page (localizados em Seus Modelos), mas não os modelos da Braze. Ao editar uma landing page, você pode salvar sua landing page como um modelo, fazer alterações no modelo ou excluir o conteúdo da landing page.
Visualizar análise de dados
Para analisar a eficácia da sua landing page, acesse Messaging > Landing Pages e selecione uma landing page que você publicou. Aqui, você pode acompanhar o número de visualizações de página, cliques na página, envios de formulário e as taxas de envio da sua landing page.
Lidar com erros de envio de formulário
Se um usuário tentar enviar um formulário com campos ausentes ou entradas não suportadas, ele verá uma mensagem de erro genérica e não conseguirá enviar.
Causas comuns:
- Campos obrigatórios estão em branco
- Caracteres especiais são usados em campos de texto
- Uma caixa de seleção obrigatória não está marcada
As mensagens de erro exibidas aos usuários não podem ser personalizadas. Visualize sua landing page para confirmar o comportamento dos campos antes de publicar.