Mensajes dentro de la aplicación con HTML personalizado

Aunque nuestros mensajes dentro de la aplicación estándar se pueden personalizar de diversas formas, puedes obtener un control aún mayor sobre la apariencia de tus campañas utilizando mensajes diseñados y creados con HTML, CSS y JavaScript. Con una composición sencilla, puedes desbloquear funcionalidades y branding personalizados que se adapten a cualquiera de tus necesidades.

Este tipo de mensaje está disponible en el editor tradicional.

Cómo funciona

Los mensajes dentro de la aplicación con HTML permiten un mayor control sobre la apariencia de un mensaje, incluyendo lo siguiente:

• Fuentes y estilos personalizados
• Videos
• Múltiples imágenes
• Comportamientos al hacer clic
• Componentes interactivos
• Animaciones personalizadas

Los mensajes HTML personalizados pueden utilizar los métodos del puente JavaScript para registrar eventos, establecer atributos personalizados, cerrar el mensaje y más. Consulta nuestro repositorio de GitHub que contiene instrucciones detalladas sobre cómo usar y personalizar los mensajes dentro de la aplicación con HTML para tus necesidades, y un conjunto de plantillas de mensajes dentro de la aplicación HTML5 para ayudarte a empezar.

Nota

Para habilitar los mensajes dentro de la aplicación con HTML a través del SDK web, debes proporcionar la opción de inicialización allowUserSuppliedJavascript a Braze: por ejemplo, braze.initialize('YOUR-API_KEY', {allowUserSuppliedJavascript: true}). Esto es por razones de seguridad, ya que los mensajes dentro de la aplicación con HTML pueden ejecutar JavaScript, por lo que requerimos que un administrador del sitio los habilite.

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.

Importante

Braze recommends that you use the global brazeBridge variable. The global appboyBridge variable is deprecated but will continue to function for existing users. If you are using appboyBridge, we suggest you migrate to brazeBridge.

appboyBridge was deprecated in the following SDK versions:

• Web: 3.3.0+
• Android: 14.0.0+
• iOS: 4.2.0+

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:

Nota

You cannot reference Liquid to insert customAttributes into JavaScript Bridge methods.

Button click tracking

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

Nota

Banners: Only brazeBridge.logClick() (without arguments) is supported. Button IDs and custom button tracking are supported for in-app messages only.

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').

Consejo

When using JavaScript methods inside an onclick attribute, wrap string values in single quotes to avoid conflicts with the double-quoted HTML attribute.

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 del JavaScript personalizado, los SDK de Braze también pueden enviar datos de análisis con estos atajos de URL convenientes. Ten 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)

Advertencia

El uso de abButtonID no es compatible con los tipos de mensaje HTML con vista previa. Para más información, consulta nuestra guía de actualización.

Para registrar clics en botones para el análisis de mensajes dentro de la aplicación, puedes añadir abButtonId como parámetro de consulta a cualquier vínculo profundo, URL de redirección o elemento ancla <a>. Usa ?abButtonId=0 para registrar un clic en “Button 1” y ?abButtonId=1 para registrar un clic en “Button 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 parámetros posteriores deben separarse con un ampersand &.

Ejemplos de URL

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

Nota

Los mensajes dentro de la aplicación solo admiten clics en Button 1 y Button 2. Las URL que no especifiquen uno de estos dos ID de botón se registrarán como “clics en el cuerpo” genéricos.

Abrir enlace en nueva ventana (solo móvil)

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

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

Abrir como vínculo profundo (solo móvil)

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

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

Cerrar mensaje dentro de la aplicación

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

Por ejemplo, <a onclick="brazeBridge.closeMessage()" href="#">Cerrar</a> cerrará el mensaje dentro de la aplicación.

Carga de HTML con vista previa

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

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

Consejo

Los métodos JavaScript de brazeBridge que uses en tu HTML no actualizarán los perfiles de usuario mientras previsualizas en el dashboard.

Requisitos del SDK

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

Advertencia

Dado que este tipo de mensaje solo puede ser recibido por ciertas versiones posteriores del SDK, los usuarios que estén en versiones del SDK no compatibles no recibirán el mensaje. Considera adoptar este tipo de mensaje después de que una parte significativa de tu base de usuarios sea alcanzable, o dirige el mensaje solo a aquellos usuarios cuya versión de la aplicación sea posterior a los requisitos. Más información sobre filtrar por la versión más reciente de la aplicación.

Crear una campaña

Los usuarios de tu aplicación móvil necesitan actualizar a las versiones del SDK compatibles para recibir un mensaje dentro de la aplicación de código personalizado. Te recomendamos que animes 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 dentro de la aplicación de código personalizado con carga de HTML, puedes subir activos de la campaña a la biblioteca de medios para hacer referencia a ellos en tu mensaje.

Los siguientes tipos de archivo son compatibles para la carga:

Braze recomienda subir activos a la biblioteca de medios por dos razones:

1. Los activos añadidos a una campaña a través de la biblioteca de medios permiten que tus mensajes se muestren incluso cuando el usuario está sin conexión o tiene una conexión a internet deficiente.
2. Los activos subidos a Braze se pueden reutilizar en distintas campañas.

Añadir archivos de activos

Puedes añadir activos nuevos o existentes a tu campaña.

Para añadir nuevos activos a tu campaña, usa la sección de arrastrar y soltar para cargar un archivo. Los activos añadidos en esta sección también se agregarán automáticamente a la biblioteca de medios. Para añadir activos que ya hayas subido a la biblioteca de medios, selecciona Add from Media Library.

Una vez añadidos tus activos, aparecerán en la sección Assets for this campaign.

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

De lo contrario, pasa el cursor sobre un activo de la lista y selecciona Copy para copiar la URL del archivo a tu portapapeles. Luego pega la URL del activo copiada en tu HTML como lo harías normalmente al hacer referencia a un activo remoto.

Editor HTML

Los cambios que realices en el HTML se renderizan automáticamente en el panel de vista previa a medida que escribes. Los métodos JavaScript de brazeBridge que uses en tu HTML no actualizarán los perfiles de usuario mientras previsualizas en el dashboard.

Consejo

Puedes seleccionar Search dentro del editor HTML para buscar en tu código.

Seguimiento de botones

Puedes hacer seguimiento del rendimiento dentro de tu mensaje dentro de la aplicación de código personalizado usando el método JavaScript brazeBridge.logClick(button_id). Esto te permite hacer seguimiento programático de “Button 1”, “Button 2” y “Body Clicks” usando brazeBridge.logClick('0'), brazeBridge.logClick('1') o brazeBridge.logClick(), respectivamente.

Nota

Este método de seguimiento de botones reemplaza los métodos anteriores de seguimiento automático de clics (como ?abButtonId=0), que han sido eliminados.

Cambios incompatibles con versiones anteriores

1. El cambio incompatible más notable con este nuevo tipo de mensaje son los requisitos del SDK. Los usuarios cuyo SDK de la aplicación no cumpla con los requisitos mínimos de versión del SDK no verán el mensaje.
2. El vínculo profundo braze://close, que anteriormente era compatible con aplicaciones móviles, ha sido eliminado en favor del JavaScript brazeBridge.closeMessage(). Esto permite mensajes HTML multiplataforma, ya que la web no admite vínculos profundos.

3. El seguimiento automático de clics, que usaba ?abButtonId=0 para los ID de botón, y el seguimiento de “clic en el cuerpo” en los botones de cierre han sido eliminados. Los siguientes ejemplos de código muestran cómo cambiar tu HTML para usar nuestros nuevos métodos JavaScript de seguimiento de clics:

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