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 dedicada de Liquid.

Editor de páginas de inicio con personalización de Liquid añadida.

Vista previa y pruebas

Al previsualizar una página de inicio 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 inicio desde la tabla de datos o la página de detalles de la página de inicio, solo podrás verla como un usuario aleatorio.

Consideraciones sobre la personalización

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

  • Guardar una página de inicio: 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 despublicar la página automáticamente.

Evitar la despublicación de páginas de inicio

Si tu página supera estos límites de tamaño, recibirás un correo electrónico indicando que puede ser despublicada si continúa superando el límite. Cuando se alcance el umbral, la página se despublicará 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 con 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 inicio. 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 inicio tanto para visitantes identificados como anónimos.

  • Usuarios identificados: Enlaza a la página de inicio desde un mensaje de Braze e incluye la etiqueta de Liquid de la página de inicio. 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.

Obtener datos externos con código personalizado

Puedes usar un bloque de código personalizado para obtener datos de puntos de conexión externos y mostrarlos en tu página de inicio. 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. Algunos ejemplos incluyen inventario en tiempo real, recomendaciones personalizadas u otros datos que tu organización gestiona en sistemas independientes.

Ejemplo de implementación

Este ejemplo muestra cómo obtener datos de usuario desde una API externa. Reemplaza el punto de conexión de la API con tu propio punto de conexión 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 inicio:

  • Estados de carga: Los usuarios verán texto de marcador de posición hasta que el punto de conexión responda. Considera añadir un indicador de carga o una pantalla esqueleto.
  • Gestión de errores: Si el punto de conexión falla o tarda en responder, la página puede parecer rota. Implementa mensajes de error y alternativas apropiados.
  • Rendimiento: La página se carga de inmediato, pero los datos aparecen después de que se complete la solicitud externa. Mantén las respuestas de tu API rápidas para la mejor experiencia de usuario.
  • Seguridad: Asegúrate de que tu punto de conexión de la 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 las 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 actualmente. 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
  • Superación de los límites máximos de tamaño de la página de inicio
New Stuff!