Ereignisse in einer WebView mit Google Analytics erfassen

1. Einführung

Zuletzt aktualisiert:22.12.2021

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 Beispielcode, den wir für dieses Projekt benötigen, wird aus den Firebase-Anleitungen in einem GitHub-Repository bereitgestellt.

Zuerst müssen Sie den Code abrufen 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. Android Firebase-Konfiguration

Android konfigurieren

1. Wählen Sie in der Firebase Console im linken Navigationsbereich Projektübersicht aus und klicken Sie dann unter "Jetzt Firebase Ihrer App hinzufügen" auf die Schaltfläche Android.

Das Dialogfeld erscheint auf dem folgenden Bildschirm.

2. Der wichtige Wert ist der Name des Android-Pakets, den Sie im folgenden Schritt abrufen.

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

3. Öffnen Sie in Ihrem Anwendungsverzeichnis die Datei android/app/src/main/AndroidManifest.xml.
4. Suchen Sie im Element manifest nach dem Stringwert des Attributs package. Dieser Wert ist der Android-Paketname (etwa 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 wird hier nicht benötigt, es sei denn, Sie möchten Google Log-in oder Firebase Dynamic Links verwenden. Diese Funktionen sind nicht Teil dieses Codelab. Wenn du in_app_purchase-Daten aus Google Play importieren möchtest, musst du den Schlüssel später festlegen.
7. Klicken Sie auf Register App (App registrieren).
8. Fahren Sie in Firebase fort und folgen Sie der Anleitung zum Herunterladen der Konfigurationsdatei google-services.json.

9. Wechseln Sie zu Ihrem App-Verzeichnis und verschieben Sie die soeben heruntergeladene Datei google-services.json in das Verzeichnis android/app.
10. Überspringen Sie in der Firebase Console die restlichen Schritte und kehren Sie zur Hauptseite der Firebase Console zurück.
11. Zum Schluss benötigen Sie das Gradle-Plug-in für Google-Dienste, um die von Firebase generierte Datei google-services.json zu lesen.
12. Ö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 und fügen Sie innerhalb des buildscript-Tags 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 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 das Web einfügen müssen.

Erstellen Sie zunächst eine JavaScript-Datei zur Verwendung in der HTML-Datei. Im Beispielcode hat die js-Datei den Namen „index.js“. Sie müssen die Funktion „logEvent“ zum Aufrufen von AnayticsWebInterface für Android und messageHander für iOS wie unten dargestellt.

Und rufen Sie diese Funktion auf, wo Sie das Ereignis verfolgen möchten, wie unten dargestellt.

Wenn das Ereignis in Android in der WebView ausgelöst wurde, wird „window.AnalyticsWebInterface“ verwendet. wird aufgerufen und es verbindet das Ereignis mit der nativen App.

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 zeigen wir Ihnen, wie Sie den Firebase-Hosting-Dienst verwenden.

• 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: Damit 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

7. Schnittstellencode in der Android-App entwickeln

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

"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 müssen Sie die JavaScript-Oberfläche in die Activity-Klasse einfügen, mit der die WebView wie unten dargestellt aufgerufen wird.

Den vollständigen Code finden Sie im Beispielcode, den Sie im Abschnitt "Erste Schritte" 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

Wenn Ihr Code gut funktioniert, sehen Sie das Protokoll wie unten.

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.

Sie können event1 als Conversion markieren, indem Sie den Schieberegler Als Conversion markieren nach rechts verschieben.

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 Firebase Flutter eingerichtet 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 Aktionskampagnen starten, die auf Nutzer ausgerichtet sind, die wahrscheinlich mehr als fünfmal event1-Ereignisse auslösen.

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