1. บทนำ
อัปเดตล่าสุด: 03-02-2022
สิ่งที่คุณจะได้เรียนรู้
- วิธีสร้าง WebView อย่างง่ายใน Android
- วิธีส่งเหตุการณ์ WebView ไปยัง Firebase
สิ่งที่คุณต้องมี
- โปรเจ็กต์ Firebase ที่ติดตั้งใช้งาน Analytics SDK
- Android Studio เวอร์ชัน 4.2 ขึ้นไป
- โปรแกรมจำลอง Android ที่ใช้ Android 5.0 ขึ้นไป
- มีความคุ้นเคยกับภาษาโปรแกรม Java
- มีความคุ้นเคยกับภาษาโปรแกรม JavaScript
2. สร้าง WebView เว็บแบบง่ายใน Android
การเพิ่ม 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>;
การเพิ่ม WebView ใน onCreate()
หากต้องการโหลดหน้าเว็บใน 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 ในไฟล์ Manifest เช่น
<uses-permission android:name="android.permission.INTERNET" />
ทั้งหมดนี้คือสิ่งที่คุณต้องมีสำหรับ WebView พื้นฐานที่แสดงหน้าเว็บ
การใช้ JavaScript ใน WebView
หากหน้าเว็บที่คุณวางแผนจะโหลดใน WebView ใช้ JavaScript คุณต้องเปิดใช้ JavaScript สำหรับ WebView เมื่อเปิดใช้ JavaScript แล้ว คุณยังสร้างอินเทอร์เฟซระหว่างโค้ดแอปกับโค้ด JavaScript ได้ด้วย
JavaScript จะปิดใช้อยู่ใน WebView โดยค่าเริ่มต้น คุณเปิดใช้ได้ผ่าน WebSettings ที่แนบมากับ WebView คุณสามารถเรียกข้อมูล WebSettings ด้วย getSettings() แล้วเปิดใช้ JavaScript ด้วย setJavaScriptEnabled()
เช่น
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
ตัวแฮนเดิล JavaScript
ขั้นตอนแรกในการใช้ Google Analytics ใน WebView คือการสร้างฟังก์ชัน JavaScript เพื่อส่งต่อเหตุการณ์และพร็อพเพอร์ตี้ผู้ใช้ไปยังโค้ดเนทีฟ ตัวอย่างต่อไปนี้แสดงวิธีดำเนินการนี้ในลักษณะที่เข้ากันได้กับโค้ดดั้งเดิมของทั้ง Android และ Apple
ในตัวอย่างนี้ ฉันสร้างไฟล์ JavaScript ชื่อ 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.");
}
}
อินเทอร์เฟซเนทีฟ
หากต้องการเรียกใช้โค้ด Android ดั้งเดิมจาก JavaScript ให้ใช้คลาสที่มีเมธอดที่ทำเครื่องหมาย @JavaScriptInterface ในตัวอย่างด้านล่างนี้ ฉันได้สร้างคลาส Java ใหม่ชื่อ 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]
}
ตอนนี้คุณได้ตั้งค่าอินเทอร์เฟซ JavaScript แล้ว และพร้อมที่จะเริ่มส่งเหตุการณ์วิเคราะห์แล้ว
4. การส่งเหตุการณ์ผ่านอินเทอร์เฟซ
ดังที่เห็นที่นี่ WebView ของฉันนั้นเรียบง่ายมาก มีปุ่ม 3 ปุ่ม โดย 2 ปุ่มจะบันทึกเหตุการณ์ และอีกปุ่มจะบันทึกพร็อพเพอร์ตี้ผู้ใช้
เมื่อฉันคลิกปุ่ม ระบบจะเรียกไฟล์ "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");
});
ไฟล์ script.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");
});
นี่คือวิธีพื้นฐานในการส่งเหตุการณ์ไปยัง Analytics
5. แก้ไขข้อบกพร่องของเหตุการณ์ WebView ใน Firebase
การแก้ไขข้อบกพร่องของเหตุการณ์ WebView ในแอปจะทํางานในลักษณะเดียวกับการแก้ไขข้อบกพร่องของส่วนเนทีฟของ SDK
หากต้องการเปิดใช้โหมดแก้ไขข้อบกพร่อง โปรดใช้คำสั่งต่อไปนี้ในคอนโซล Android Studio
adb shell setprop debug.firebase.analytics.app package_name
เมื่อเสร็จแล้ว คุณจะทดสอบและดูเหตุการณ์ WebView ได้โดยทำดังนี้
6. ขอแสดงความยินดี
ยินดีด้วย คุณสร้าง WebView ในแอป Android เรียบร้อยแล้ว คุณสามารถส่งและวัดเหตุการณ์ Funnel ที่สําคัญในแอปซึ่งเกิดขึ้นผ่าน WebView ได้ เพื่อให้ได้รับประโยชน์สูงสุดจากเหตุการณ์เหล่านี้ เราขอแนะนําให้คุณเชื่อมต่อกับ Google Ads และนําเข้าเหตุการณ์เหล่านี้เป็น Conversion
คุณได้เรียนรู้
- วิธีส่งเหตุการณ์ WebView ไปยัง Firebase
- วิธีตั้งค่าและสร้าง WebView อย่างง่ายใน Android