Skip to content

Mensajes HTML dentro de la aplicación

Aprende a añadir la interfaz JavaScript de Braze a tu aplicación, para que puedas utilizar la API de Braze para crear mensajes HTML dentro de la aplicación en tus WebViews personalizadas.

Requisitos previos

Antes de poder utilizar esta característica, tendrás que integrar el SDK de Android Braze.

Acerca de los mensajes HTML

Con la interfaz JavaScript de Braze, puedes aprovechar Braze dentro de las vistas web personalizadas de tu aplicación. El/LaInAppMessageJavascriptInterface es responsable de:

  1. Inyecta el puente JavaScript Braze en tu WebView, tal y como se describe en la Guía del usuario: Mensajes HTML dentro de la aplicación.
  2. Pasar los métodos bridge recibidos de tu WebView al SDK de Braze para Android.

Añadir la interfaz a una WebView

Puedes utilizar la funcionalidad Braze desde una WebView en tu aplicación añadiendo la interfaz JavaScript Braze a tu WebView. Una vez añadida la interfaz, la misma API disponible para la Guía del usuario: Los mensajes HTML dentro de la aplicación estarán disponibles en tu WebView personalizada.

1
2
3
4
5

String javascriptString = BrazeFileUtils.getAssetFileStringContents(context.getAssets(), "braze-html-bridge.js");
myWebView.loadUrl("javascript:" + javascriptString);

final InAppMessageJavascriptInterface javascriptInterface = new InAppMessageJavascriptInterface(context, inAppMessage);
myWebView.addJavascriptInterface(javascriptInterface, "brazeInternalBridge");

1
2
3
4
5

val javascriptString = context.assets.getAssetFileStringContents("braze-html-bridge.js")
myWebView.loadUrl("javascript:" + javascriptString!!)

val javascriptInterface = InAppMessageJavascriptInterface(context, inAppMessage)
myWebView.addJavascriptInterface(javascriptInterface, "brazeInternalBridge")

Incrustar contenido de YouTube

YouTube y otros contenidos HTML5 pueden reproducirse en mensajes HTML dentro de la aplicación. Esto requiere habilitar la aceleración por hardware en la actividad en la que se está mostrando el mensaje dentro de la aplicación; consulta la guía del desarrollador de Android para más detalles. La aceleración por hardware solo está disponible en las versiones 11 y posteriores de la API de Android.

A continuación se muestra un ejemplo de un video de YouTube incrustado en un fragmento de código HTML:

1
2
3
4
5
6
7
8
9

<body>
    <div class="box">
        <div class="relativeTopRight">
            <a href="appboy://close">X</a>
        </div>
        <iframe width="60%" height="50%" src="https://www.youtube.com/embed/_x45EB3BWqI">
        </iframe>
    </div>
</body>

Uso de vínculos profundos

Cuando utilices vínculos profundos o enlaces externos en mensajes HTML dentro de aplicaciones Android, no llames abrazeBridge.closeMessage() en tu JavaScript. La lógica interna del SDK cierra automáticamente el mensaje dentro de la aplicación cuando redirige a un enlace. Las llamadasbrazeBridge.closeMessage()interfieren en este proceso y pueden provocar que el mensaje deje de responder cuando los usuarios vuelvan a la aplicación.

A continuación se muestra un ejemplo de un vínculo profundo en un fragmento de código:

1
2
3
4
5

<script>
document.querySelectorAll('[data-button-id]').forEach(function (node)
Unknown macro: { node.addEventListener('click', function () { brazeBridge.logClick(node.dataset.buttonId); brazeBridge.closeMessage(); }); }
);
</script>

Requisitos previos

Antes de poder utilizar esta característica, tendrás que integrar el SDK de Swift Braze.

Acerca de los mensajes HTML

Con la interfaz JavaScript de Braze, puedes aprovechar Braze dentro de las WebViews personalizadas de tu aplicación. La interfaz ScriptMessageHandler es responsable de:

  1. Inyectando el puente JavaScript Braze en tu WebView, como se indica en la Guía del usuario : Mensajes HTML dentro de la aplicación.
  2. Pasar los métodos puente recibidos de tu WebView al SDK de Braze Swift.

Añadir la interfaz a una WebView

En primer lugar, añade el archivo ScriptMessageHandler de WebViewBridge a tu aplicación.

1

let scriptMessageHandler = Braze.WebViewBridge.ScriptMessageHandler(braze: braze)

Añade el scriptMessageHandler inicializado al userContentController de un WkWebView .

1
2
3
4

configuration.userContentController.add(
  scriptMessageHandler,
  name: Braze.WebViewBridge.ScriptMessageHandler.name
)

A continuación, crea la Vista Web utilizando tu configuración.

1

let webView = WKWebView(frame: .zero, configuration: configuration)

Cuando hayas terminado, tu código debe ser similar al siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// Create the script message handler using your initialized Braze instance.
let scriptMessageHandler = Braze.WebViewBridge.ScriptMessageHandler(braze: braze)

// Create a web view configuration and setup the script message handler.
let configuration = WKWebViewConfiguration()
configuration.userContentController.addUserScript(
  Braze.WebViewBridge.ScriptMessageHandler.script
)
configuration.userContentController.add(
  scriptMessageHandler,
  name: Braze.WebViewBridge.ScriptMessageHandler.name
)

// Create the webview using the configuration
let webView = WKWebView(frame: .zero, configuration: configuration)

Ejemplo: Registro de un evento personalizado

En el siguiente ejemplo, BrazeBridge registra un evento personalizado del contenido Web existente en el SDK de Swift de Braze.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Logging data via BrazeBridge Example</title>
    <script>
      function logData(data) {
        window.brazeBridge.logCustomEvent(data);
      }
    </script>
  </head>

  <body>
    <input
      type="button"
      value="Click to log a custom Event 'completed_level'"
      onclick="logData('completed_level')"
    />
  </body>
</html>
Github   Editar esta página en GitHub
New Stuff!