1. Giới thiệu
Lần cập nhật gần đây nhất: ngày 3 tháng 2 năm 2022
Kiến thức bạn sẽ học được
- Cách tạo WebView rất đơn giản trong Android
- Cách gửi sự kiện WebView đến Firebase
Bạn cần có
- Dự án Firebase có triển khai SDK Analytics
- Android Studio phiên bản 4.2 trở lên.
- Trình mô phỏng Android chạy Android 5.0 trở lên.
- Làm quen với ngôn ngữ lập trình Java.
- Quen thuộc với ngôn ngữ lập trình JavaScript.
2. Tạo một Webview đơn giản trong Android
Thêm WebView vào bố cục hoạt động
Để thêm một WebView vào ứng dụng trong bố cục, hãy thêm mã sau vào tệp XML bố cục của hoạt động:
<?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 trong onCreate()
Để tải một trang web trong WebView, hãy sử dụng loadUrl(). Chế độ xem web nên được tạo trên hoạt động màu đen. Ví dụ: tôi sẽ triển khai chế độ xem này theo 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, để làm được điều này, ứng dụng của bạn phải có quyền truy cập Internet. Để truy cập Internet, hãy yêu cầu quyền INTERNET trong tệp kê khai. 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 giúp hiển thị một trang web.
Sử dụng JavaScript trong WebView
nếu trang web bạn định tải trong WebView sử dụng JavaScript, thì bạn phải bật JavaScript cho WebView. 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ể bật chế độ này thông qua WebSettings (Cài đặt web) đi kèm với WebView. Bạn có thể truy xuất phần WebSettings (Cài đặt web) 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 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 để 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 tới mã gốc. Ví dụ sau 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 những thông tin sau :
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 có các phương thức được đánh dấu là @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]
}
Giờ đây , bạn đã thiết lập giao diện JavaScript và sẵn sàng bắt đầu gửi các sự kiện phân tích.
4. Gửi Sự kiện thông qua giao diện
Như bạn có thể thấy ở đây Chế độ xem web của tôi rất đơn giản, nó có ba nút, hai nút sẽ ghi nhật ký 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 là "script.js" của tôi tệp và thực thi 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 đến Analytics
5. Gỡ lỗi sự kiện WebView trong Firebase
Hoạt động gỡ lỗi sự kiện WebView trong ứng dụng của bạn hoạt động theo cách tương tự như việc gỡ lỗi phần gốc bất kỳ 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 Android Studio:
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 có hiệu quả hay không :
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. Bạn có thể gửi và đo lường các sự kiện chính trong phễu trong ứng dụng của mình diễn ra thông qua WebView. Để khai thác tối đa sự kiện này, bạn cũng 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 đã tìm hiểu
- Cách gửi sự kiện WebView đến Firebase
- Cách thiết lập và tạo WebView đơn giản trong Android