Ir para o conteúdo

Personalizar landing pages

Use a personalização com Liquid em landing pages para adaptar dinamicamente o conteúdo com dados do perfil de usuário. Por exemplo, você pode personalizar títulos com base em diferentes atributos de usuário sem precisar gerenciar várias landing pages estáticas.

Inserindo Liquid

No editor de arrastar e soltar, você pode inserir personalização com Liquid tanto no editor quanto nas configurações da página ou do bloco no painel à direita. Para instruções sobre como implementar Liquid, confira nossa documentação dedicada de Liquid.

Editor de landing page com personalização Liquid adicionada.

Prévia e testes

Ao visualizar a prévia de uma landing page no editor, você pode ver a página como um usuário aleatório, um usuário existente ou um usuário personalizado.

No entanto, ao visualizar a prévia da landing page a partir da tabela de dados ou da página Detalhes da landing page, você só poderá visualizá-la como um usuário aleatório.

Considerações sobre personalização

Para manter o desempenho ideal com landing pages personalizadas, observe os seguintes limites de tamanho:

  • Salvar uma landing page: Se o tamanho exceder 500 KB, você poderá receber uma mensagem de aviso indicando que a página excedeu nossos limites de tamanho, o que pode impedir sua publicação.
  • Renderização com personalização Liquid: O tamanho total não deve exceder 1 MB. Caso contrário, a página poderá ser automaticamente tornada privada pela Braze.

Evitar tornar landing pages privadas

Se sua página exceder esses limites de tamanho, você receberá um e-mail informando que ela poderá ser tornada privada caso continue excedendo o limite. Quando o limite for atingido, a página será automaticamente tornada privada e você receberá uma notificação.

Para evitar que sua página exceda os limites de tamanho ou tenha tempos de carregamento lentos, certifique-se de usar personalização Liquid que:

  • Não percorra continuamente nem faça referência a grandes conjuntos de dados.
  • Não dependa de lógica condicional ou matemática extensa dentro do bloco Liquid.

Além disso, evite incorporar scripts grandes, folhas de estilo e ativos codificados em base64 diretamente no código da sua landing page. Esses ativos inline contam para o limite de tamanho da página e podem tornar a renderização mais lenta. Em vez disso, faça upload de fontes, imagens, folhas de estilo e scripts para a biblioteca de mídia. Ativos servidos pela biblioteca de mídia são hospedados na rede de distribuição de conteúdo (CDN) da Braze, portanto não são processados para renderização Liquid e não contam para o limite de tamanho da página.

Usar Liquid para usuários identificados e anônimos

O Liquid pode personalizar a experiência da landing page tanto para visitantes identificados quanto anônimos.

  • Usuários identificados: Vincule à landing page a partir de uma mensagem da Braze e inclua a Liquid tag de landing page. Isso associa o usuário ao seu perfil na Braze e personaliza a experiência da página.
  • Visitantes anônimos: Use Liquid para conteúdo contextual, não baseado em perfil, como um número aleatório ou uma saudação de acordo com o horário do dia.

Pré-preencher campos de formulário

Se um campo de formulário de landing page está mapeado para um atributo de perfil de usuário, você pode pré-preencher esse campo para usuários recorrentes. Isso ajuda a reduzir o atrito no formulário e melhora as taxas de conclusão para visitantes conhecidos.

Para usar o pré-preenchimento de campos de formulário:

  1. Selecione o campo do formulário no editor de arrastar e soltar.
  2. No painel de configurações à direita, mapeie o campo para o atributo de perfil apropriado.
  3. Selecione Pré-preencher a partir do perfil de usuário.

Configurações do campo de formulário da landing page mostrando a opção de pré-preencher a partir dos dados do perfil de usuário.

O pré-preenchimento funciona apenas para usuários identificados. Para visitantes anônimos, os campos de formulário mantêm seu estado padrão:

  • Campos de entrada: Exibem seu texto de placeholder.
  • Caixas de seleção, botões de opção e controles semelhantes: Permanecem desmarcados até que o usuário interaja com eles.

Buscando dados externos com código personalizado

Você pode usar um bloco de Custom Code para buscar dados de endpoints externos e exibi-los na sua landing page. Essa abordagem faz a requisição no lado do cliente (no navegador do usuário), para que a página carregue rapidamente, sem atrasos de renderização no servidor.

Caso de uso

Esse padrão é útil quando você precisa exibir dados específicos do usuário que não estão armazenados na Braze. Exemplos incluem inventário em tempo real, recomendações personalizadas ou outros dados que sua organização gerencia em sistemas separados.

Exemplo de implementação

Este exemplo mostra como buscar dados de usuário de uma API externa. Substitua o endpoint da API pelo seu próprio endpoint seguro e use um identificador seguro.




<script>
window.onload = () => {
  // Use Liquid to template the user's external ID
  const userId = "{{${user_id}}}";

  const loadUserData = async () => {
    try {
      // Replace with your own secure API endpoint
      const response = await fetch(`https://your-api.example.com/user/${userId}`);

      if (!response.ok) {
        throw new Error('Failed to load data');
      }

      const data = await response.json();

      // Update the page with the fetched data
      document.querySelector("#user-data").textContent = JSON.stringify(data, null, 2);
      document.querySelector("#user-name").textContent = data.name || "User";
    } catch (error) {
      // Handle errors gracefully
      document.querySelector("#user-data").textContent = "Unable to load data at this time.";
    }
  };

  loadUserData();
};
</script>

<!-- Display area for fetched data -->
<p>Welcome, <span id="user-name">Loading...</span></p>
<pre id="user-data">Loading your information...</pre>

Considerações

Ao buscar dados externos em landing pages:

  • Estados de carregamento: Os usuários verão um texto provisório até que o endpoint responda. Considere adicionar um indicador de carregamento ou uma tela esqueleto.
  • Tratamento de erros: Se o endpoint falhar ou demorar para responder, a página pode parecer quebrada. Implemente mensagens de erro apropriadas e fallbacks.
  • Desempenho: A página carrega imediatamente, mas os dados aparecem após a conclusão da requisição externa. Mantenha as respostas da sua API rápidas para a melhor experiência do usuário.
  • Segurança: Certifique-se de que o endpoint da sua API valide o identificador e retorne apenas dados que o usuário está autorizado a ver. Implemente limite de frequência para prevenir abusos. Para orientações sobre como escolher identificadores seguros, consulte Boas práticas de nomenclatura de ID de usuário.

Páginas de fallback

Se os seus usuários tentarem acessar uma página que foi tornada privada, eles verão uma mensagem indicando que a página não pode ser carregada no momento. Entre os motivos para uma página ter sido tornada privada estão:

  • Liquid complexo ou com erros, que pode causar longos tempos de renderização
  • Problemas de rede do usuário
  • Exceder os limites máximos de tamanho da landing page

Documentação da plataforma de engajamento do cliente Braze.

Recursos
Jurídico
Empresa
© 2026 Braze, Inc. Todos os direitos reservados.
Verificando o status do Braze
New Stuff!