1. Pengantar
Terakhir diperbarui: 03-02-2022
Hal yang akan Anda pelajari
- Cara membuat Webview yang sangat sederhana di Android
- Cara mengirimkan peristiwa Webview ke Firebase
Hal yang akan Anda perlukan
- Project Firebase dengan Analytics SDK diterapkan
- Android Studio versi 4.2+.
- Android Emulator dengan Android 5.0+.
- Pemahaman tentang bahasa pemrograman Java.
- Pemahaman tentang bahasa pemrograman JavaScript.
2. Membuat Webview web sederhana di Android
Menambahkan Webview di tata letak aktivitas
Untuk menambahkan WebView ke aplikasi Anda di tata letak, tambahkan kode berikut ke file XML tata letak aktivitas Anda:
<?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>;
Menambahkan WebView di onCreate()
Untuk memuat halaman web di WebView, gunakan loadUrl(). Webview harus dibuat di aktivitas hitam. Misalnya, saya akan mengimplementasikan ini pada metode 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");
}
}
Namun, sebelum berfungsi, aplikasi Anda harus memiliki akses ke Internet. Untuk mendapatkan akses internet, minta izin INTERNET di file manifes Anda. Contoh:
<uses-permission android:name="android.permission.INTERNET" />
Hanya ini yang Anda perlukan untuk WebView dasar yang menampilkan halaman web.
Menggunakan JavaScript di Webview
jika halaman web yang ingin dimuat di WebView menggunakan JavaScript, Anda harus mengaktifkan JavaScript untuk WebView. Setelah JavaScript diaktifkan, Anda juga dapat membuat antarmuka di antara kode aplikasi dan kode JavaScript Anda.
JavaScript dinonaktifkan di WebView secara default. Anda dapat mengaktifkannya melalui WebSettings yang dilampirkan ke WebView. Anda dapat mengambil WebSettings dengan getSettings(), lalu mengaktifkan JavaScript dengan setJavaScriptEnabled().
Contoh:
WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
Aktivitas yang Diperbarui :
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. Menerapkan antarmuka terjepit JavaScript
Pengendali Javacript
Langkah pertama dalam menggunakan Google Analytics di WebView adalah membuat fungsi JavaScript untuk meneruskan peristiwa dan properti pengguna ke kode native. Contoh berikut menunjukkan cara melakukannya agar kompatibel dengan kode native Android dan Apple:
Dalam contoh ini saya membuat file JavaScript bernama script.js yang mencakup hal berikut :
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.");
}
}
Antarmuka bawaan
Untuk memanggil kode native Android dari JavaScript, terapkan class dengan metode bertanda @JavaScriptInterface: Pada contoh di bawah, saya membuat class Java baru bernama : 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);
}
Kode Akhir :
// [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]
}
Kini Anda telah menyiapkan antarmuka JavaScript , dan kini Anda siap untuk mulai mengirimkan peristiwa analisis.
4. Mengirim Peristiwa melalui antarmuka
Seperti yang Anda lihat di sini, Webview saya sangat sederhana, ia memiliki tiga tombol, dua, yang akan mencatat peristiwa dan yang lainnya akan mencatat properti pengguna :
Setelah saya mengklik tombol, kode itu akan memanggil "script.js" saya dan jalankan kode berikut :
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");
});
File skrip.js final :
/* 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");
});
Ini adalah cara dasar untuk mengirim peristiwa ke Analytics
5. Men-debug peristiwa Webview di Firebase
Men-debug peristiwa Webview di aplikasi Anda berfungsi dengan cara yang sama seperti men-debug bagian native SDK apa pun :
Untuk Mengaktifkan mode Debug, gunakan perintah berikut di konsol Android Studio Anda:
adb shell setprop debug.firebase.analytics.app package_name
Setelah selesai, Anda dapat menguji dan melihat peristiwa Webview menjadi aktif :
6. Selamat
Selamat, Anda telah berhasil membuat webview di aplikasi Android. Anda dapat mengirim dan mengukur peristiwa funnel utama di aplikasi yang terjadi melalui webview. Untuk mendapatkan hasil maksimal dari hal ini, sebaiknya hubungkan juga ke Google Ads, dan impor peristiwa ini sebagai konversi.
Anda telah belajar
- Cara Mengirim peristiwa Webview ke Firebase
- Cara menyiapkan dan membuat Webview sederhana di Android