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

Custom HTML in-app messages and Banners support a JavaScript “bridge” to interface with the Braze SDK, allowing you to trigger custom Braze actions when users click on elements with links or otherwise engage with your content. These methods exist with the global brazeBridge or appboyBridge variable.

For example, to log a custom attribute and custom event, then close the message, you could use the following JavaScript within your custom HTML:

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 the message
    brazeBridge.closeMessage();
  };
}, false);
</script>

JavaScript Bridge methods

The following JavaScript methods are supported within custom HTML for in-app messages and Banners:

Button click tracking

Use the brazeBridge.logClick(button_id) method to track clicks in your custom HTML.

For in-app messages, you can programmatically track “Button 1”, “Button 2”, and “Body Clicks” using brazeBridge.logClick('0'), brazeBridge.logClick('1'), or brazeBridge.logClick(), respectively.

For in-app messages, you can track multiple button click events per impression. For example, to close a message and log a Button 2 click:

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

You can also track new custom button names—up to 100 unique names per campaign. For example, brazeBridge.logClick('blue button') or brazeBridge.logClick('viewed carousel page 3').

Limitations (in-app messages only)

• You can have up to 100 unique button IDs per campaign.
• Button IDs can have up to 255 characters each.
• Button IDs can only include letters, numbers, spaces, dashes, and underscores.

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

Los usuarios de tu aplicación móvil deben actualizar a las versiones compatibles del SDK para recibir un mensaje dentro de la aplicación de código personalizado. 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 activos añadidos a una campaña a través de la biblioteca multimedia permiten que tus mensajes se muestren incluso cuando el usuario está desconectado o tiene una conexión a Internet deficiente.
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 sustituye automáticamente (por ejemplo,cat.png se carga y<img src="cat.png" /> existe).

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.

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. Para obtener la referencia completa, consulta los métodos de JavaScript Bridge más arriba.

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>