1. Giới thiệu
Cập nhật lần cuối: 2022-02-03
Bạn sẽ học được gì
- Cách tạo Webview cực đơn giản trên Android
- Cách gửi sự kiện Webview vào Firebase
Những gì bạn cần
- Dự án Firebase đã triển khai SDK Analytics
- Android Studio phiên bản 4.2+.
- Trình giả lập Android với Android 5.0+.
- Làm quen với ngôn ngữ lập trình Java.
- Làm quen với ngôn ngữ lập trình Javascript.
2. Tạo Webview web đơn giản trong Android
Thêm Webview vào bố cục hoạt động
Để thêm WebView vào ứng dụng của bạn trong bố cục, hãy thêm mã sau vào tệp XML bố cục của hoạt động của bạn:
<?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>;
Thêm WebView vào onCreate()
Để tải một trang web trong WebView, hãy sử dụng LoadUrl(). Chế độ xem web phải được tạo trên hoạt động đen. Ví dụ: tôi sẽ triển khai điều này trên phương thức 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");
}
}
Tuy nhiên, trước khi tính năng này hoạt động, ứng dụng của bạn phải có quyền truy cập Internet. Để có quyền truy cập Internet, hãy yêu cầu quyền INTERNET trong tệp kê khai của bạn. Ví dụ:
<uses-permission android:name="android.permission.INTERNET" />
Đó là tất cả những gì bạn cần cho một WebView cơ bản hiển thị một trang web.
Sử dụng Javascript trong Chế độ xem web
nếu trang web bạn dự định tải trong WebView sử dụng JavaScript thì bạn phải bật JavaScript cho WebView của mình. Sau khi bật JavaScript, bạn cũng có thể tạo giao diện giữa mã ứng dụng và mã JavaScript của mình.
Theo mặc định, JavaScript bị tắt trong WebView. Bạn có thể kích hoạt nó thông qua WebSettings đính kèm với WebView của bạn. Bạn có thể truy xuất WebSettings bằng getSettings(), sau đó bật JavaScript bằng setJavaScriptEnabled().
Ví dụ:
WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
Hoạt động cập nhật:
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. Triển khai giao diện cầu nối Javascript
Trình xử lý Javacript
Bước đầu tiên khi sử dụng Google Analytics trong WebView là tạo các hàm JavaScript để chuyển tiếp các sự kiện và thuộc tính người dùng sang mã gốc. Ví dụ sau đây cho thấy cách thực hiện việc này theo cách tương thích với cả mã gốc của Android và Apple:
Trong ví dụ này, tôi đã tạo một tệp Javascript có tên script.js bao gồm:
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.");
}
}
Giao diện gốc
Để gọi mã Android gốc từ JavaScript, hãy triển khai một lớp với các phương thức được đánh dấu @JavaScriptInterface : Trong ví dụ bên dưới, tôi đã tạo một lớp Java mới có tên là : 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);
}
Mã cuối cùng:
// [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]
}
Bây giờ bạn đã thiết lập giao diện Javascript, bây giờ bạn đã sẵn sàng bắt đầu gửi các sự kiện phân tích.
4. Gửi sự kiện qua giao diện
Như bạn có thể thấy ở đây, Webview của tôi rất đơn giản, nó có ba nút, hai nút sẽ ghi nhật ký một sự kiện và nút còn lại sẽ ghi nhật ký thuộc tính người dùng:
Khi tôi nhấp vào các nút, nó sẽ gọi tệp "script.js" của tôi và thực thi đoạn mã sau:
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");
});
Tệp script.js cuối cùng:
/* 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");
});
Đây là cách cơ bản để gửi sự kiện vào Analytics
5. Gỡ lỗi sự kiện Webview trong Firebase
Việc gỡ lỗi các sự kiện Webview trong ứng dụng của bạn hoạt động giống như cách gỡ lỗi bất kỳ phần gốc nào trong SDK của bạn :
Để bật chế độ Gỡ lỗi, vui lòng sử dụng các lệnh sau trong bảng điều khiển studio Android của bạn:
adb shell setprop debug.firebase.analytics.app package_name
Sau khi hoàn tất, bạn có thể kiểm tra và xem các sự kiện Webview của mình diễn ra như thế nào:
6. Xin chúc mừng
Xin chúc mừng, bạn đã tạo thành công chế độ xem web trong ứng dụng Android của mình. Bạn có thể gửi và đo lường các sự kiện kênh chính trong ứng dụng của mình diễn ra thông qua lượt xem web. Để tận dụng tối đa điều này, chúng tôi cũng khuyên bạn nên kết nối với Google Ads và nhập những sự kiện này dưới dạng lượt chuyển đổi.
Bạn đã học
- Cách gửi sự kiện Webview tới Firebase
- Cách thiết lập và tạo Webview đơn giản trong Android