Ereignisse in einer WebView mit Google Analytics erfassen

1. Einführung

Zuletzt aktualisiert:22.12.2021

Umfang

In diesem Codelab erfahren Sie, wie Sie Ereignisse von einer Webseite in WebView an nativen Code weiterleiten, damit GA4F die Ereignisse erfassen kann.

Wir verwenden die Beispiel-Hybrid-Android-App, die eine Webseite über WebView aufruft.

Lerninhalte

• GA4F (Google Analytics for Firebase) in einer Hybrid-App initialisieren
• Benutzerdefinierte Ereignisse und Parameter auf einer Webseite erstellen
• Ereignisse auf einer Webseite in WebView an nativen Code weiterleiten
• Fehlerbehebung
• Ereignisse importieren und für aktionsfördernde Kampagnen verwenden

Voraussetzungen

• Android Studio 3.6 oder höher
• Firebase-Konto

2. Einrichtung

Code abrufen

Die Firebase-Anleitungen enthalten den Beispielcode, den wir für dieses Projekt in einem GitHub-Repository benötigen.

Kopieren Sie zuerst den Code und öffnen Sie ihn in Ihrer bevorzugten Entwicklungsumgebung. Wir verwenden zwei Verzeichnisse: „android“ und „web“. Das Verzeichnis „android“ ist für Android-Apps und das Verzeichnis „web“ für eine Webseite, die von der App über WebView aufgerufen wird.

3. Firebase-Projekt erstellen und einrichten

Um mit Firebase zu beginnen, müssen Sie ein Firebase-Projekt erstellen und einrichten.

Firebase-Projekt erstellen

1. Melden Sie sich in Firebase an.

Klicken Sie in der Firebase Console auf „Projekt hinzufügen“ (oder „Projekt erstellen“) und geben Sie Ihrem Firebase-Projekt den Namen „Webview-test-codelab“ oder einen beliebigen anderen Namen.

2. Klicken Sie sich durch die Optionen zur Projekterstellung. Akzeptieren Sie die Firebase-Nutzungsbedingungen, wenn Sie dazu aufgefordert werden. Sie sollten Google Analytics für dieses Projekt aktivieren, da Sie Google Analytics-Ereignisse benötigen, um Aktionsereignisse zu erfassen und Conversions zu analysieren.

Weitere Informationen zu Firebase-Projekten

4. Firebase-Konfiguration für Android

Android konfigurieren

1. Wählen Sie in der Firebase Console im linken Navigationsbereich Projektübersicht aus und klicken Sie dann unter „Fügen Sie Firebase zu Ihrer App hinzu, um zu beginnen“ auf die Schaltfläche Android.

Das Dialogfeld, das auf dem folgenden Bildschirm zu sehen ist, wird angezeigt.

2. Der wichtige Wert, den Sie angeben müssen, ist der Android-Paketname, den Sie im nächsten Schritt erhalten.

Tipp: Weitere Informationen zu Paket- und Anwendungs-IDs finden Sie unter Anwendungs-ID festlegen.

3. Öffnen Sie im App-Verzeichnis die Datei android/app/src/main/AndroidManifest.xml.
4. Suchen Sie im manifest-Element den Stringwert des Attributs package. Dieser Wert ist der Android-Paketname (z. B. com.yourcompany.yourproject). Kopieren Sie diesen Wert.
5. Fügen Sie im Firebase-Dialogfeld den kopierten Paketnamen in das Feld Android package name ein.
6. Der SHA‑1-Schlüssel ist hier nicht erforderlich, es sei denn, Sie möchten Google Sign-in oder Firebase Dynamic Links verwenden. Diese sind jedoch nicht Teil dieses Codelabs. Wenn Sie in_app_purchase-Daten aus Google Play importieren möchten, müssen Sie den Schlüssel später festlegen.
7. Klicken Sie auf App registrieren.
8. Folgen Sie in Firebase der Anleitung, um die Konfigurationsdatei google-services.json herunterzuladen.

9. Rufen Sie Ihr App-Verzeichnis auf und verschieben Sie die Datei google-services.json, die Sie gerade heruntergeladen haben, in das Verzeichnis android/app.
10. Überspringen Sie die verbleibenden Schritte und kehren Sie zur Hauptseite der Firebase Console zurück.
11. Schließlich benötigen Sie das Gradle-Plug-in für Google-Dienste, um die von Firebase generierte google-services.json-Datei zu lesen.
12. Öffnen Sie android/app/build.gradle in Ihrer IDE oder Ihrem Editor und fügen Sie die folgende Zeile als letzte Zeile in die Datei ein:

apply plugin: 'com.google.gms.google-services'

13. Öffnen Sie android/build.gradle und fügen Sie im Tag buildscript eine neue Abhängigkeit hinzu:

buildscript { 
   repositories {
      // ...
   }
   dependencies {
      // ...
      Classpath 'com.google.gms:google-services:4.3.3'
   }
}

14. Wenn Ihre App noch ausgeführt wird, schließen Sie sie und erstellen Sie sie neu, damit Gradle die Abhängigkeiten installieren kann.

Sie haben die Konfiguration Ihrer App für Android abgeschlossen.

5. Entwickeln einer Analytics-Weboberfläche im Web und Protokollieren benutzerdefinierter Ereignisse

Wenn Sie die Ereignisse in einer Webview mit Google Analytics erfassen möchten, müssen Sie den Code sowohl in die Web- als auch in die Android-App einfügen.

In diesem Teil sehen wir uns an, welchen Code Sie im Web einfügen müssen.

Erstellen Sie zuerst eine JavaScript-Datei, die in der HTML-Datei verwendet werden soll. Im Beispielcode heißt die JS-Datei „index.js“. Sie müssen die Funktion „logEvent“ zum Aufrufen von „AnalyticsWebInterface“ für Android und „messageHander“ für iOS wie im folgenden Code erstellen.

Rufen Sie diese Funktion dann an der Stelle auf, an der Sie das Ereignis erfassen möchten, wie unten gezeigt.

Wenn das Ereignis im WebView in Android ausgelöst wird, wird „window.AnalyticsWebInterface“ aufgerufen und das Ereignis wird mit der nativen App verknüpft.

6. Webverzeichnis hosten, um die URL der Webseite zu erhalten

Bevor Sie eine Webseite in WebView in Ihrer App aufrufen, benötigen Sie eine Webseiten-URL. Es gibt viele Möglichkeiten, Webseiten zu hosten. In diesem Codelab verwenden wir jedoch aus Gründen der Einfachheit den Firebase Hosting-Dienst.

• Geben Sie im Terminal das Webverzeichnis ein (z. B. cd web) und führen Sie die folgenden Befehle aus:
• npm install -g firebase-tools – damit wird die Firebase CLI installiert.
• firebase login
• firebase init
• Wählen Sie „Hosting“ aus, wenn Sie gefragt werden, welche Funktion Sie einrichten möchten.
• Wählen Sie das Projekt aus, das Sie für Ihre Android-App eingerichtet haben.
• Übernehmen Sie die Standardeinstellungen für alle verbleibenden Aufforderungen.
• firebase deploy --only hosting – Bereitstellung in Firebase Hosting

7. Schnittstellencode in Android-App entwickeln

Wenn Sie die Ereignisse in einer Webview mit Google Analytics erfassen möchten, müssen Sie den Code sowohl in die Web- als auch in die Android-Umgebung einfügen. In diesem Teil sehen wir uns an, welchen Code Sie in die Android-App einfügen müssen.

Erstellen Sie die Datei „AnalyticsWebInterface.java“, um die Klasse „AnalyticsWebInterface“ zu erstellen. In dieser Klasse müssen Sie @JavascriptInterface codieren, um die Funktion „logEvent“ in der Web-JS-Datei wie unten zu verbinden.

Als Nächstes müssen Sie die JavaScript-Schnittstelle in der Aktivität hinzufügen, die die WebView aufruft, wie unten gezeigt.

Den vollständigen Code finden Sie im Beispielcode, den Sie im Schritt „Einrichtung“ heruntergeladen haben.

8. Ereignisse prüfen und Fehler beheben

Zum Debuggen von Ereignissen können Sie den folgenden Code im Android Studio-Terminal verwenden, nachdem Sie das Testgerät verbunden oder den Emulator gestartet haben.

> adb shell setprop debug.firebase.analytics.app [App-Paketname]

> adb shell setprop log.tag.FA VERBOSE

> adb shell setprop log.tag.FA-SVC VERBOSE

> adb logcat -v time -s FA FA-SVC

Wenn Ihr Code gut funktioniert, sehen Sie das folgende Protokoll.

Wenn Sie die Firebase Console verwenden möchten, können Sie auch den Tab „Echtzeit“ aufrufen. Rufen Sie die Firebase Console auf und klicken Sie wie unten auf den Tab „Echtzeit“.

Filtern Sie dann das Android-Plattformereignis mit der Funktion „Vergleich hinzufügen“.

Wenn Ihr Code richtig implementiert ist, werden die Ereignisse aus der Android-App auf dem Tab „Echtzeit“ angezeigt.

Einige Stunden später können Sie sich die protokollierten Ereignisse in der Firebase Console auf dem Tab „Ereignisse“ ansehen. Klicken Sie dazu einfach in der Firebase Console im Analytics-Bereich auf den Tab Ereignisse. Sie können die Werte im Ereignis event1 auch aufrufen, indem Sie einfach auf das Ereignis klicken.

Markieren Sie event1 als Conversion, indem Sie den Schalter Als Conversion markieren nach rechts schieben.

Wenn das Ereignis auf dem Tab „Conversions“ zu sehen ist, haben Sie es erfolgreich als Conversion markiert. Dieses Ereignis kann jetzt in Google Ads aus Firebase importiert werden.

Verwenden Sie Firebase DebugView zur Fehlerbehebung. Weitere Informationen finden Sie unter Ereignis debuggen.

9. Analytics-Ereignisse in Google Ads importieren

Sobald die Einrichtung von Firebase-Flutter abgeschlossen ist, können Sie die App-Kampagnen mit Aktionsereignissen starten. Verknüpfen Sie zuerst Firebase mit Google Ads. Wenn Sie Firebase mit Google Ads verknüpfen,können Firebase-Ereignisse in App-Kampagnen importiert werden. Außerdem können App-Kampagnen so optimiert werden, da mehr Informationen über die Zielgruppen verfügbar sind.

1. Klicken Sie neben Projektübersicht auf den Button, um die Firebase-Einstellungen aufzurufen.
2. Auf dem Tab Integrationen sehen Sie Google Ads und die Schaltfläche Verknüpfen. Klicken Sie auf Verknüpfen und dann auf Weiter.

3. Wählen Sie ein Google Ads-Konto aus.

Achtung:Wenn das Zielereignis nicht als Conversion-Ereignis markiert ist, kann es nicht in Google Ads importiert werden. Prüfen Sie, ob das Ereignis korrekt als Conversion markiert ist.

Der Firebase-Teil ist jetzt abgeschlossen.

Rufen Sie Google Ads auf.

1. Melden Sie sich an und rufen Sie Tools und Einstellungen > Analyse > Conversions auf, um benutzerdefinierte Ereignisse als Conversions zu importieren.
2. Klicken Sie auf das +, um neue Conversion-Aktionen hinzuzufügen.

3. Wählen Sie Google Analytics 4-Properties (Firebase) aus und klicken Sie auf Weiter.

4. Sie sehen alle Analytics-Ereignisse, die als Conversions markiert sind. Suchen Sie nach dem event1-Ereignis, das wir zuvor implementiert haben.

5. Klicken Sie das Kästchen neben der Aktion an, klicken Sie auf Importieren und dann auf Weiter.

Nachdem Sie event1 als Conversion-Aktion festgelegt haben, können Sie Aktionskampagnen starten, mit denen Sie Nutzer ansprechen, die das Ereignis event1 wahrscheinlich mehr als fünfmal auslösen.

10. App-Aktionskampagnen mit importierten Ereignissen starten

Wichtig: Damit Sie eine App-Kampagne starten können, benötigen Sie eine App in der Produktionsphase bei Google Play. Wenn Sie noch nicht bereit für die Veröffentlichung sind, können Sie diesen Schritt jetzt überspringen.

6. Rufen Sie den Tab „Kampagne“ Ihres aktuellen Kontos auf und starten Sie eine neue Kampagne, indem Sie auf die Schaltfläche + klicken. Klicken Sie auf [Neue Kampagne] und dann auf Weiter.
7. Starten Sie eine App-Werbekampagne mit der Option App-Installationen.

8. Suchen Sie nach Ihrer App, indem Sie den App-Namen, den Paketnamen oder den Publisher eingeben.
9. Wählen Sie im Bereich Gebote im Drop-down-Menü die Option In-App-Aktionen aus.
10. Suchen Sie in der Liste nach Ihrem benutzerdefinierten Ereignis. Legen Sie den Ziel-CPA (Cost-per-Action) fest und füllen Sie alle zusätzlichen Optionen aus.

11. Schließen Sie die Kampagneneinstellungen ab.

11. Glückwunsch

Herzlichen Glückwunsch! Sie haben Firebase und Google Ads erfolgreich verknüpft. So können Sie die Kampagnenleistung mit importierten Firebase-Ereignissen steigern.

Sie haben gelernt

• GA4F (Google Analytics for Firebase) in einer Hybrid-App initialisieren
• Benutzerdefinierte Ereignisse und Parameter auf einer Webseite erstellen
• Ereignisse auf einer Webseite in WebView an nativen Code weiterleiten
• Fehlerbehebung
• Ereignisse importieren und für aktionsfördernde Kampagnen verwenden