Passer au contenu

Cette page a été traduite automatiquement et peut contenir des inexactitudes. Pour signaler une erreur de traduction, utilisez le module de commentaires en bas de la table des matières, à droite de la page.

Messages in-app HTML

Découvrez comment ajouter l’interface JavaScript de Braze à votre application, afin d’utiliser l’API de Braze pour créer des messages HTML in-app dans vos WebViews personnalisées.

android
swift

Conditions préalables

Avant de pouvoir utiliser cette fonctionnalité, vous devrez intégrer le SDK Android de Braze.

À propos des messages HTML

Grâce à l’interface JavaScript de Braze, vous pouvez exploiter Braze à l’intérieur des WebViews personnalisées de votre application. Le InAppMessageJavascriptInterface est responsable de :

Injecter le pont JavaScript de Braze dans votre WebView, comme indiqué dans le guide d’utilisation : Messages HTML in-app.
Transmettre les méthodes de pont reçues de votre WebView au SDK Android de Braze.

Ajouter l’interface à une WebView

L’utilisation des fonctionnalités de Braze depuis une WebView dans votre application peut se faire en ajoutant l’interface JavaScript de Braze à votre WebView. Une fois l’interface ajoutée, la même API disponible pour le guide d’utilisation : Messages HTML in-app sera disponible dans votre WebView personnalisée.

java
kotlin

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");

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

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

Intégration de contenu YouTube

Le contenu YouTube et autre contenu HTML5 peut être lu dans les messages in-app HTML. Cela nécessite que l’accélération matérielle soit activée dans l’activité où le message in-app est affiché ; consultez le guide du développeur Android pour plus de détails. L’accélération matérielle n’est disponible qu’à partir des versions 11 et ultérieures de l’API Android.

Voici un exemple de vidéo YouTube intégrée dans un extrait HTML :

<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" title="YouTube video player">
        </iframe>
    </div>
</body>

Utilisation des deep links

Lorsque vous utilisez des deep links ou des liens externes dans les messages in-app HTML sur Android, n’appelez pas brazeBridge.closeMessage() dans votre JavaScript. La logique interne du SDK ferme automatiquement le message in-app lorsqu’il redirige vers un lien. L’appel à brazeBridge.closeMessage() interfère avec ce processus et peut rendre le message non réactif lorsque les utilisateurs reviennent dans votre application.

Voici un exemple de deep link dans un extrait de code :

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

Conditions préalables

Avant de pouvoir utiliser cette fonctionnalité, vous devrez intégrer le SDK Braze Swift.

À propos des messages HTML

Grâce à l’interface JavaScript de Braze, vous pouvez exploiter Braze à l’intérieur des WebViews personnalisées de votre application. Le ScriptMessageHandler de l’interface est responsable de :

Injecter le pont JavaScript de Braze dans votre WebView, comme indiqué dans le guide d’utilisation : Messages HTML in-app.
Transmettre les méthodes de pont reçues de votre WebView au SDK Swift de Braze.

Ajouter l’interface à une WebView

Commencez par ajouter le ScriptMessageHandler de WebViewBridge à votre application.

let scriptMessageHandler = Braze.WebViewBridge.ScriptMessageHandler(
  channel: .inAppMessage,
  braze: braze
)

Ajoutez le scriptMessageHandler initialisé au userContentController d’une WkWebView.

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

Créez ensuite la WebView en utilisant votre configuration.

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

Lorsque vous avez terminé, votre code devrait ressembler à ce qui suit :

// Create the script message handler using your initialized Braze instance.
let scriptMessageHandler = Braze.WebViewBridge.ScriptMessageHandler(
  channel: .inAppMessage,
  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)

Exemple : enregistrement d’un événement personnalisé

Dans l’exemple suivant, BrazeBridge enregistre un événement personnalisé à partir de contenu web existant vers le SDK Swift de Braze.

<!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>

New Stuff!