Mensajes HTML personalizados en la aplicación

Aunque nuestros mensajes estándar para aplicaciones se pueden personalizar de varias formas, puedes obtener un control aún mayor sobre el aspecto de tus campañas utilizando mensajes diseñados y creados con HTML, CSS y JavaScript. Con una simple composición, puedes desbloquear funcionalidades y marcas personalizadas que se ajusten a cualquiera de tus necesidades.

Los mensajes HTML in-app permiten un mayor control sobre el aspecto de un mensaje, incluyendo lo siguiente:

• Fuentes y estilos personalizados
• Vídeos
• Varias imágenes
• Comportamientos al hacer clic
• Componentes interactivos
• Animaciones personalizadas

Los mensajes HTML personalizados pueden utilizar los métodos de JavaScript Bridge para registrar eventos, establecer atributos personalizados, cerrar el mensaje y mucho más. Echa un vistazo a nuestro repositorio de GitHub, que contiene instrucciones detalladas sobre cómo utilizar y personalizar los mensajes HTML in-app para tus necesidades, y para un conjunto de plantillas de mensajes HTML5 in-app que te ayudarán a empezar.

Puente JavaScript

Los mensajes HTML in-app para Web, Android, iOS y Swift SDK admiten un “puente” JavaScript para interactuar con Braze SDK, lo que le permite desencadenar acciones Braze personalizadas cuando los usuarios hacen clic en elementos con enlaces o interactúan de otro modo con su contenido. Estos métodos existen con la variable global brazeBridge o appboyBridge.

Por ejemplo, para registrar un atributo personalizado y un evento personalizado y, a continuación, cerrar el mensaje, podría utilizar el siguiente JavaScript dentro de su mensaje HTML in-app:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<button id="button">Set Favorite Color</button>
<script>
// Wait for the `brazeBridge` ready event, "ab.BridgeReady"
window.addEventListener("ab.BridgeReady", function(){
  // Event handler when the button is clicked
  document.querySelector("#button").onclick = function(){
    // Track Button 1 clicks for analytics
    // Note: This requires Android SDK v8.0.0, Web SDK v2.5.0, Swift SDK v5.4.0, and iOS SDK v3.23.0
    brazeBridge.logClick("0");
    // Set the user's custom attribute
    brazeBridge.getUser().setCustomUserAttribute("favorite color", "blue");
    // Track a custom event
    brazeBridge.logCustomEvent("completed survey");
    // Send the enqueued data to Braze
    brazeBridge.requestImmediateDataFlush();
    // Close this in-app message
    brazeBridge.closeMessage();
  };
}, false);
</script>

Métodos puente de JavaScript

Los siguientes métodos de JavaScript son compatibles con los mensajes HTML dentro de la aplicación Braze:

Acciones basadas en enlaces

Además de JavaScript personalizado, los SDK de Braze también pueden enviar datos de análisis con estos cómodos atajos de URL. Tenga en cuenta que estos parámetros de consulta y esquemas de URL distinguen entre mayúsculas y minúsculas.

Seguimiento de clics en botones (obsoleto)

Para registrar los clics en los botones para el análisis de mensajes dentro de la aplicación, puede añadir abButtonId como parámetro de consulta a cualquier enlace profundo, URL de redirección o elemento de anclaje <a>. Utilice ?abButtonId=0 para registrar un clic en el “Botón 1” y ?abButtonId=1 para registrar un clic en el “Botón 2”.

Al igual que con otros parámetros de URL, el primer parámetro debe comenzar con un signo de interrogación ?, mientras que los siguientes deben ir separados por un ampersand &.

Ejemplos de URL

• https://example.com/?abButtonId=0 - Botón 1 clic
• https://example.com/?abButtonId=1 - Clic en el botón 2
• https://example.com/?utm_source=braze&abButtonId=0 - Botón 1 clic con otros parámetros URL existentes
• myApp://deep-link?page=home&abButtonId=1 - Vínculo profundo móvil con clic en el botón 2
• <a href="https://example.com/?abButtonId=1"> - Elemento de anclaje <a> con clic en el botón 2

Abrir enlace en una ventana nueva (sólo para móviles)

Para abrir enlaces fuera de su aplicación en una nueva ventana, configure ?abExternalOpen=true. El mensaje se descartará antes de abrir el enlace.

Para la vinculación en profundidad, Braze abrirá tu URL independientemente del valor de abExternalOpen.

Abrir como enlace profundo (sólo para móviles)

Para que Braze gestione tu enlace HTTP o HTTPS como un vínculo profundo, configura ?abDeepLink=true.

Cuando este parámetro de cadena de consulta está ausente o establecido en false, Braze intentará abrir el enlace web en un navegador web interno dentro de la aplicación host.

Cerrar mensaje in-app

Para cerrar un mensaje dentro de la aplicación, puedes utilizar el método javascript brazeBridge.closeMessage().

Por ejemplo, <a onclick="brazeBridge.closeMessage()" href="#">Close</a> cerrará el mensaje in-app.

Carga HTML con vista previa

Al crear mensajes HTML personalizados dentro de la aplicación, puedes previsualizar tu contenido interactivo directamente en Braze.

El panel de vista previa de mensajes del editor muestra una vista previa realista que representa el JavaScript incluido en su mensaje. Puedes previsualizar e interactuar con tus mensajes personalizados desde el panel de previsualización haciendo clic en la paginación, enviando formularios o encuestas, viendo animaciones JavaScript, ¡y mucho más!

Requisitos del SDK

Para utilizar la vista previa HTML para mensajes dentro de la aplicación, debe actualizar a las siguientes versiones mínimas del SDK de Braze:

Crear una campaña

Al crear un mensaje de código personalizado dentro de la aplicación, elija Carga HTML con vista previa como tipo personalizado. Si no has creado previamente mensajes con código personalizado dentro de la aplicación (en directo o borradores), esta opción se aplica automáticamente y no tendrás que hacer ninguna selección.

Tenga en cuenta que los usuarios de su aplicación móvil deben actualizarse a las versiones del SDK compatibles para recibir este mensaje. Le recomendamos que anime a los usuarios a actualizar sus aplicaciones móviles antes de lanzar campañas que dependan de versiones más recientes del SDK de Braze.

Archivos de activos

Al crear mensajes in-app de código personalizado con carga HTML, puedes cargar activos de campaña a la biblioteca multimedia para hacer referencia a ellos en tu mensaje.

Se pueden cargar los siguientes tipos de archivos:

Braze recomienda subir activos a la biblioteca multimedia por dos razones:

1. Los elementos añadidos a una campaña a través de la mediateca permiten que sus mensajes se muestren incluso cuando el usuario está desconectado o tiene una mala conexión a Internet.
2. Los activos cargados en Braze pueden reutilizarse en todas las campañas.

Añadir archivos de activos

Puede añadir activos nuevos o existentes a su campaña.

Para añadir nuevos activos a su campaña, utilice la sección de arrastrar y soltar para cargar un archivo. Los activos añadidos en esta sección también se añadirán automáticamente a la mediateca. Para añadir activos que ya hayas subido a la biblioteca multimedia, selecciona Añadir desde biblioteca multimedia.

Una vez añadidos sus activos, aparecerán en la sección Activos para esta campaña.

Si el nombre de archivo de un activo coincide con el de un activo HTML local, se sustituirá automáticamente (por ejemplo, se carga cat.png y existe <img src="cat.png" /> ).

Si lo prefiere, pase el ratón por encima de un archivo de la lista y seleccione Copiar para copiar la URL del archivo en el portapapeles. A continuación, pegue la URL del activo copiado en su HTML como haría normalmente al hacer referencia a un activo remoto.

Editor HTML

Los cambios que realice en el HTML se mostrarán automáticamente en el panel de vista previa a medida que escriba. Cualquier método JavaScript debrazeBridge que utilice en su HTML no actualizará los perfiles de los usuarios durante la vista previa en el panel de control.

Puede configurar los Ajustes del editor para activar el texto envolvente, cambiar el tamaño de la fuente o elegir un tema de color. El editor de código incluye diferentes temas de color para resaltar la sintaxis, lo que te ayuda a detectar posibles errores de código directamente en el compositor de mensajes y a organizar mejor tu código (utilizando espacios o tabuladores, sea cual sea el lado de la discusión en el que te encuentres).

Seguimiento de botones

Puedes hacer un seguimiento del rendimiento dentro de tu mensaje dentro de la aplicación de código personalizado utilizando el método brazeBridge.logClick(button_id) JavaScript. Esto le permite realizar un seguimiento programático de “Botón 1”, “Botón 2” y “Clics en el cuerpo” utilizando brazeBridge.logClick("0"), brazeBridge.logClick("1") o brazeBridge.logClick(), respectivamente.

Puedes hacer un seguimiento de varios clics de botón por impresión. Por ejemplo, para cerrar un mensaje y registrar un clic en el Botón 2, puede utilizar lo siguiente:

1
<a href="#" onclick="brazeBridge.logClick('1');brazeBridge.closeMessage()">✖</a>

También puede hacer un seguimiento de los nuevos nombres de botones personalizados (hasta 100 nombres únicos por campaña). Por ejemplo, brazeBridge.logClick("blue button") o brazeBridge.logClick("viewed carousel page 3").

Limitaciones

• Puedes tener hasta 100 ID de botón únicos por campaña.
• Los identificadores de los botones pueden tener hasta 255 caracteres cada uno.
• Los identificadores de botón sólo pueden incluir letras, números, espacios, guiones y guiones bajos.

Cambios incompatibles con versiones anteriores

1. El cambio incompatible más notable con este nuevo tipo de mensaje son los requisitos del SDK. A los usuarios cuyo SDK de aplicación no cumpla los requisitos mínimos de versión del SDK no se les mostrará el mensaje.
   

2. El vínculo profundo braze://close, que antes era compatible con las aplicaciones móviles, se ha eliminado en favor del brazeBridge.closeMessage() JavaScript. Esto permite mensajes HTML multiplataforma, ya que la Web no admite vínculos profundos.

3. Se han eliminado el seguimiento automático de clics, que utilizaba ?abButtonId=0 para los ID de los botones, y el seguimiento de “clics en el cuerpo” en los botones de cierre. Los siguientes ejemplos de código muestran cómo cambiar su HTML para utilizar nuestros nuevos métodos JavaScript de seguimiento de clics:

   Antes de	Después de
   <a href="">Close Button</a>	<a href="#" onclick="brazeBridge.logClick();brazeBridge.closeMessage()">Close Button</a>
   <a href="">Close Button</a>	<a href="#" onclick="brazeBridge.logClick('0');brazeBridge.closeMessage()">Close Button</a>
   <a href="">Track button 1</a>	<a href="" onclick="brazeBridge.logClick('0')">Track button 1</a>
   <script> location.href = "" </script>	<script> window.addEventListener("ab.BridgeReady", function(){   brazeBridge.logClick("1");   brazeBridge.closeMessage(); }); </script>