Ereignisse in einer WebView mit Google Analytics for Firebase erfassen

1. Einführung

Zuletzt aktualisiert: 25.02.2022

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 Aktionskampagnen verwenden

Voraussetzungen

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

2. Einrichtung

Code abrufen

Im offiziellen Firebase-Leitfaden finden Sie den Beispielcode auf GitHub. Wir benötigen sie für dieses Projekt.

Laden Sie dazu den Code herunter 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 in der Firebase Console konfigurieren

1. Klicken Sie auf der Firebase Console-Startseite auf das Android-Symbol, wie unten dargestellt.

Alternativ können Sie in der linken Navigationsleiste auf Projektübersicht klicken und dann unter „Fügen Sie Firebase zu Ihrer App hinzu, um zu beginnen“ auf die Schaltfläche Android.

Anschließend wird der Bildschirm „Firebase zu Ihrer Android-App hinzufügen“ wie unten angezeigt.

2. Den Android-Paketnamen (z. B. com.xxxx.myproject) finden Sie im App-Verzeichnis unter android/app/src/main/AndroidManifest.xml.

package="com.xxxx.myproject"

3. Der SHA‑1-Schlüssel ist hier nicht erforderlich. Dieser Schlüssel ist nur erforderlich, wenn Sie Google Sign-in oder Firebase Dynamic Links verwenden oder In-App-Kaufdaten aus Google Play importieren möchten. Das ist jedoch nicht Gegenstand dieses Codelabs.
4. Klicken Sie auf App registrieren.
5. Laden Sie die Konfigurationsdatei google-services.json in der Firebase Console herunter und kopieren Sie sie in das Verzeichnis android/app in Ihrem App-Projekt.
6. Überspringen Sie die verbleibenden Schritte und kehren Sie zur Hauptseite der Firebase Console zurück.
7. Schließlich benötigen Sie das Gradle-Plug-in für Google-Dienste, um die von Firebase generierte google-services.json-Datei zu lesen.
8. Ö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. Fügen Sie dann 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 auf der Webseite einfügen müssen.

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

Rufen Sie diese Funktion an der Stelle in der HTML-Datei auf, an der Sie das Ereignis erfassen möchten, wie unten gezeigt.

Wenn ein Ereignis im WebView in einer Android-App ausgelöst wird, wird „window.AnalyticsWebInterface“ aufgerufen und das Ereignis an den WebInterface-Code in der App weitergeleitet.

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

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

• Geben Sie im Terminal das Webverzeichnis ein (z. B. cd web) und führen Sie die folgenden Befehle aus:
• npm install -g firebase-tools

Dadurch 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

• Nachdem Sie die Webseiten-URL erhalten haben, rufen Sie Ihr App-Projekt in Android Studio auf und fügen Sie die gerade erstellte Web-URL wie unten in WebView ein.

7. Schnittstellencode in Android-App entwickeln

Wenn Sie die Ereignisse in der WebView mit GA4F 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, um die Ereignisse von der Webseite in WebView zu empfangen.

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“ von GitHub 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

Klicken Sie in Ihrer App auf „LOG EVENT 1“. Wenn Ihr Code richtig funktioniert, wird das Log wie unten angezeigt.

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.

Wenn Sie event1 als Conversion in Google Ads importieren möchten, müssen Sie das Ereignis als Conversion markieren. Schieben Sie dazu den Schalter Als Conversion markieren nach rechts.

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 Firebase-Einrichtung 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 App-Aktionskampagnen mit dem Ereignis event1 starten.

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 Aktionskampagnen verwenden

12. Verweise

Offizieller Leitfaden

• Analytics in einer WebView verwenden – Firebase – Google

Firebase- und Google Ads-Einrichtung

• Google Ads mit benutzerdefinierten Ereignissen aus Google Analytics for Firebase – Android
• Google Ads-Kampagnen mit benutzerdefinierten Google Analytics-Ereignissen und Flutter starten