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.
Criando uma landing page
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 pesquisar a página no seu espaço de trabalho interno. Eles não serão visíveis para seus clientes.
Detalhes do site
Configure metatags para personalizar como sua página aparece na aba do navegador e otimizar para resultados de mecanismos de busca. Elas serão visíveis para seus clientes.
Sugerimos seguir estas práticas recomendadas:
| 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 em todo o seu espaço de trabalho. |
Etapa 3: Personalizar a página
Se ainda não fez isso, selecione Salvar como rascunho. Para começar a personalizar sua página, selecione Edit landing page. O editor de arrastar e soltar carregará um modelo padrão que você pode personalizar para se adequar ao 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.
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 seu 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 para uma ação específica, como abrir um link ou enviar um formulário. |
| Botão de opção | Adiciona uma lista de opções das quais os usuários podem selecionar uma. Quando enviado, 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 específica. Pode ser incorporado dentro do texto ou 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 personalização avançada. |
Span text
Para aplicar estilos específicos a blocos de texto sem código personalizado, destaque o texto que deseja estilizar e, em seguida, selecione Envolver com span para estilo.
Ajuste as propriedades do span para atualizar o estilo do seu texto, que inclui:
- Família da fonte, peso, tamanho
- Altura da linha
- Espaçamento entre as letras
- Alinhamento e cor do texto
- Preenchimento do bloco
Você pode usar esses blocos para criar um formulário que vincula os dados enviados pelo usuário ao perfil dele na Braze. Lembre-se de que, se você usar blocos de formulário, também precisará criar uma landing page adicional para o estado de confirmação.
| Tipo de bloco | Descrição |
|---|---|
| Captura de e-mail | Um campo de formulário para endereços de e-mail. Quando enviado, o endereço de e-mail é adicionado ao perfil desse usuário na Braze. |
| Captura de telefone | Um campo de formulário para números de telefone. Quando enviado, 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 um usuário marcar a caixa, o atributo do bloco é definido como true. Se não for marcada, 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. |
Depois de 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ários existentes quando eles enviam o formulário.
Estilos do contêiner da página
Você pode definir estilos a serem aplicados em todos os blocos de componentes relevantes na sua landing page a partir da guia Page container. Esses estilos serão usados em toda a sua página, exceto onde você os substituir 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 do usuário
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 na linha que deseja tornar responsiva e ative a opção 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 múltiplas colunas em telas menores. Isso faz com que as páginas tenham uma aparência e experiência melhores em dispositivos móveis sem código personalizado.
Campos opcionais e obrigatórios
Você pode escolher se um campo de formulário é obrigatório ou opcional. Campos obrigatórios devem ser preenchidos antes que o formulário possa ser enviado. Campos opcionais podem ser deixados em branco ou não selecionados pelo usuário.
Por exemplo, para exigir 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 sua landing page inclui um formulário, crie uma segunda landing page para servir como experiência de confirmação. Essa página deve agradecer aos usuários ou fornecer um próximo passo após o envio do formulário.
Para vincular a página de confirmação:
- Selecione o botão Submit no seu formulário
- Use a ação Open web URL para vincular à sua página de confirmação
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 sua página de confirmação abrir em uma nova aba, um usuário que retornar à landing page original e reenviar com informações atualizadas pode sobrescrever o envio anterior, resultando em dados inconsistentes.
Se você configurar um botão com Submit form when button is clicked ativado e usar On-click Behavior para abrir uma URL da web em uma nova aba, o bloqueador de pop-ups integrado do Safari no iOS pode impedir que a navegação funcione. Isso ocorre porque o envio do formulário seguido pela abertura de uma nova aba é tratado como um pop-up.
Para evitar esse problema, configure botões com envio de formulário para abrir a URL resultante na mesma aba (não em uma nova aba). Botões sem envio de formulário podem abrir URLs em novas abas sem problemas.
Etapa 5: Pré-visualizar a página
Você pode pré-visualizar sua landing page na guia Preview do editor. Depois de salvar sua landing page como rascunho, você pode visitar a URL acessando Landing Pages e selecionando Copy URL ao lado da sua landing page. Você também pode compartilhar a URL com colaboradores.
Antes de publicar, certifique-se de que:
- Você não excedeu o limite de landing pages publicadas do seu plano
- Cada página baseada em formulário está vinculada a uma página de confirmação usando a ação Open web URL
- Todos os campos obrigatórios da página (como caminho da URL e título) estão completos
Quando estiver pronto, selecione Publish Landing Page.
Usando modelos
Use modelos de landing page para criar templates para suas próximas Campaigns. Esses modelos podem ser acessados e gerenciados tanto no editor de landing pages quanto na seção Templates do dashboard (Templates > Landing Page Templates). Modelos de landing page exigem um nome e, opcionalmente, uma descrição.
Gerenciando modelos
Você pode pré-visualizar, arquivar, editar ou duplicar modelos de landing page. Ao editar uma landing page, você também pode salvar sua landing page como modelo, fazer alterações no modelo ou excluir o conteúdo da landing page.
Visualizando 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.
Lidando 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. Pré-visualize sua landing page para confirmar o comportamento dos campos antes de publicar.