Skip to content

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 sobre Liquid.

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

Pré-visualização e teste

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

No entanto, ao pré-visualizar a landing page a partir da tabela de dados ou da página Landing Page details, 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 despublicada pela Braze.

Evitar a despublicação de landing pages

Se sua página exceder esses limites de tamanho, você receberá um e-mail informando que ela poderá ser despublicada caso continue excedendo o limite. Quando o limite for atingido, a página será automaticamente despublicada 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 faça loops contínuos nem referencie grandes conjuntos de dados.
  • Não dependa de lógica matemática ou condicional 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. Os ativos servidos a partir da Biblioteca de mídia são hospedados no 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 a 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 baseada no horário do dia.

Buscar 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), então a página carrega 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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<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 de placeholder 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 e fallbacks apropriados.
  • 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 seu endpoint de API valide o identificador e retorne apenas dados que o usuário está autorizado a ver. Implemente limite de taxa para evitar abusos. Para orientações sobre como escolher identificadores seguros, consulte as práticas recomendadas de nomenclatura de ID do usuário.

Páginas de fallback

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

  • 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
New Stuff!