Skip to content

HTML 인-앱 메시지

앱에 Braze 자바스크립트 인터페이스를 추가하는 방법을 알아보고, Braze API를 사용하여 사용자 지정 웹뷰에서 HTML 인앱 메시지를 생성할 수 있습니다.

필수 조건

이 기능을 사용하려면 먼저 Android Braze SDK를 통합해야 합니다.

HTML 메시지 정보

Braze JavaScript 인터페이스를 사용하면 앱 내 커스텀 웹뷰 내에서 Braze를 활용할 수 있습니다. 는 InAppMessageJavascriptInterface 가 담당합니다:

  1. 사용자 가이드에 설명된 대로 WebView에 Braze JavaScript 브릿지를 삽입합니다: HTML 인앱 메시지.
  2. WebView에서 받은 브리지 메서드를 Braze 소프트웨어 개발 키트에 전달합니다.

웹뷰에 인터페이스 추가하기

앱의 WebView에서 Braze 기능을 사용하려면 WebView에 Braze JavaScript 인터페이스를 추가하면 됩니다. 인터페이스가 추가되면 사용자 가이드에 동일한 API를 사용할 수 있습니다: HTML 인앱 메시지 는 커스텀 웹뷰 내에서 사용할 수 있습니다.

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

YouTube 콘텐츠 퍼가기

YouTube 및 기타 HTML5 콘텐츠는 HTML 인앱 메시지에서 재생할 수 있습니다. 이를 위해 인앱 메시지가 표시되는 활동에서 하드웨어 가속을 활성화해야 합니다. 자세한 내용은 Android 개발자 가이드를 참조하세요. 하드웨어 가속은 Android API 버전 11 이상에서만 사용할 수 있습니다.

다음은 HTML 스니펫에 임베드된 YouTube 동영상의 예시입니다:

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>

딥링크 사용하기

Android HTML 인앱 메시지에서 딥링크 또는 외부 링크를 사용할 때는 자바스크립트에서 brazeBridge.closeMessage() 을 호출하지 마 세요. 소프트웨어 개발 키트의 내부 로직은 인앱 메시지가 링크로 리디렉션되면 자동으로 해당 메시지를 닫습니다. brazeBridge.closeMessage() 으로 전화하면 이 프로세스가 방해되어 사용자가 앱으로 돌아왔을 때 메시징이 응답하지 않을 수 있습니다.

다음은 코드 스니펫의 딥링크 예시입니다:

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>

필수 조건

이 기능을 사용하려면 먼저 Swift Braze SDK를 통합해야 합니다.

HTML 메시지 정보

Braze JavaScript 인터페이스를 사용하면 앱 내 커스텀 웹뷰 내에서 Braze를 활용할 수 있습니다. 인터페이스의 ScriptMessageHandler 가 담당합니다:

  1. 사용자 가이드에 설명된 대로 WebView에 Braze JavaScript 브릿지를 삽입합니다: HTML 인앱 메시지.
  2. 웹뷰에서 받은 브리지 메서드를 Braze Swift SDK에 전달합니다.

웹뷰에 인터페이스 추가하기

먼저 앱에 ScriptMessageHandlerWebViewBridge 를 앱에 추가합니다.

1

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

초기화된 scriptMessageHandler 을 WkWebView의 userContentController 에 추가합니다.

1
2
3
4

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

그런 다음 구성을 사용하여 WebView를 만듭니다.

1

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

완료되면 코드가 다음과 비슷해집니다:

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)

예시: Logging a custom event

다음 예시에서 BrazeBridge 는 기존 웹 콘텐츠의 커스텀 이벤트를 Braze Swift SDK에 로깅합니다.

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   GitHub 에서 이 페이지를 편집합니다.
New Stuff!