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
เครื่องจัดการ Javacript
ขั้นตอนแรกในการใช้ 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 ของฉันเรียบง่ายมาก โดยมีปุ่ม 2 ปุ่ม 3 ปุ่มซึ่งจะบันทึกเหตุการณ์และอีกปุ่มหนึ่งจะบันทึกพร็อพเพอร์ตี้ผู้ใช้ ดังนี้
เมื่อฉันคลิกปุ่มมันจะเรียก "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