1. Einleitung
Letzte Aktualisierung: 03.02.2022
Was Sie lernen werden
- So erstellen Sie eine sehr einfache Webansicht in Android
- So senden Sie Webview-Ereignisse an Firebase
Was du brauchen wirst
- Firebase-Projekt mit implementiertem Analytics SDK
- Android Studio-Version 4.2+.
- Ein Android-Emulator mit Android 5.0+.
- Vertrautheit mit der Programmiersprache Java.
- Vertrautheit mit der Programmiersprache Javascript.
2. Erstellen Sie eine einfache Webansicht in Android
Webview im Aktivitätslayout hinzufügen
Um Ihrer App im Layout eine WebView hinzuzufügen, fügen Sie den folgenden Code zur Layout-XML-Datei Ihrer Aktivität hinzu:
<?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>;
Hinzufügen einer WebView in onCreate()
Um eine Webseite im WebView zu laden, verwenden Sie loadUrl(). Die Webansicht sollte bei schwarzer Aktivität erstellt werden. Ich werde dies beispielsweise in der onCreate-Methode implementieren:
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");
}
}
Bevor dies funktioniert, muss Ihre App jedoch Zugriff auf das Internet haben. Um Internetzugang zu erhalten, fordern Sie die INTERNET-Berechtigung in Ihrer Manifestdatei an. Zum Beispiel:
<uses-permission android:name="android.permission.INTERNET" />
Das ist alles, was Sie für ein einfaches WebView benötigen, das eine Webseite anzeigt.
Verwendung von Javascript in Webviews
Wenn die Webseite, die Sie in Ihr WebView laden möchten, JavaScript verwendet, müssen Sie JavaScript für Ihr WebView aktivieren. Sobald JavaScript aktiviert ist, können Sie auch Schnittstellen zwischen Ihrem App-Code und Ihrem JavaScript-Code erstellen.
JavaScript ist in einer WebView standardmäßig deaktiviert. Sie können es über die an Ihr WebView angehängten WebSettings aktivieren. Sie können WebSettings mit getSettings() abrufen und dann JavaScript mit setJavaScriptEnabled() aktivieren.
Zum Beispiel:
WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
Aktualisierte Aktivitä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. Implementierung der Javascript-Bridged-Schnittstelle
Javascript-Handler
Der erste Schritt bei der Verwendung von Google Analytics in einer WebView besteht darin, JavaScript-Funktionen zu erstellen, um Ereignisse und Benutzereigenschaften an nativen Code weiterzuleiten. Das folgende Beispiel zeigt, wie dies auf eine Weise durchgeführt wird, die sowohl mit nativem Android- als auch Apple-Code kompatibel ist:
In diesem Beispiel habe ich eine Javascript-Datei namens script.js erstellt, die Folgendes enthält:
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.");
}
}
Native Schnittstelle
Um nativen Android-Code aus JavaScript aufzurufen, implementieren Sie eine Klasse mit Methoden, die mit @JavaScriptInterface gekennzeichnet sind: Im folgenden Beispiel habe ich eine neue Java-Klasse mit dem Namen AnalyticsWebInterfcae.java erstellt:
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);
}
Endgültiger Code:
// [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]
}
Sie haben nun die Javascript-Schnittstelle eingerichtet und können nun mit dem Senden von Analyseereignissen beginnen.
4. Senden von Ereignissen über die Schnittstelle
Wie Sie hier sehen können, ist meine Webansicht sehr einfach. Sie verfügt über drei Schaltflächen, von denen zwei ein Ereignis protokollieren und die andere eine Benutzereigenschaft protokolliert:
Sobald ich auf die Schaltflächen klicke, wird meine Datei „script.js“ aufgerufen und der folgende Code ausgeführt:
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");
});
Endgültige script.js-Datei:
/* 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");
});
Dies ist die grundlegende Möglichkeit, Ereignisse an Analytics zu senden
5. Debuggen Sie Webview-Ereignisse in Firebase
Das Debuggen von Webview-Ereignissen in Ihrer App funktioniert auf die gleiche Weise wie das Debuggen eines beliebigen nativen Teils Ihres SDK:
Um den Debug-Modus zu aktivieren, verwenden Sie bitte die folgenden Befehle in Ihrer Android Studio-Konsole:
adb shell setprop debug.firebase.analytics.app package_name
Sobald Sie fertig sind, können Sie Ihre Webview-Ereignisse testen und sehen, wie sie zum Leben erweckt werden:
6. Herzlichen Glückwunsch
Herzlichen Glückwunsch, Sie haben erfolgreich eine Webansicht in Ihrer Android-App erstellt. Sie können wichtige Funnel-Ereignisse in Ihrer App senden und messen, die über Webviews stattfinden. Um das Beste daraus zu machen, empfehlen wir außerdem, eine Verbindung zu Google Ads herzustellen und diese Ereignisse als Conversions zu importieren.
Du hast gelernt
- So senden Sie Webview-Ereignisse an Firebase
- So richten Sie eine einfache Webansicht in Android ein und erstellen sie