Ereignisse in einer WebView mit Google Analytics for Firebase erfassen

1. Einführung

Zuletzt aktualisiert:25.02.2022

Inhalt

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

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

Aufgaben in diesem Lab

• GA4F (Google Analytics for Firebase) in der Hybrid-App initialisieren
• Benutzerdefinierte Ereignisse und Parameter auf einer Webseite erstellen
• Ereignisse auf einer Webseite in WebView an einen 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

Der offizielle Firebase-Leitfaden enthält den Beispielcode in GitHub. Wir benötigen sie für dieses Projekt.

Zunächst müssen Sie den Code herunterladen und in Ihrer bevorzugten Entwicklungsumgebung öffnen. Dazu verwenden wir zwei Verzeichnisse: „android“ und „web“. Der „android“ Das Verzeichnis ist für Android-App und das „Web“ -Verzeichnis ist für eine Webseite, die von der App über WebView aufgerufen wird.

3. Firebase-Projekt erstellen und einrichten

Um Firebase zu nutzen, müssen Sie zuerst ein Firebase-Projekt erstellen und einrichten.

Firebase-Projekt erstellen

1. Firebase

Klicken Sie in der Firebase Console auf „Projekt hinzufügen“ oder „Projekt erstellen“ und geben Sie dem Firebase-Projekt einen Namen wie „Webview-test-codelab“ oder einen 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 zum Erfassen von Aktionsereignissen und zum Analysieren von Conversions benötigen.

Weitere Informationen zu Firebase-Projekten

4. Firebase-Konfiguration für Android

Android in der Firebase Console konfigurieren

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

Alternativ können Sie in der linken Navigationsleiste Projektübersicht aufrufen und unter „Jetzt Firebase Ihrer App hinzufügen“ auf die Schaltfläche Android klicken.

Nun wird die Meldung „Firebase zu meiner Android-App hinzufügen“ angezeigt. wie unten dargestellt.

2. Den Namen deines Android-Pakets (z. B. com.xxxx.myproject) findest du in deinem App-Verzeichnis unter android/app/src/main/AndroidManifest.xml.

package="com.xxxx.myproject"

3. Ein SHA-1-Schlüssel wird hier nicht benötigt. Dieser Schlüssel ist nur erforderlich, wenn Sie Google Log-in oder Firebase Dynamic Links verwenden oder In-App-Kaufdaten aus Google Play importieren möchten, die in diesem Codelab nicht behandelt werden.
4. Klicken Sie auf Register App (App registrieren).
5. Laden Sie die Konfigurationsdatei google-services.json in der Firebase Console herunter, kopieren Sie die fügen Sie diese Datei in das android/app-Verzeichnis in Ihrem App-Projekt ein.
6. Überspringen Sie in der Firebase Console die restlichen Schritte und kehren Sie zur Hauptseite der Firebase Console zurück.
7. Zum Schluss benötigen Sie das Gradle-Plug-in für Google-Dienste, um die von Firebase generierte Datei google-services.json zu lesen.
8. Öffnen Sie android/app/build.gradle in Ihrer IDE oder im Editor und fügen Sie die folgende Zeile als letzte Zeile in der Datei ein:

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

13. Öffnen Sie android/build.gradle. Fügen Sie dann eine neue Abhängigkeit in das buildscript-Tag ein.

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 Abhängigkeiten installieren kann.

Die Konfiguration Ihrer App für Android ist abgeschlossen.

5. Analytics-Weboberfläche im Web entwickeln und benutzerdefinierte Ereignisse protokollieren

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 schauen wir uns an, welchen Code Sie in die Webseite einfügen müssen.

Erstellen Sie zunächst eine JavaScript-Datei zur Verwendung in einer HTML-Datei. Im Beispielcode heißt die js-Datei "index.js". Sie müssen die Funktion „logEvent“ für den Aufruf von "AnayticsWebInterface" für Android und „messageHander“ wie unten dargestellt.

Und rufen Sie diese Funktion auf, wo Sie das Ereignis in der HTML-Datei verfolgen möchten (siehe unten).

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

6. Webverzeichnis hosten, um Webseiten-URL abzurufen

Bevor Sie eine Webseite in WebView in Ihrer App aufrufen, benötigen Sie eine Webseiten-URL. Es gibt viele Methoden zum Hosten von Webseiten. In diesem Codelab verwenden wir den Firebase-Hosting-Dienst der Einfachheit halber.

• Geben Sie in Ihrem 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ähle „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 für alle verbleibenden Aufforderungen die Standardeinstellungen.
• firebase deploy --only hosting – für Firebase Hosting bereitstellen

• Nachdem Sie die URL der Webseite abgerufen haben, rufen Sie Ihr App-Projekt in Android Studio auf und fügen Sie die in diesem Schritt erstellte Web-URL wie unten in WebView ein.

7. Schnittstellencode in der Android-App entwickeln

Wenn Sie die Ereignisse in WebView mit GA4F erfassen möchten, müssen Sie den Code sowohl in Web als auch in Android 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.

"AnalyticsWebInterface.java" erstellen zur Erstellung von "AnalyticsWebInterface" . In diesem Kurs müssen Sie @JavascriptInterface codieren, um die Funktion logEvent in der JS-Webdatei zu verbinden (siehe unten).

Als Nächstes musst du der Activity-Klasse die JavaScript-Oberfläche hinzufügen, mit der WebView aufgerufen wird, wie unten dargestellt.

Den vollständigen Code finden Sie im Beispielcode, den Sie von GitHub im Abschnitt „Getting set up“ (Erste Schritte) heruntergeladen haben. Schritt.

8. Ereignisse prüfen und Fehler beheben

Für Debugging-Ereignisse 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 [Name des App-Pakets]

> adb shell setprop log.tag.FA VERBOSE

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

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

Klicken Sie auf PROTOKOLLE EREIGNIS 1. Wenn Ihr Code gut funktioniert, sehen Sie das Log wie unten dargestellt.

Wenn Sie dies in der Firebase Console überprüfen möchten, können Sie auch den Tab „Echtzeit“ verwenden. Öffnen Sie die Firebase Console und klicken Sie auf den Tab „Echtzeit“ wie unten dargestellt.

Filtern Sie dann das Android-Plattformereignis mithilfe von „Vergleich hinzufügen“. .

Wenn Ihr Code richtig implementiert wurde, sehen Sie die Ereignisse aus der Android-App auf dem Tab „Echtzeit“.

Die protokollierten Ereignisse werden nach einigen Stunden auf dem Tab „Ereignisse“ in der Firebase Console angezeigt. Klicken Sie einfach im Analytics-Bereich der Firebase Console auf den Tab Ereignisse. Sie können auch die Werte im Ereignis event1 prüfen, indem Sie einfach auf das Ereignis klicken.

Wenn Sie „event1“ als Conversion in Google Ads importieren möchten, markieren Sie die Spalte als Conversion. Bewegen Sie dazu den Schieberegler Als Conversion markieren nach rechts.

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

Verwenden Sie zum Debugging Firebase DebugView. Weitere Informationen finden Sie unter Debugging-Ereignis.

9. Analytics-Ereignisse in Google Ads importieren

Sobald Sie die Firebase-Einrichtung abgeschlossen haben, können Sie die App-Kampagnen mit Aktionsereignissen starten. Verknüpfen Sie zuerst das Firebase mit Google Ads. Wenn Sie Firebase mit Google Ads verknüpfen,können in App-Kampagnen Firebase-Ereignisse importiert werden. Durch diesen Prozess kann in Google Ads außerdem mehr über die Zielgruppen der App-Kampagnen gewonnen werden.

1. Rufen Sie die Firebase-Einstellungen auf, indem Sie auf die Schaltfläche neben Projektübersicht klicken.
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 Google Ads-Konto aus.

Achtung:Wenn das Zielereignis nicht als Conversion-Ereignis markiert ist, kann es nicht in Google Ads importiert werden. Das Ereignis muss korrekt als Conversion markiert sein.

Jetzt ist der Firebase-Teil abgeschlossen.

Rufen Sie Google Ads auf.

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

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

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

5. Prüfen Sie die Aktion, 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 bei Google Play eine App auf Produktionsebene. Wenn Sie noch nicht bereit für die Veröffentlichung sind, können Sie diesen Schritt vorerst überspringen.

6. Rufen Sie in Ihrem aktuellen Konto den Tab „Kampagnen“ 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 Ihre App, indem Sie den Namen der App, den Paketnamen oder den Publisher eingeben.
9. Wählen Sie im Bereich Gebote die Option In-App-Aktionen aus dem Drop-down-Menü aus.
10. Suchen Sie in der Liste nach dem benutzerdefinierten Ereignis. Legen Sie den Ziel-CPA (Cost-per-Action) fest und wählen Sie bei Bedarf weitere Optionen aus.

11. Schließen Sie die Kampagneneinstellungen ab.

11. Glückwunsch

Sie haben Firebase und Google Ads erfolgreich integriert. So lässt sich die Kampagnenleistung mit importierten Firebase-Ereignissen steigern.

Sie haben gelernt,

• GA4F (Google Analytics for Firebase) in der Hybrid-App initialisieren
• Benutzerdefinierte Ereignisse und Parameter auf einer Webseite erstellen
• Ereignisse auf einer Webseite in WebView an einen 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

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