(R.id.webView)
webView.addJavascriptInterface(
MarketapWebBridge(webView),
MarketapWebBridge.NAME
)
```
{% endtab %}
{% tab title="Java" %}
```java
WebView webView = findViewById(R.id.webView);
webView.addJavascriptInterface(
new MarketapWebBridge(),
MarketapWebBridge.NAME
);
```
{% endtab %}
{% endtabs %}
### 2-2. IOS
{% tabs %}
{% tab title="Swift" %}
```javascript
webView.configuration.userContentController.add(
MarketapWebBridge(),
name: MarketapWebBridge.name
)
```
{% endtab %}
{% tab title="Objective-C" %}
```objective-c
[webView.configuration.userContentController addScriptMessageHandler:[[MarketapWebBridge alloc] initWithHandleInAppInWebView:YES] name:[MarketapWebBridge name]];
```
{% endtab %}
{% endtabs %}
### 2-3. Flutter
Flutter는 WebView 기능을 기본으로 제공하지 않기 때문에, Marketap SDK는 브릿지 이름(`MarketapWebBridge.name`)과 메시지를 처리하는 `handleMessage(String)` 함수만 제공합니다.
대표적인 WebView 라이브러리들의 연동 예시는 아래와 같으며, 이 외의 라이브러리에서도 JavaScript 브릿지 이름을 동일하게 설정하고, 첫 번째 인자를 문자열로 전달하여 `_bridge.handleMessage`를 호출하면 정상적으로 작동합니다.
{% hint style="warning" %}
아래 예시 이외의 라이브러리를 사용하는 경우, 안정적인 사용 지원을 위해 마켓탭 개발팀에 한번 더 확인 요청해주세요.
{% endhint %}
{% tabs %}
{% tab title="webview\_flutter" %}
import 'package:webview_flutter/webview_flutter.dart';
class _MarketapWebViewFlutterState extends State<MarketapWebViewFlutter> {
late final WebViewController _controller;
MarketapWebBridge? _bridge;
@override
void initState() {
super.initState();
_controller = WebViewController()
..setJavaScriptMode(JavaScriptMode.unrestricted)
..addJavaScriptChannel(
MarketapWebBridge.name,
onMessageReceived: (JavaScriptMessage javaScriptMessage) {
_bridge?.handleMessage(javaScriptMessage.message);
},
)
..loadRequest(Uri.parse(widget.url));
_bridge = MarketapWebBridge(
evaluateJavascript: (script) {
_controller.runJavaScript(script);
}
);
}
@override
void dispose() {
_bridge?.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return WebViewWidget(controller: _controller);
}
}
{% endtab %}
{% tab title="flutter\_inappwebview" %}
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
class _MarketapFlutterInAppWebViewState
extends State<MarketapFlutterInAppWebView> {
MarketapWebBridge? _bridge;
@override
void dispose() {
_bridge?.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return InAppWebView(
initialUrlRequest: URLRequest(url: WebUri(widget.url)),
onWebViewCreated: (controller) async {
_bridge = MarketapWebBridge(
evaluateJavascript: (script) {
controller.evaluateJavascript(source: script);
}
);
if (Platform.isIOS) {
await controller.addWebMessageListener(
WebMessageListener(
jsObjectName: MarketapWebBridge.name,
onPostMessage: (message, origin, isMainFrame, replyProxy) {
final data = message?.data;
if (data is String) {
_bridge?.handleMessage(data);
}
},
allowedOriginRules: {'*'},
),
);
} else if (Platform.isAndroid) {
controller.addJavaScriptHandler(
handlerName: MarketapWebBridge.name,
callback: (args) {
if (args.isNotEmpty && args[0] is String) {
_bridge?.handleMessage(args[0]);
}
return null;
},
);
}
},
);
}
}
{% endtab %}
{% endtabs %}
### 2-4. React Native
{% tabs %}
{% tab title="Typesccript" %}
import React, {useEffect, useRef} from 'react';
import {WebView} from 'react-native-webview';
import {MarketapWebBridge} from 'react-native-marketap-sdk';
export default function MarketapWebViewScreen() {
const webViewRef = useRef<WebView>(null);
const bridgeRef = useRef<MarketapWebBridge | null>(null);
useEffect(() => {
bridgeRef.current = new MarketapWebBridge(
(script: string) => webViewRef.current?.injectJavaScript(script),
true // handleInAppInWebView (기본값 true)
);
return () => {
bridgeRef.current?.dispose();
bridgeRef.current = null;
};
}, []);
return (
<WebView
ref={webViewRef}
source={{uri: 'https://YOUR_WEB_URL'}}
onMessage={(event) => {
bridgeRef.current?.handleMessage(event.nativeEvent.data);
}}
/>
);
}
{% endtab %}
{% endtabs %}
## 3. 완료
모든 작업을 완료했다면 이제 Web SDK 의 데이터 수집, 인앱 메시지 노출 등 모든 동작을 Mobile SDK 가 대신 처리하게 됩니다.
### FAQ
Q1. 웹뷰 브릿지를 연동할 때 웹, 모바일에서 각각 초기화 함수(initialize)를 호출해야 하나요?
* **모바일 SDK에서는 필수입니다.**
* **웹 SDK에서는 필수가 아닙니다.**
웹뷰 브릿지가 연동된 상태에서는 웹 SDK의 `initialize` 호출은 내부적으로 무시되며, 모든 동작은 모바일 SDK 기준으로 처리됩니다.\
다만 **모바일 웹뷰와 일반 웹 환경에서 동일한 웹 코드를 공용으로 사용하는 경우**, 웹에서 `initialize`를 호출해도 문제는 없으므로 굳이 제거할 필요는 없습니다.
Q2. 웹뷰 브릿지를 연동하면 JavaScript에서 사용 중이던 mtap.track 같은 함수들을 수정해야 하나요?
* **수정할 필요 없습니다.**
Web SDK가 내부적으로 웹뷰 브릿지를 통해 이벤트를 모바일 SDK로 전달합니다.\
따라서 기존에 사용하던 `mtap.track`, `mtap.identify` 등의 호출은 그대로 유지해도 되며, 모바일 SDK와 통합된 환경에서 정상적으로 데이터가 수집됩니다.
Q3. 기존에는 웹에서만 사용 중이었는데, 앱 도입을 위해 웹뷰 브릿지를 연동하려고 합니다. 주의할 점이 있나요?
* **모바일 SDK에서의 `initialize` 호출은 필수입니다.**
* 웹뷰 브릿지 연동만 완료하면, **웹 쪽에서 마켓탭 SDK 관련 코드를 추가로 수정할 필요는 없습니다.**
모바일 SDK 초기화 이후, 웹뷰 브릿지가 연결되면 이벤트 수집 및 인앱 메시지 노출 등은 자동으로 모바일 SDK 기준으로 처리됩니다.