웹뷰로 구성된 하이브리드 앱

블럭스는 웹뷰 기반 앱 환경을 위한 통합 연동 방식을 제공합니다.

웹뷰 기반 앱은 앱과 웹이 기술적으로 분리된 구조이기 때문에, 웹에서 발생한 고객 행동이나 이벤트가 앱 내부에서는 바로 감지되지 않는다는 기술적인 한계가 존재합니다.

이에 웹과 앱 간의 데이터를 안전하게 주고받을 수 있는 연동 방식(브릿지 코드)을 제공하고 있으며, 이를 통해 웹에서 발생한 고객 행동 데이터가 누락되지 않고 마케팅 캠페인 및 타깃팅에 정확하게 반영될 수 있도록 지원합니다.

연동 방식

Web SDK 연동하기

웹뷰에 띄워지는 웹 상에서 일어나는 고객의 행동 데이터를 블럭스 Web SDK를 통해서 연동합니다.

Web SDK를 연동하는 방법은 Web SDK 연동하기를 참고해주세요.

이때, 사용 중인 환경에 맞게 bridgePlatform 옵션을 설정해주세요. Android 웹뷰에서는 "android", iOS 웹뷰에서는 "ios", React Native 웹뷰에서는 "react-native", Flutter 웹뷰에서는 "flutter" 로 설정해주셔야 Web SDK와 해당 Mobile SDK가 브릿지로 연결됩니다.

const bluxClient = new BluxClient({
    bluxApplicationId: "YOUR_APPLICATION_ID",
    bluxAPIKey: "YOUR_API_KEY",
    bridgePlatform: "android" // "android" | "ios" | "react-native" | "flutter" 중 사용 환경에 맞게 설정
});

Mobile SDK에서 브릿지 코드 연동하기

사용 중이신 Native Wrapper 프레임워크(예: React Native, Flutter 등) 에서 웹뷰(WebView) 와 블럭스 SDK 간의 통신을 연결하기 위해 브릿지 코드(Bridge) 를 추가해주셔야 합니다.

웹뷰 기반 앱은 앱과 웹이 서로 독립된 실행 환경에서 동작하기 때문에, 웹에서 발생한 고객 행동 이벤트를 앱 SDK로 직접 전달할 수 없습니다.

이때 브릿지 코드는 웹뷰에서 전송한 메시지를 앱(Native)에서 받아 SDK로 전달하는 역할을 수행합니다.

Android

val webView = WebView(context)
webView.settings.javaScriptEnabled = true
BluxWebSdkBridge.attach(webView, context)

웹뷰에서 Web SDK 메서드를 호출하면 호출 정보가 메시지화됩니다. 그리고 Android에서는 BluxWebSdkBridge.attach()로 웹뷰에 브릿지를 연동하면, Web SDK로부터 수신된 메시지가 Android SDK로 전달됩니다.

⚠️ 주의사항

javaScriptEnabled를 true로 설정하세요. JavaScript 실행이 비활성화되어 있으면 Web SDK가 동작하지 않습니다.
앱 내 모든 WebView에 브릿지를 연동하세요.
브릿지 연동이 올바르게 되지 않으면, 웹뷰에서 Web SDK 메서드를 호출하더라도 해당 메시지가 Android SDK로 전달되지 않습니다. 행동 데이터의 경우 누락이 발생합니다.

iOS

let webView = WKWebView()
BluxWebSdkBridge.attach(to: webView)

웹뷰에서 Web SDK 메서드를 호출하면 호출 정보가 메시지화됩니다. 그리고 iOS에서는 BluxWebSdkBridge.attach(to:)로 웹뷰에 브릿지를 연동하면, Web SDK로부터 수신된 메시지가 iOS SDK로 전달됩니다.

⚠️ 주의사항

앱 내 모든 WKWebView에 브릿지를 연동하세요.
뷰 컨트롤러를 해제할 때 BluxWebSdkBridge.detach(from:)를 호출해 메시지 핸들러를 제거하는 것을 권장합니다.
브릿지 연동이 올바르게 되지 않으면, 웹뷰에서 Web SDK 메서드를 호출하더라도 해당 메시지가 iOS SDK로 전달되지 않습니다. 행동 데이터의 경우 누락이 발생합니다.

React Native

<WebView
    source={{ uri: "https://your-web-app.example" }}
    javaScriptEnabled={true}
    originWhitelist={["*"]}
    onMessage={BluxClient.onMessage} // 브릿지 연동
/>

웹뷰에서 Web SDK 메서드를 호출하면 호출 정보가 메시지화됩니다. 그리고 React Native에서는 onMessage 속성을 통해, Web SDK로부터 수신된 메시지가 React Native SDK로 전달됩니다.

⚠️ 주의사항

javaScriptEnabled 속성을 true로 설정하세요. JavaScript 실행이 비활성화되어 있으면 Web SDK가 동작하지 않습니다.
앱 내 모든 WebView 컴포넌트에 브릿지를 연동하세요.
브릿지 연동이 올바르게 되지 않으면, 웹뷰에서 Web SDK 메서드를 호출하더라도 해당 메시지가 React Native SDK로 전달되지 않습니다. 행동 데이터의 경우 누락이 발생합니다.

Flutter: webview_flutter

WebViewWidget(
    controller: WebViewController()
        ..setJavaScriptMode(JavaScriptMode.unrestricted)
        // 브릿지 연동
        ..addJavaScriptChannel(
            'Blux',
            onMessageReceived: BluxFlutter.onMessage,
        )
        ..loadRequest(Uri.parse('https://your-web-app.example'))
);

웹뷰에서 Web SDK 메서드를 호출하면 호출 정보가 메시지화됩니다. 그리고 Flutter에서는 JavaScript 채널을 통해, Web SDK로부터 수신된 메시지가 Flutter SDK로 전달됩니다.

⚠️ 주의사항

JavaScript 채널 이름을 정확히 'Blux'로 설정하세요.
JavaScriptMode.unrestricted 옵션을 설정하세요. JavaScript 실행이 비활성화되어 있으면 Web SDK가 동작하지 않습니다.
앱 내 모든 WebViewWidget 위젯에 브릿지를 연동하세요.
브릿지 연동이 올바르게 되지 않으면, 웹뷰에서 Web SDK 메서드를 호출하더라도 해당 메시지가 Flutter SDK로 전달되지 않습니다. 행동 데이터의 경우 누락이 발생합니다.

Flutter: flutter_inappwebview

InAppWebView(
    initialUrlRequest: URLRequest(url: WebUri('https://your-web-app.example')),
    onWebViewCreated: (controller) {
        // 브릿지 연동
        controller.addJavaScriptHandler(
            handlerName: 'Blux',
            callback: BluxFlutter.onMessage,
        );
    },
);

웹뷰에서 Web SDK 메서드를 호출하면 호출 정보가 메시지화됩니다. 그리고 Flutter에서는 JavaScript 핸들러를 통해, Web SDK로부터 수신된 메시지가 Flutter SDK로 전달됩니다.

⚠️ 주의사항

JavaScript 핸들러 이름을 정확히 'Blux'로 설정하세요.
앱 내 모든 InAppWebView 위젯에 브릿지를 연동하세요.
브릿지 연동이 올바르게 되지 않으면, 웹뷰에서 Web SDK 메서드를 호출하더라도 해당 메시지가 Flutter SDK로 전달되지 않습니다. 행동 데이터의 경우 누락이 발생합니다.

연동 방식​

연동 방식