Crear un mensaje dentro de la aplicación con arrastrar y soltar

El editor de arrastrar y soltar es la forma recomendada de crear la mayoría de los mensajes dentro de la aplicación. Crea mensajes modales y de pantalla completa con los mismos diseños básicos que el editor tradicional, además de más personalización mediante filas, Content Blocks, plantillas y flujos de varias páginas. Para conocer los bloques de construcción del editor, consulta Bloques de editor.

Si quieres usar tus plantillas HTML personalizadas existentes o plantillas creadas por terceros, deben recrearse en el editor de arrastrar y soltar.

¿No tienes claro si tu mensaje dentro de la aplicación debe enviarse con una Campaign o un Canvas? Las Campaigns son mejores para mensajes únicos y dirigidos, mientras que los Canvas son mejores para recorridos de usuario de varios pasos. Después de seleccionar dónde construir tu mensaje, sigue estos pasos para crear un mensaje dentro de la aplicación con arrastrar y soltar.

Requisitos previos

Requisitos del SDK

Requisitos previos adicionales

• Para el SDK web, la opción de inicialización allowUserSuppliedJavascript debe estar configurada en true. La opción enableHtmlInAppMessages también permite que estos mensajes funcionen, pero está obsoleta y debe sustituirse por allowUserSuppliedJavascript.
• Si usas Google Tag Manager, debes habilitar “Allow HTML In-App Messages” en la configuración de GTM.

Paso 1: Crear un mensaje dentro de la aplicación

Crea un nuevo mensaje dentro de la aplicación o un paso en Canvas y, a continuación, selecciona Editor de arrastrar y soltar como tu experiencia de edición.

Paso 2: Selecciona tu plantilla

Después de seleccionar el editor de arrastrar y soltar como tu experiencia de edición, puedes elegir entre:

• Empezar con una plantilla modal en blanco
• Usar una plantilla de mensaje dentro de la aplicación de arrastrar y soltar de Braze
• Seleccionar una plantilla guardada de mensaje dentro de la aplicación de arrastrar y soltar

Selecciona Crear mensaje para empezar a diseñar tu mensaje dentro de la aplicación en el editor de arrastrar y soltar.

También puedes acceder a todas las plantillas desde la sección Plantillas del panel.

Paso 3: Agregar páginas adicionales (opcional)

Agregar páginas a tu mensaje dentro de la aplicación te permite guiar a los usuarios a través de un flujo secuencial, como un flujo de incorporación o un recorrido de bienvenida. Puedes administrar las páginas desde la sección Pages de la pestaña Build.

• agregar páginas
• eliminar o renombrar páginas

Los mensajes dentro de la aplicación comienzan con una página de forma predeterminada. Para agregar una nueva página:

1. Selecciona + Add page.
2. Selecciona de la lista de plantillas personalizadas o proporcionadas por Braze.
3. Dale a la página un nombre significativo. Esto te ayudará cuando conectes las páginas entre sí.

Consejo

Puedes agregar hasta 10 páginas por mensaje dentro de la aplicación.

Para duplicar una página existente:

1. Pasa el cursor sobre la página en la lista y selecciona More options.
2. Selecciona Duplicate.
3. Dale a la página un nombre significativo. Esto te ayudará cuando conectes las páginas entre sí.

Para eliminar o renombrar una página:

1. Pasa el cursor sobre la página en la lista y selecciona More options.
2. Selecciona Rename o Delete.

Paso 3a: Conectar páginas entre sí

Los mensajes dentro de la aplicación de varias páginas son secuenciales, lo que significa que los usuarios interactúan con el mensaje tocando o haciendo clic para pasar a la siguiente página del flujo.

Para conectar páginas entre sí:

1. Selecciona tu página de inicio.
2. Selecciona un elemento de botón o imagen en el canvas.
3. Establece On-click behavior en Go to page.
4. Selecciona la página a la que quieres enlazar desde la página de inicio.
5. Continúa hasta que todas las páginas estén enlazadas.

Si una página no está enlazada a ninguna otra página, el mensaje no puede lanzarse.

Nota

Los usuarios pueden seleccionar el botón de cierre X para salir del mensaje en cualquier momento. Este botón no puede eliminarse.

Paso 4: Crea y diseña tu mensaje dentro de la aplicación

Aquí es donde tu mensaje desfila por la pasarela, vestido con el estilo característico de tu marca. Con una combinación de bloques de editor y configuración de estilo, puedes personalizar y diseñar tu mensaje dentro de la aplicación.

• Para ver una lista de los bloques de editor disponibles y sus propiedades, consulta Bloques de editor.
• Si necesitas ayuda para personalizar la apariencia de tu mensaje, consulta Configuración de estilo.
• Para conocer las mejores prácticas al crear mensajes de derecha a izquierda, consulta Crear mensajes de derecha a izquierda.

Paso 5: Prueba tu mensaje dentro de la aplicación

La sección Vista previa y prueba te permite previsualizar tus mensajes dentro de la aplicación en distintos dispositivos y enviar un mensaje de prueba a tu dispositivo. Aquí puedes asegurarte de que los detalles estén alineados en todas tus plataformas para tu campaña de mensajes dentro de la aplicación de arrastrar y soltar.

Es importante que siempre pruebes tus mensajes dentro de la aplicación antes de enviar tus campañas, para ayudarte a visualizar cómo se verá tu mensaje final desde la perspectiva de tu usuario.

Previsualizar el mensaje como usuario

Advertencia

Para enviar una prueba a grupos de prueba de contenido o a usuarios individuales, debes habilitar push en tus dispositivos de prueba antes del envío.

Puedes previsualizar mensajes desde la pestaña Vista previa y prueba como si fueras un usuario. Puedes seleccionar un usuario específico, un usuario aleatorio o crear un usuario personalizado:

• Usuario aleatorio: Braze seleccionará aleatoriamente un usuario de la base de datos y previsualizará el mensaje dentro de la aplicación en función de sus atributos o de su información de eventos.
• Seleccionar usuario: Puedes seleccionar un usuario específico según su dirección de correo electrónico o su external_id. El mensaje dentro de la aplicación se previsualizará en función de los atributos y la información de eventos de ese usuario.
• Usuario personalizado: Puedes personalizar un usuario. Braze ofrecerá campos de entrada para todos los atributos y eventos disponibles. Introduce cualquier información que quieras ver en la vista previa.

Lista de comprobación de pruebas

Ten en cuenta las siguientes preguntas mientras pruebas tu mensaje dentro de la aplicación:

• ¿Probaste el mensaje en distintos dispositivos?
• ¿Las imágenes y los archivos multimedia se muestran y se comportan como esperas?
• ¿Liquid funciona como esperas? ¿Tuviste en cuenta un valor de atributo predeterminado en caso de que Liquid no devuelva información?
• ¿Tu texto es claro, conciso y correcto?
• ¿Tus botones dirigen al usuario a donde debe ir?

Preguntas frecuentes

¿Por qué no aparecen los clics en el cuerpo en mi página de análisis?

Los clics en el cuerpo no se recopilan automáticamente para los mensajes dentro de la aplicación creados con el editor de arrastrar y soltar. Para más detalles, consulta los registros de cambios del SDK para iOS y Android.

¿Puedo segmentar en función de los clics en botones?

Sí, puedes segmentar en función de los clics en botones para un máximo de dos botones en tu mensaje. Para ello, establece el Identificador para informes de tus botones en “0” y “1”, que corresponderán respectivamente a los filtros de segmentación “Hizo clic en el botón 1 del mensaje dentro de la aplicación” y “Hizo clic en el botón 2 del mensaje dentro de la aplicación”.

¿Puedo personalizar mi mensaje dentro de la aplicación con HTML o JavaScript personalizados, o transferir mensajes HTML existentes al editor?

No puedes transferir directamente mensajes HTML existentes al editor, pero puedes insertar HTML, CSS y JavaScript sin procesar en un bloque de Código personalizado. Puedes usar los bloques de Código personalizado para insertar videos de terceros y Liquid avanzado, como contenido conectado o declaraciones condicionales. Para ver los métodos JavaScript de brazeBridge y ejemplos de seguimiento de clics, consulta Mensajes dentro de la aplicación con HTML personalizado.

¿Por qué la vista del creador del editor de arrastrar y soltar puede verse diferente del mensaje final?

El editor de arrastrar y soltar muestra tu mensaje dentro de un creador y aplica estilos y valores predeterminados exclusivos de la vista previa para que puedas construir y revisar el diseño. Estos tratamientos te ayudan a ver la estructura y el contenido de marcador de posición mientras editas, pero no se incluyen en el mensaje que reciben tus usuarios.

Algunos ejemplos comunes de comportamiento exclusivo del editor son:

• El editor envuelve los bloques de Código personalizado en un contenedor bz-html-code-block con un min-height predeterminado de 40px, para que los bloques vacíos o cortos sigan visibles mientras editas
• Las imágenes en blanco o que contienen Liquid muestran un marcador de posición en el editor
• Los grupos de casillas de verificación y los botones de opción preseleccionan la primera opción para que puedas previsualizar el estado activo

Si algo se ve diferente solo en el editor, normalmente se trata del comportamiento de la vista previa. Cuando soluciones problemas del mensaje entregado, revisa los estilos y el marcado de los bloques de tu mensaje, no el marco exclusivo del editor ni los valores predeterminados de la vista previa.

¿Cómo puedo crear un mensaje dentro de la aplicación de deslizamiento hacia arriba?

Actualmente, el editor se limita únicamente a mensajes modales y a pantalla completa. Puedes cambiar entre tipos de visualización en la sección Contenedor de mensajes del panel Estilos de mensaje.

¿Puedo guardar mi mensaje dentro de la aplicación como plantilla después de crearlo en mi campaña o Canvas?

Sí. Para cualquier mensaje dentro de la aplicación que quieras reutilizar en una futura campaña o paso en Canvas, puedes guardarlo como plantilla personalizada con el botón Guardar como plantilla, disponible después de salir del editor. Antes de poder guardarlo como plantilla, primero debes lanzar la campaña O guardarla como borrador.

También puedes crear y guardar plantillas de mensajes dentro de la aplicación en Contenido > Mensaje dentro de la aplicación.

¿Por qué mi sintaxis de Liquid aparece como texto sin formato en mi mensaje dentro de la aplicación paginado?

Si ves que la sintaxis de Liquid aparece como texto sin formato al probar un mensaje dentro de la aplicación paginado (en lugar del contenido personalizado), puede haber un error de sintaxis de Liquid en una de las páginas. Si hay un error de sintaxis en una página, afecta a la representación de Liquid en todas las páginas del mensaje, ya que las páginas no son independientes.

Para solucionar el problema:

1. Revisa todas las páginas de tu mensaje en busca de errores de sintaxis de Liquid. Que la vista previa falle en una página no significa que el error esté en esa página: como las páginas no son independientes, el error de sintaxis puede estar en cualquier parte del mensaje.
2. Verifica que todas las etiquetas de Liquid estén bien cerradas y tengan el formato correcto.