Crear páginas de inicio
Aprende a crear y personalizar una página de inicio con el editor de arrastrar y soltar, para que puedas ampliar tu audiencia y recopilar preferencias directamente en Braze.
Requisitos previos
Para acceder al creador de páginas de destino, necesitas ciertos permisos. Si no tienes acceso, pide ayuda a tu administrador de Braze.
Crea una página de destino
Una página de destino es una página web publicada y en vivo con una URL compartible que tus clientes pueden visitar.
Las plantillas de páginas de destino son puntos de partida de diseño sin publicar y sin URL pública, lo que significa que no se pueden compartir con tus clientes. Para crear una página a partir de una plantilla, consulta Uso de plantillas.
Paso 1: Crea un nuevo borrador
Ve a Mensajería > Páginas de destino y selecciona Crear página de destino. También puedes seleccionar el nombre de una página de destino existente para duplicarla o hacerle cambios.
Paso 2: Introduce los detalles de la página
Añade detalles internos y de cara al público que te ayuden a organizar, personalizar la marca y compartir tu página de destino.
Detalles generales
Introduce un nombre y una descripción para la página de destino. Estos detalles se utilizan para buscar la página en tu espacio de trabajo interno. No serán visibles para tus clientes.
Detalles del sitio
Configura las metaetiquetas para personalizar cómo aparece tu página en la pestaña del navegador y optimizar los resultados en motores de búsqueda. Estos son visibles para tus clientes.
Te sugerimos seguir estas buenas prácticas:
| Campo | Descripción | Recomendaciones |
|---|---|---|
| Título del sitio | El título que se muestra en la pestaña del navegador. | Usa hasta 60 caracteres. |
| Meta descripción | Un fragmento de texto que se muestra en los resultados de búsqueda. | Usa entre 140 y 160 caracteres. |
| Favicon | El icono que aparece junto al título del sitio en la pestaña del navegador. | Usa una relación de aspecto de 1:1 y un tipo de archivo compatible: PNG, JPEG o ICO. |
| URL de la página | Esta es la ruta de URL a tu página de destino. Este valor también se referencia al usar etiquetas de Liquid de páginas de destino que puedes insertar en un mensaje para identificar automáticamente cuándo envían tu formulario. | Este valor debe ser único en todo tu espacio de trabajo. |
Paso 3: Personaliza la página
Si aún no lo has hecho, selecciona Guardar como borrador. Para empezar a personalizar tu página, selecciona Editar página de destino. El editor de arrastrar y soltar carga previamente una plantilla predeterminada que puedes personalizar para tu caso de uso.
El editor usa dos tipos de componentes para la composición de páginas de destino: bloques básicos y bloques de formulario. Todos los bloques deben colocarse en una fila. Para una referencia completa de cada bloque y sus propiedades, consulta Bloques de editor (páginas de destino).
Puedes usar estos bloques para añadir contenido y personalizar el diseño de tu página de destino.
| Tipo de bloque | Descripción |
|---|---|
| Título | Un bloque de texto para añadir un encabezado o título a tu contenido. Útil para estructurar secciones y mejorar la legibilidad. |
| Párrafo | Un bloque de texto para descripciones más extensas o contexto adicional. Admite formato de texto enriquecido. |
| Botón | Un elemento en el que se puede hacer clic y que dirige a los usuarios a una acción específica, como abrir un enlace o enviar un formulario. |
| Botón de opción | Añade una lista de opciones de las cuales los usuarios deben seleccionar una. Al enviar, el perfil de usuario registra el atributo personalizado asociado. |
| Imagen | Un bloque para mostrar imágenes. Puedes subir una imagen o proporcionar una URL para referenciar una fuente externa. |
| Enlace | Un hipervínculo en el que los usuarios pueden hacer clic para navegar a una URL especificada. Puede estar integrado dentro del texto o de forma independiente. |
| Espaciador | Un bloque invisible que añade espaciado vertical entre elementos para mejorar el diseño y la legibilidad. |
| Código personalizado | Un bloque que te permite insertar y ejecutar HTML, CSS o JavaScript personalizado para personalización avanzada. Para interactuar con el SDK de Braze desde este bloque, consulta Puente de JavaScript para páginas de destino y Crear bloques de formulario personalizados. |
Texto span
Para aplicar estilos específicos a bloques de texto sin código personalizado, resalta el texto que quieras estilizar y selecciona Ajustar con span para estilo.
Ajusta las propiedades del span para actualizar el estilo de tu texto, que incluye:
- Familia, peso y tamaño de fuente
- Altura de línea
- Espaciado entre letras
- Alineación y color del texto
- Relleno del bloque
Puedes usar estos bloques para crear un formulario que vincule los datos enviados por los usuarios a su perfil en Braze. Ten en cuenta que, si usas bloques de formulario, también necesitarás crear una página de destino adicional para el estado de confirmación.
Puedes dividir un formulario largo en varios pasos, cada uno con sus propios campos y un paso de confirmación integrado, usando un formulario de varios pasos en lugar de colocar bloques de formulario directamente en una fila.
| Tipo de bloque | Descripción |
|---|---|
| Captura de correo electrónico | Un campo de formulario para direcciones de correo electrónico. Al enviarlo, la dirección de correo electrónico se añade al perfil de ese usuario en Braze. |
| Captura de teléfono | Un campo de formulario para números de teléfono. Al enviarlo, el usuario se suscribe a tu grupo de suscripción de SMS o WhatsApp. |
| Campo de entrada | Un campo de formulario que admite atributos estándar (como nombre y apellido) o una cadena de atributo personalizado de tu elección. |
| Menú desplegable | Los usuarios pueden seleccionar un elemento de una lista predefinida. Puedes añadir cualquier cadena de atributo personalizado a la lista. |
| Casilla de verificación | Si un usuario marca la casilla, el atributo del bloque se establece en true. Si se deja sin marcar, su atributo se establece en false. |
| Grupo de casillas de verificación | Los usuarios pueden seleccionar entre múltiples opciones presentadas. Los valores se establecen o se añaden a un atributo personalizado de tipo array definido. |
| Gestionar suscripciones | Una lista de verificación de grupos de suscripción de correo electrónico, SMS o WhatsApp. Los usuarios seleccionan a qué grupos quieren unirse cuando envían el formulario. Cada bloque es para un canal. Para más información, consulta Bloque Gestionar suscripciones. |
Después de crear una página de destino con un formulario, asegúrate de insertar su etiqueta de Liquid de página de destino en tu mensaje. Con esta etiqueta, Braze puede identificar y actualizar automáticamente los perfiles de usuario existentes cuando envían el formulario.
Estilos del contenedor de página
Puedes establecer estilos que se apliquen a todos los bloques de componentes relevantes en tu página de destino desde la pestaña Contenedor de página. Estos estilos se aplican en toda tu página excepto donde los sustituyas con un bloque específico.
Te recomendamos configurar los estilos a nivel de contenedor de página antes de personalizar los estilos a nivel de bloque. También puedes añadir una imagen de fondo para toda la página.
Adaptable a los dispositivos del usuario
Puedes hacer que tu página de destino sea adaptable al tamaño del dispositivo del usuario apilando columnas verticalmente en pantallas más pequeñas. Para habilitar esto, añade una columna a la fila que quieras hacer adaptable y activa Apilar verticalmente en pantallas más pequeñas en la sección Personalizar columnas.
Cuando está habilitado, también puedes invertir el orden de apilamiento de columnas para controlar el orden vertical del contenido multicolumna en pantallas más pequeñas. Esto hace que las páginas se vean y funcionen mejor en dispositivos móviles sin código personalizado.
Ocultar filas y bloques por dispositivo
Puedes ocultar una fila o bloque en escritorio o en tableta y dispositivos móviles. Selecciona la fila o el bloque en el canvas. En el panel de propiedades, selecciona Ocultar en y luego selecciona Escritorio o Tableta y dispositivos más pequeños.
Una fila o bloque oculto no aparece para ese tipo de dispositivo en la vista previa del editor de arrastrar y soltar ni en la página de destino publicada.
Campos opcionales y obligatorios
Puedes elegir si ciertos campos de formulario son obligatorios u opcionales. Los campos obligatorios deben completarse antes de que se pueda enviar el formulario. Los campos opcionales pueden dejarse en blanco o sin seleccionar por el usuario.
Los botones de opción siempre son obligatorios y no se pueden establecer como opcionales. Si necesitas un campo de selección única opcional, considera usar un menú desplegable en su lugar.
Por ejemplo, para exigir la captura de consentimiento antes del envío del formulario, puedes activar Campo de entrada obligatorio para establecer una casilla de verificación como obligatoria con el texto de aviso legal apropiado.
Paso 4: Crea una página de confirmación (opcional)
Si tu página de destino no incluye un formulario, continúa con el siguiente paso.
Si tu formulario usa un formulario de varios pasos, omite este paso. Los formularios de varios pasos incluyen un paso de confirmación integrado y bloqueado, por lo que no necesitas una página de confirmación separada.
Si tu página de destino incluye un formulario, puedes crear opcionalmente una segunda página de destino que sirva como experiencia de confirmación. Esta página debería agradecer a los usuarios o proporcionar un siguiente paso después del envío del formulario.
- Selecciona el botón Enviar en tu formulario
- Elige si incluir una página de confirmación cuando los usuarios envíen tu formulario
- Usa el comportamiento de clic Abrir URL web para enviar a los usuarios a una página de confirmación
- Usa el comportamiento de clic Ninguno para que los usuarios permanezcan en la página de destino
Si no incluyes una página de confirmación, es posible que los usuarios no sepan que su formulario se envió correctamente. Incluye siempre una experiencia de confirmación para completar el recorrido.
Si tu página de confirmación se abre en una nueva pestaña, un usuario que regrese a la página de destino original y vuelva a enviar con información actualizada puede sobrescribir el envío anterior, lo que resulta en datos inconsistentes.
Paso 5: Previsualiza la página
Puedes previsualizar tu página de destino en la pestaña Vista previa del editor. Después de guardar tu página de destino como borrador, puedes visitar la URL yendo a Páginas de destino y seleccionando Copiar URL junto a tu página de destino.
Compartir un enlace de vista previa
En el editor, también puedes seleccionar Copiar enlace de vista previa para compartir la página con revisores que no tienen acceso al panel.
- Si tu página de destino no usa Liquid, este enlace es el mismo que la URL directa de Copiar URL, abierta en modo de vista previa.
- Si tu página de destino usa Liquid y tienes la autorización de Landing Pages Pro, el enlace renderiza la página en vivo bajo demanda y refleja tus cambios actuales en lugar de una instantánea del momento en que generaste el enlace. El contenido se personaliza por usuario. La vista previa muestra el favicon de Braze y no se puede cambiar.
- Si añades Liquid a una página de destino sin el nivel Pro, las etiquetas de Liquid no se evalúan y aparecen como texto sin formato para los visitantes en la página publicada.
Para enlaces de vista previa en otros canales, consulta Vista previa compartible.
Paso 6: Publica
Antes de publicar, asegúrate de que:
- No has excedido el límite de páginas de destino publicadas de tu plan
- Cada página basada en formulario enlaza a una página de confirmación usando la acción Abrir URL web, o usa un formulario de varios pasos con su paso de confirmación integrado
- Todos los campos obligatorios de la página (como la ruta de URL y el título) están completos
Cuando estés listo, selecciona Publicar página de destino.
Los bloqueadores de ventanas emergentes agresivos y los bloqueadores de anuncios en iOS y en Safari (incluidos los controles integrados de Safari y las extensiones de terceros) pueden afectar negativamente el comportamiento de las páginas de destino cuando un botón Enviar de formulario también abre otra URL, ya sea que esa URL se abra en la misma pestaña o en una nueva pestaña.
Uso de plantillas
Las plantillas de páginas de destino son puntos de partida de diseño reutilizables que te ayudan a crear páginas de destino más rápido. Una plantilla no tiene URL pública y los clientes no pueden visitarla. Para crear una página de destino en vivo a partir de una plantilla, selecciona la plantilla al crear una nueva página de destino, personalízala según sea necesario y luego publícala.
Puedes acceder a las plantillas y gestionarlas tanto en el editor de páginas de destino como desde la página Landing Page Templates (Content > Landing Page). Las plantillas de páginas de destino requieren un nombre y una descripción opcional.
Gestionar plantillas
Puedes previsualizar, archivar o editar plantillas de páginas de destino. Puedes duplicar tus propias plantillas de páginas de destino (ubicadas en Tus plantillas), pero no las plantillas de Braze. Al editar una página de destino, puedes guardar tu página de destino como plantilla, hacer cambios en la plantilla o eliminar el contenido de la página de destino.
Ver análisis
Para analizar la efectividad de tu página de destino, ve a Mensajería > Páginas de destino y selecciona una página de destino que hayas publicado. Aquí puedes hacer seguimiento del número de visualizaciones de página, clics en la página, envíos de formulario y las tasas de envío de tu página de destino.
Gestionar errores de envío de formulario
Si un usuario intenta enviar un formulario con datos faltantes o no compatibles, verá un mensaje de error genérico y no podrá enviarlo.
Causas comunes:
- Los campos obligatorios se dejan en blanco
- Se usan caracteres especiales en los campos de texto
- Una casilla de verificación obligatoria no está seleccionada
Los mensajes de error que se muestran a los usuarios no se pueden personalizar. Previsualiza tu página de inicio para confirmar el comportamiento de los campos antes de publicar.