연동하기

본 가이드에서는 Android, iOS에서 하이브리드 앱을 연동했을 시의 가상의 시나리오를 다룹니다. HTML 뷰와 Native 뷰 간의 차이를 해소하여 HTML 뷰에서 이벤트를 기록하고 앱으로 보낼 수 있는 방법에 대해 설명합니다.

해당 방법을 적용하기 위해선 SDK 설치 및 연동 작업이 선행되어야 합니다.

• Android 시작하기

• iOS 시작하기

더 자세히 알아보려면 리소스 및 샘플을 참조하세요.

자바스크립트 인터페이스

Android와 iOS 모두 web view에서 native code를 호출할 수 있는 네이티브 자바스크립트 인터페이스를 갖고 있습니다.

• Android: JavascriptInterface

• iOS: JavaScriptCore

구현은 다음 단계들로 구성됩니다.

1. Webview 또는 웹페이지를 위한 HTML 코드

2. Webview를 위한 네이티브 코드 구현

Android

Android 용 HTML 코드

다음 HTML 코드를 Webview 또는 웹 페이지에 추가합니다.

<h1>Logging Event From Web View</h1>
<div id="main">
 <button id="logSignUpEvent" onclick="logSignUPEvent()"> SignUp </button>
</div>
<script type="text/javascript">
 function logLoginEvent(){
 var eventName = "df_sign_up"
 var eventProperty = {'df_sign_channel': 'Facebook'};
 window.customJsBridge.logEvent(eventName, JSON.stringify(eventProperty));
}
</script>

WebActivity 클래스

다음 코드를 사용하여 웹 액티비티 클래스를 작성합니다.

Java

myWebview.getSettings().setJavaScriptEnabled(true);
myWebView.addJavascriptInterface(new MainJsInterface(), "customJsBridge");
myWebView.loadUrl("https://yourwebsite.com");

Kotlin

Javascript 인터페이스 클래스

JavascriptInterface로 invoke()를 구현할 MainJsInterface class를 생성합니다.

Java

public class MainJsInterface {
    @JavascriptInterface
    public void logEvent(String eventName, String eventProperty){
        JSONObject eventPropertyJsonObject = null;
        if(eventProperty != null){
            try {
                eventPropertyJsonObject = new JSONObject(eventProperty);
                } catch (JSONException e) {
                e.printStackTrace();
            }
        }
        Dfinery.getInstance().logEvent(eventName, eventPropertyJsonObject);
    }
}

Kotlin

iOS

iOS 용 HTML 코드

다음 HTML 코드를 Webview 또는 웹 페이지에 추가합니다.

<h1>Logging Event From Web View</h1>
<div id="main">
 <button id="logSignUpEvent" onclick="logSignUPEvent()"> SignUp </button>
</div>
<script type="text/javascript">
 function logLoginEvent(){
 var eventName = "df_sign_up"
 var eventProperty = {'df_sign_channel': 'Facebook'};
 var message = {
    'eventName' : eventName,
    'eventProperty' : eventProperty
 };
 webkit.messageHandlers.customJsBridge.postMessage(message);
}
</script>

WKWebView 설정

다음과 같이 WKWebView 객체의 messageHandler를 연결후 웹뷰를 로드해 주세요.

Swift

import UIKit
import WebKit
import DfinerySDK

class WebView: UIViewController, WKScriptMessageHandler {

    var webView: WKWebView!
    
    override func loadView() {
        let webConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        view = webView
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // messageHandler 연결
        webView.configuration.userContentController.add(self, name: "customJsBridge")

        let myURL = URL(string:"https://www.YOUR_WEBSITE.com")
        let myRequest = URLRequest(url: myURL!)
        webView.load(myRequest)
    }

    // WKScriptMessageHandler 프로토콜 구현
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "customJsBridge", let messageBody = message.body as? [String: Any] {
            if let eventName = messageBody["eventName"] as? String,
               let eventProperty = messageBody["eventProperty"] as? [String: Any] {
                // Dfinery SDK 이벤트 호출
                Dfinery.shared().logEvent(name: eventName, properties: property)
            }
        }
    }
}

Objective-C

Swift로 작성된 하이브리드 앱에서 logEvent 호출 시 logEvent(_ name: String, properties: [String: Any]) 메서드가 아닌 logEvent(name: String, properties: [String: Any]) 메서드를 호출해 주세요

더 알아보기

날짜 및 시간 형식 속성 입력하기

날짜 및 시간 형식은 yyyy-MM-dd'T'HH:mm:ss.SSS'Z' 포맷의 문자열 형태로 입력해야합니다.

javascript에서 Date 객체를 활용하는 방법은 이 문서를 참고해주시기 바랍니다.

For Android

let today = new Date().toISOString();
let eventName = "df_sign_up"
let eventProperty = {
    'custom_property': today
};
window.customJsBridge.logEvent(eventName, JSON.stringify(eventProperty));

For iOS

유저 식별 정보 설정

Dfinery Android SDK는 유저 식별 정보를 Enum으로 입력 받고 있습니다. HTML에서 유저 식별 정보를 입력하기 위해서는 유저 식별 정보 상수의 값을 입력하여 자바스크립트 인터페이스 상에서 문자열을 Enum으로 치환한 뒤 호출하는 것을 권장합니다.

Javascript

window.customJsBridge.setIdentity('external_id', 'sampleUser');

Java

public class MainJsInterface {
    @JavascriptInterface
    public void setIdentity(String key, String value){
        DFIdentity identity = DFIdentity.get(key);
        DfineryProperties.setIdentity(identity, value);
    }
}

Kotlin