Skip to content

Personalizar páginas de inicio

Usa la personalización con Liquid en las páginas de inicio para adaptar dinámicamente el contenido con datos del perfil de usuario. Por ejemplo, puedes personalizar los títulos en función de diferentes atributos de usuario sin gestionar múltiples páginas de inicio estáticas.

Insertar Liquid

En el editor de arrastrar y soltar, puedes insertar personalización con Liquid tanto en el editor como en la configuración de la página o del bloque en el panel de la derecha. Para obtener instrucciones sobre cómo implementar Liquid, consulta nuestra documentación de Liquid dedicada.

Editor de landing page con personalización de Liquid añadida.

Vista previa y pruebas

Al previsualizar una página de destino en el editor, puedes ver la página como un usuario aleatorio, un usuario existente o un usuario personalizado.

Sin embargo, al previsualizar la página de destino desde la tabla de datos o la página de detalles de la página de destino, solo podrás verla como un usuario aleatorio.

Consideraciones de personalización

Para mantener un rendimiento óptimo con las páginas de destino personalizadas, ten en cuenta los siguientes límites de tamaño:

  • Guardar una página de destino: Si el tamaño supera los 500 KB, es posible que recibas un mensaje de advertencia indicando que la página ha superado nuestros límites de tamaño, lo que puede impedir su publicación.
  • Renderizado con personalización de Liquid: El tamaño total no debe superar 1 MB. De lo contrario, Braze puede cancelar automáticamente la publicación de la página.

Evitar la cancelación de publicación de páginas de destino

Si tu página supera estos límites de tamaño, recibirás un correo electrónico indicando que puede cancelarse su publicación si continúa superando el límite. Cuando se alcance el umbral, la página se cancelará automáticamente y recibirás una notificación.

Para evitar que tu página supere los límites de tamaño o experimente tiempos de carga lentos, asegúrate de usar personalización de Liquid que:

  • No recorra continuamente ni haga referencia a grandes conjuntos de datos.
  • No dependa de lógica matemática o condicional extensa dentro del bloque de Liquid.

Además, evita incrustar scripts grandes, hojas de estilo y activos codificados en base64 directamente en el código de tu página de destino. Estos activos en línea cuentan para el límite de tamaño de la página y pueden ralentizar el renderizado. En su lugar, sube fuentes, imágenes, hojas de estilo y scripts a la biblioteca de medios. Los activos servidos desde la biblioteca de medios están alojados en el CDN de Braze, por lo que no se procesan para el renderizado de Liquid y no cuentan para el límite de tamaño de la página.

Usar Liquid para usuarios identificados y anónimos

Liquid puede personalizar la experiencia de la página de destino tanto para visitantes identificados como anónimos.

  • Usuarios identificados: Enlaza a la página de destino desde un mensaje de Braze e incluye la etiqueta de Liquid de la página de destino. Esto asocia al usuario con su perfil de Braze y personaliza la experiencia de la página.
  • Visitantes anónimos: Usa Liquid para contenido contextual no basado en el perfil, como un número aleatorio o un saludo según la hora del día.

Rellenar previamente los campos del formulario

Si un campo de formulario de la página de destino se asigna a un atributo del perfil de usuario, puedes rellenar previamente ese campo para los usuarios que regresan. Esto ayuda a reducir la fricción del formulario y mejora las tasas de finalización para los visitantes conocidos.

Para usar el rellenado previo de campos del formulario:

  1. Selecciona el campo del formulario en el editor de arrastrar y soltar.
  2. En el panel de configuración de la derecha, asigna el campo al atributo de perfil correspondiente.
  3. Selecciona Rellenar previamente desde el perfil de usuario.

Configuración de campo de formulario de la página de destino mostrando la opción de rellenar previamente desde los datos del perfil de usuario.

El rellenado previo solo funciona para usuarios identificados. Para los visitantes anónimos, los campos del formulario mantienen su estado predeterminado:

  • Campos de entrada: Muestran su texto de marcador de posición.
  • Casillas de verificación, botones de opción y controles similares: Permanecen sin seleccionar hasta que el usuario interactúa con ellos.

Obtener datos externos con código personalizado

Puedes usar un bloque de Custom Code para obtener datos de endpoints externos y mostrarlos en tu página de destino. Este enfoque realiza la solicitud en el lado del cliente (en el navegador del usuario), por lo que la página se carga rápidamente sin retrasos de renderizado del lado del servidor.

Caso de uso

Este patrón es útil cuando necesitas mostrar datos específicos del usuario que no están almacenados en Braze. Los ejemplos incluyen inventario en tiempo real, recomendaciones personalizadas u otros datos que tu organización gestiona en sistemas separados.

Ejemplo de implementación

Este ejemplo muestra cómo obtener datos de usuario de una API externa. Reemplaza el endpoint de la API con tu propio endpoint seguro y usa un 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>

Consideraciones

Al obtener datos externos en páginas de destino:

  • Estados de carga: Los usuarios verán texto de marcador de posición hasta que el endpoint responda. Considera añadir un indicador de carga o una pantalla esqueleto.
  • Manejo de errores: Si el endpoint falla o tarda en responder, la página puede parecer rota. Implementa mensajes de error y alternativas apropiados.
  • Rendimiento: La página se carga inmediatamente, pero los datos aparecen después de que se completa la solicitud externa. Mantén las respuestas de tu API rápidas para la mejor experiencia de usuario.
  • Seguridad: Asegúrate de que tu endpoint de API valide el identificador y solo devuelva datos que el usuario está autorizado a ver. Implementa límites de velocidad para prevenir abusos. Para orientación sobre cómo elegir identificadores seguros, consulta Mejores prácticas de nomenclatura de ID de usuario.

Páginas alternativas

Si tus usuarios intentan acceder a una página que ha sido despublicada, verán un mensaje indicando que la página no puede cargarse en ese momento. Las razones por las que una página ha sido despublicada incluyen:

  • Liquid complejo o con errores, lo que puede causar tiempos de renderizado prolongados
  • Problemas de red del usuario
  • Exceder los límites máximos de tamaño de la página de destino
New Stuff!