Diese Seite wurde von der Cloud Translation API übersetzt.

Google Analytics for Firebase in Android WebView implementieren

1. Einführung

Zuletzt aktualisiert: 03.02.2022

Lerninhalte

So erstellen Sie eine sehr einfache WebView in Android
Webview-Ereignisse an Firebase senden

Voraussetzungen

Firebase-Projekt mit implementiertem Analytics SDK
Android Studio ab Version 4.2
Ein Android-Emulator mit Android 5.0 oder höher.
Vorkenntnisse in der Programmiersprache Java.
Kenntnisse der Programmiersprache JavaScript.

2. Einfache WebView in Android erstellen

Webview-Element zum Aktivitätslayout hinzufügen

Wenn Sie Ihrer App im Layout eine WebView hinzufügen möchten, fügen Sie der XML-Layoutdatei Ihrer Aktivität den folgenden Code 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>;

WebView in onCreate() hinzufügen

Verwenden Sie loadUrl(), um eine Webseite in der WebView zu laden. Die WebView sollte in der onCreate-Methode erstellt werden :

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");
 }
}

Dazu muss Ihre App jedoch Zugriff auf das Internet haben. Wenn Sie Internetzugriff benötigen, fordern Sie die Berechtigung INTERNET in Ihrer Manifestdatei an. Beispiel:

<uses-permission android:name="android.permission.INTERNET" />

Das ist alles, was Sie für eine einfache WebView benötigen, in der eine Webseite angezeigt wird.

JavaScript in Webviews verwenden

Wenn auf der Webseite, die Sie in Ihrer WebView laden möchten, JavaScript verwendet wird, müssen Sie JavaScript für Ihre 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 die Funktion über die WebSettings aktivieren, die an Ihre WebView angehängt sind. Sie können WebSettings mit getSettings() abrufen und dann JavaScript mit setJavaScriptEnabled() aktivieren.

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. JavaScript-Brückenschnittstelle implementieren

JavaScript-Handler

Der erste Schritt bei der Verwendung von Google Analytics in einer WebView besteht darin, JavaScript-Funktionen zu erstellen, um Ereignisse und Nutzerattribute an nativen Code weiterzuleiten. Das folgende Beispiel zeigt, wie Sie dies auf eine Weise tun, die sowohl mit nativem Android- als auch mit nativem Apple-Code kompatibel ist:

In diesem Beispiel habe ich eine JavaScript-Datei mit dem Namen „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

Wenn Sie nativen Android-Code aus JavaScript aufrufen möchten, implementieren Sie eine Klasse mit Methoden, die mit @JavaScriptInterface gekennzeichnet sind. Im folgenden Beispiel habe ich eine neue Java-Klasse namens „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);
}

Finaler 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 jetzt die JavaScript-Schnittstelle eingerichtet und können mit dem Senden von Analyseereignissen beginnen.

4. Ereignisse über die Benutzeroberfläche senden

Wie Sie hier sehen, ist meine WebView sehr einfach. Sie hat drei Schaltflächen, von denen zwei ein Ereignis und die andere eine Nutzer-Property protokollieren :

Wenn ich auf die Schaltflächen klicke, wird die 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");
});

Finale Datei „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");
});

So werden Ereignisse in Analytics gesendet.

5. WebView-Ereignisse in Firebase debuggen

Das Debuggen von WebView-Ereignissen in Ihrer App funktioniert genauso wie das Debuggen eines beliebigen nativen Teils Ihres SDK :

Verwenden Sie die folgenden Befehle in der Android Studio-Konsole, um den Debug-Modus zu aktivieren:

adb shell setprop debug.firebase.analytics.app package_name

Anschließend können Sie testen, ob Ihre Webview-Ereignisse erfasst werden :

6. Glückwunsch

Sie haben erfolgreich eine Webansicht in Ihrer Android-App erstellt. Sie können wichtige Trichterereignisse in Ihrer App, die über Webansichten stattfinden, senden und analysieren. Damit Sie diese Funktion optimal nutzen können, empfehlen wir Ihnen, eine Verbindung zu Google Ads herzustellen und diese Ereignisse als Conversions zu importieren.

Sie haben gelernt,

Webview-Ereignisse an Firebase senden
Einfache WebView in Android einrichten und erstellen

Google Analytics for Firebase in Android WebView implementieren Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.