1. 소개
최종 업데이트: 2022년 2월 3일
학습 내용
- Android에서 매우 간단한 WebView를 만드는 방법
- Firebase에 WebView 이벤트를 전송하는 방법
필요한 사항
- 애널리틱스 SDK가 구현된 Firebase 프로젝트
- Android 스튜디오 버전 4.2 이상
- Android 5.0 이상을 실행하는 Android Emulator.
- 자바 프로그래밍 언어에 대한 기본 지식.
- 자바스크립트 프로그래밍 언어에 대한 기본 지식.
2. Android에서 간단한 웹 WebView 만들기
활동 레이아웃에 WebView 추가
레이아웃에서 앱에 WebView를 추가하려면 다음 코드를 활동의 레이아웃 XML 파일에 추가합니다.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".WebActivity"
>
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>;
onCreate()에서 WebView 추가
WebView에서 웹페이지를 로드하려면 loadUrl()을 사용합니다. WebView는 검은색 활동에서 생성됩니다. 예를 들어 다음과 같이 onCreate 메서드에서 구현합니다.
public class WebActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_web);
// Navigate to site
myWebView.loadUrl("https://bittererhu.glitch.me");
}
}
그러나 이렇게 하려면 먼저 앱에서 인터넷에 액세스할 수 있어야 합니다. 인터넷에 액세스하려면 매니페스트 파일에서 INTERNET 권한을 요청하세요. 예를 들면 다음과 같습니다.
<uses-permission android:name="android.permission.INTERNET" />
이것으로 웹페이지를 표시하는 기본 WebView에 필요한 것은 이것뿐입니다.
WebView에서 자바스크립트 사용
WebView에서 로드하려는 웹페이지에서 JavaScript를 사용하는 경우 WebView에 JavaScript를 사용 설정해야 합니다. JavaScript가 사용 설정되면 앱 코드와 JavaScript 코드 간에 인터페이스를 만들 수도 있습니다.
JavaScript는 WebView에서 기본적으로 사용 중지되어 있습니다. WebView에 연결된 웹 설정을 통해 사용 설정할 수 있습니다. getSettings()로 WebSettings를 가져온 다음 setJavaScriptEnabled()로 JavaScript를 사용 설정할 수 있습니다.
예를 들면 다음과 같습니다.
WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
업데이트된 활동 :
public class WebActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_web);
WebView myWebView = (WebView) findViewById(R.id.webview);
if(myWebView != null) {
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
}
// Navigate to site
myWebView.loadUrl("https://bittererhu.glitch.me");
}
}
3. JavaScript 브리징된 인터페이스 구현
Javacript 핸들러
WebView에서 Google 애널리틱스를 사용하려면 먼저 이벤트 및 사용자 속성을 네이티브 코드로 전달하는 자바스크립트 함수를 만들어야 합니다. 다음 예에서는 Android 및 Apple 네이티브 코드 모두와 호환되는 방식으로 이 작업을 처리하는 방법을 보여줍니다.
이 예에서는 다음 코드가 포함된script.js라는 자바스크립트 파일을 만들었습니다.
function logEvent(name, params) {
if (!name) {
return;
}
if (window.AnalyticsWebInterface) {
// Call Android interface
window.AnalyticsWebInterface.logEvent(name, JSON.stringify(params));
} else if (window.webkit
&& window.webkit.messageHandlers
&& window.webkit.messageHandlers.firebase) {
// Call iOS interface
var message = {
command: 'logEvent',
name: name,
parameters: params
};
window.webkit.messageHandlers.firebase.postMessage(message);
} else {
// No Android or iOS interface found
console.log("No native APIs found.");
}
}
function setUserProperty(name, value) {
if (!name || !value) {
return;
}
if (window.AnalyticsWebInterface) {
// Call Android interface
window.AnalyticsWebInterface.setUserProperty(name, value);
} else if (window.webkit
&& window.webkit.messageHandlers
&& window.webkit.messageHandlers.firebase) {
// Call iOS interface
var message = {
command: 'setUserProperty',
name: name,
value: value
};
window.webkit.messageHandlers.firebase.postMessage(message);
} else {
// No Android or iOS interface found
console.log("No native APIs found.");
}
}
네이티브 인터페이스
JavaScript에서 네이티브 Android 코드를 호출하려면 @JavaScriptInterface 메서드를 사용하여 클래스를 구현합니다. 아래 예에서는 AnalyticsWebInterfcae.java라는 새 자바 클래스를 만들었습니다.
public class AnalyticsWebInterface {
public static final String TAG = "AnalyticsWebInterface";
private FirebaseAnalytics mAnalytics;
public AnalyticsWebInterface(Context context) {
mAnalytics = FirebaseAnalytics.getInstance(context);
}
@JavascriptInterface
public void logEvent(String name, String jsonParams) {
LOGD("logEvent:" + name);
mAnalytics.logEvent(name, bundleFromJson(jsonParams));
}
@JavascriptInterface
public void setUserProperty(String name, String value) {
LOGD("setUserProperty:" + name);
mAnalytics.setUserProperty(name, value);
}
private void LOGD(String message) {
// Only log on debug builds, for privacy
if (BuildConfig.DEBUG) {
Log.d(TAG, message);
}
}
private Bundle bundleFromJson(String json) {
// ...
}
}
Once you have created the native interface, register it with your WebView so that it is visible to JavaScript code running in the WebView:
// Only add the JavaScriptInterface on API version JELLY_BEAN_MR1 and above, due to
// security concerns, see link below for more information:
// https://developer.android.com/reference/android/webkit/WebView.html#addJavascriptInterface(java.lang.Object,%20java.lang.String)
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
mWebView.addJavascriptInterface(
new AnalyticsWebInterface(this), AnalyticsWebInterface.TAG);
} else {
Log.w(TAG, "Not adding JavaScriptInterface, API Version: " + Build.VERSION.SDK_INT);
}
최종 코드 :
// [START analytics_web_interface]
public class AnalyticsWebInterface {
public static final String TAG = "AnalyticsWebInterface";
private FirebaseAnalytics mAnalytics;
public AnalyticsWebInterface(Context context) {
mAnalytics = FirebaseAnalytics.getInstance(context);
}
@JavascriptInterface
public void logEvent(String name, String jsonParams) {
LOGD("logEvent:" + name);
mAnalytics.logEvent(name, bundleFromJson(jsonParams));
}
@JavascriptInterface
public void setUserProperty(String name, String value) {
LOGD("setUserProperty:" + name);
mAnalytics.setUserProperty(name, value);
}
private void LOGD(String message) {
// Only log on debug builds, for privacy
if (BuildConfig.DEBUG) {
Log.d(TAG, message);
}
}
private Bundle bundleFromJson(String json) {
// [START_EXCLUDE]
if (TextUtils.isEmpty(json)) {
return new Bundle();
}
Bundle result = new Bundle();
try {
JSONObject jsonObject = new JSONObject(json);
Iterator<String> keys = jsonObject.keys();
while (keys.hasNext()) {
String key = keys.next();
Object value = jsonObject.get(key);
if (value instanceof String) {
result.putString(key, (String) value);
} else if (value instanceof Integer) {
result.putInt(key, (Integer) value);
} else if (value instanceof Double) {
result.putDouble(key, (Double) value);
} else {
Log.w(TAG, "Value for key " + key + " not one of [String, Integer, Double]");
}
}
} catch (JSONException e) {
Log.w(TAG, "Failed to parse JSON, returning empty Bundle.", e);
return new Bundle();
}
return result;
// [END_EXCLUDE]
}
자바스크립트 인터페이스 가 설정되었으며 이제 분석 이벤트를 전송할 준비가 되었습니다.
4. 인터페이스를 통해 이벤트 전송
여기에서 볼 수 있듯이 WebView는 매우 간단합니다. 두 개 버튼으로 이벤트를 기록하고 다른 하나는 사용자 속성을 기록합니다.
버튼을 클릭하면 내 'script.js'가 파일을 열고 다음 코드를 실행합니다.
document.getElementById("event1").addEventListener("click", function() {
console.log("event1");
logEvent("event1", { foo: "bar", baz: 123 });
});
document.getElementById("event2").addEventListener("click", function() {
console.log("event2");
logEvent("event2", { size: 123.456 });
});
document.getElementById("userprop").addEventListener("click", function() {
console.log("userprop");
setUserProperty("userprop", "custom_value");
});
최종 스크립트.js 파일 :
/* If you're feeling fancy you can add interactivity
to your site with Javascript */
// prints "hi" in the browser's dev tools console
console.log("hi");
// [START log_event]
function logEvent(name, params) {
if (!name) {
return;
}
if (window.AnalyticsWebInterface) {
// Call Android interface
window.AnalyticsWebInterface.logEvent(name, JSON.stringify(params));
} else if (window.webkit
&& window.webkit.messageHandlers
&& window.webkit.messageHandlers.firebase) {
// Call iOS interface
var message = {
command: 'logEvent',
name: name,
parameters: params
};
window.webkit.messageHandlers.firebase.postMessage(message);
} else {
// No Android or iOS interface found
console.log("No native APIs found.");
}
}
// [END log_event]
// [START set_user_property]
function setUserProperty(name, value) {
if (!name || !value) {
return;
}
if (window.AnalyticsWebInterface) {
// Call Android interface
window.AnalyticsWebInterface.setUserProperty(name, value);
} else if (window.webkit
&& window.webkit.messageHandlers
&& window.webkit.messageHandlers.firebase) {
// Call iOS interface
var message = {
command: 'setUserProperty',
name: name,
value: value
};
window.webkit.messageHandlers.firebase.postMessage(message);
} else {
// No Android or iOS interface found
console.log("No native APIs found.");
}
}
// [END set_user_property]
document.getElementById("event1").addEventListener("click", function() {
console.log("event1");
logEvent("event1", { foo: "bar", baz: 123 });
});
document.getElementById("event2").addEventListener("click", function() {
console.log("event2");
logEvent("event2", { size: 123.456 });
});
document.getElementById("userprop").addEventListener("click", function() {
console.log("userprop");
setUserProperty("userprop", "custom_value");
});
애널리틱스로 이벤트를 전송하는 기본적인 방법입니다.
5. Firebase에서 WebView 이벤트 디버그
앱에서 WebView 이벤트를 디버깅하는 것은 SDK의 네이티브 부분을 디버깅하는 것과 동일한 방식으로 작동합니다.
디버그 모드를 사용 설정하려면 Android 스튜디오 콘솔에서 다음 명령어를 사용하세요.
adb shell setprop debug.firebase.analytics.app package_name
완료되면 WebView 이벤트를 테스트하고 확인할 수 있습니다.
6. 축하합니다
축하합니다. Android 앱에서 WebView를 만들었습니다. WebView를 통해 발생하는 주요 유입경로 이벤트를 앱에서 전송하고 측정할 수 있습니다. 이를 최대한 활용하려면 Google Ads에 연결하고 이러한 이벤트를 전환으로 가져오는 것이 좋습니다.
학습한 내용
- Firebase에 WebView 이벤트를 전송하는 방법
- Android에서 간단한 WebView를 설정하고 만드는 방법