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

Con el editor de arrastrar y soltar, puedes crear mensajes dentro de la aplicación completamente personalizados en Campaigns o Canvas usando la experiencia de edición de arrastrar y soltar. Para más información sobre los bloques de construcción disponibles en el 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 usando una Campaign o un Canvas? Las Campaigns son mejores para envíos de mensajería ú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, veamos los 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 configurarse como true. La opción enableHtmlInAppMessages también permitirá que estos mensajes funcionen, pero está obsoleta y debe actualizarse a allowUserSuppliedJavascript.
• Si usas Google Tag Administrador, debes habilitar “Allow HTML In-App Messages” en la configuración de GTM.

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

Crea un nuevo mensaje dentro de la aplicación o paso en Canvas, luego 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:

• 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: Construye y diseña tu mensaje dentro de la aplicación

Aquí es donde tu mensaje se luce en la pasarela, vestido con el estilo distintivo de tu marca. Usando 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.
• Para obtener ayuda con la personalización de la apariencia de tu mensaje, consulta Configuración de estilo.
• Para conocer las mejores prácticas para 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 diferentes 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 mensaje dentro de la aplicación de arrastrar y soltar.

Es importante probar siempre 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 del usuario.

Previsualizar el mensaje como un usuario

Advertencia

Para enviar una prueba a grupos de prueba de contenido o a usuarios individuales, las notificaciones push deben estar habilitadas en tus dispositivos de prueba antes de enviar.

Puedes previsualizar los 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 basándose en sus atributos o información de eventos.
• Seleccionar usuario: Puedes seleccionar un usuario específico por su dirección de correo electrónico o external_id. El mensaje dentro de la aplicación se previsualizará basándose en los atributos e 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 te gustaría ver en la vista previa del correo electrónico.

Lista de verificación de pruebas

Considera las siguientes preguntas mientras pruebas tu mensaje dentro de la aplicación:

• ¿Has probado el mensaje en diferentes dispositivos?
• ¿Las imágenes y los medios se muestran y se comportan como se espera?
• ¿Liquid funciona como se espera? ¿Has previsto 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 deben ir?

Preguntas frecuentes

¿Por qué los clics en el cuerpo no aparecen 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 obtener más detalles, consulta los registros de cambios del SDK para iOS y Android.

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

Sí, puedes segmentar en función de los clics en los botones para un máximo de dos botones en tu mensaje. Para ello, establece el Identifier for Reporting de tus botones en “0” y “1”, que se corresponderán con los filtros de segmentación “Clicked in-app message button 1” y “Clicked in-app message button 2” respectivamente.

¿Puedo personalizar mi mensaje dentro de la aplicación utilizando HTML personalizado o JavaScript, 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 bloques de Código personalizado para incrustar videos de terceros y Liquid avanzado, como contenido conectado o sentencias condicionales. Para 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 renderiza tu mensaje dentro de un creador y aplica estilos y valores predeterminados solo de 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; no se incluyen en el mensaje que reciben tus usuarios.

Ejemplos comunes de comportamiento exclusivo del editor incluyen:

• 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 siendo visibles mientras editas
• Las imágenes que están en blanco o contienen Liquid muestran un marcador de posición en el editor
• Los grupos de casillas de verificación y los botones de radio preseleccionan la primera opción para que puedas previsualizar el estado activo

Si algo se ve diferente solo en el editor, generalmente se trata de un comportamiento de vista previa. Al solucionar problemas del mensaje entregado, revisa los estilos y el marcado en tus bloques de mensaje, no el marco del editor ni los valores predeterminados de vista previa.

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

Actualmente, el editor está limitado solo a mensajes de tipo modal y pantalla completa. Puedes alternar entre tipos de visualización en la sección Contenedor de mensaje del panel Estilos de mensaje.

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

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

También puedes crear y guardar plantillas de mensajes dentro de la aplicación navegando a Contenido > In-App Message.

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

Si ves que la sintaxis de Liquid aparece como texto plano 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 la renderización de Liquid en todas las páginas del mensaje: las páginas no son independientes.

Para solucionar problemas:

1. Revisa cada página de tu mensaje en busca de errores de sintaxis de Liquid. Una vista previa rota en una página no significa que el error esté en esa página, ya que las páginas no son independientes y el error de sintaxis puede estar en cualquier parte del mensaje.
2. Verifica que todas las etiquetas de Liquid estén correctamente cerradas y formateadas.