1. Einführung
Zuletzt aktualisiert:25.01.2021
Inhalt
In diesem Codelab erfahren Sie, wie Sie benutzerdefinierte Ereignisse mit GA4F implementieren und Aktionskampagnen über die Google Ads for Flutter App starten.
Wir verwenden die standardmäßige Flutter-App mit einem einfachen Zähler-Widget. Wir machen Werbung für unsere App bei potenziellen Nutzern, die wahrscheinlich auf das Zähler-Widget klicken.
Aufgaben in diesem Lab
- GA4F (Google Analytics for Firebase) in Flutter initialisieren
- Benutzerdefinierte Ereignisse und Parameter erstellen
- Ereignisse aus Firebase in Google Ads importieren
- Aktionskampagnen mit benutzerdefinierten Ereignissen starten
Voraussetzungen
- Android Studio 3.6 oder höher
- Xcode (für iOS-Unterstützung)
- Firebase-Konto
- Google Ads-Konto
2. Neues Flutter-Projekt starten
Einfache Vorlagen-App für Flutter erstellen Du änderst diese Start-App für dieses Codelab.
Starten Sie Android Studio.
- Wenn Sie keine offenen Projekte haben, wählen Sie auf der Begrüßungsseite Neue Flutter-App starten aus. Wählen Sie andernfalls Datei > Neu > Neues Flutter-Projekt.
- Wählen Sie als Projekttyp Flutter Application (Flutter-Anwendung) aus und klicken Sie auf Next (Weiter).
- Prüfen Sie, ob im Flutter SDK-Pfad der Speicherort des SDKs angegeben ist. Wählen Sie SDK installieren aus, falls das Textfeld leer ist.
- Geben Sie den Projektnamen ein und klicken Sie auf Weiter.
- Verwenden Sie den von Android Studio vorgeschlagenen Standardpaketnamen und klicken Sie auf Weiter.
- Klicken Sie auf Fertig.
- Warten Sie, bis Android Studio das SDK installiert und das Projekt erstellt hat.
3. Firebase-Projekt erstellen und einrichten
Um Firebase zu nutzen, müssen Sie zuerst ein Firebase-Projekt erstellen und einrichten.
Firebase-Projekt erstellen
Klicken Sie in der Firebase Console auf „Projekt hinzufügen“ oder „Projekt erstellen“ und geben Sie dem Firebase-Projekt den Namen „Firebase-Flutter-Ads“ oder einen anderen Namen.
- 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.
4. Plattformspezifische Firebase-Konfiguration (Android)
Android konfigurieren
- 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.
- Der wichtige Wert ist der Name des Android-Pakets, den Sie im folgenden Schritt abrufen.
- Öffnen Sie im Flutter-Anwendungsverzeichnis die Datei
android/app/src/main/AndroidManifest.xml
. - Suchen Sie im Element
manifest
nach dem Stringwert des Attributspackage
. Dieser Wert ist der Android-Paketname (etwacom.yourcompany.yourproject
). Kopieren Sie diesen Wert. - Fügen Sie im Firebase-Dialogfeld den kopierten Paketnamen in das Feld
Android package name
ein. - 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. - Klicken Sie auf Register App (App registrieren).
- Fahren Sie in Firebase fort und folgen Sie der Anleitung zum Herunterladen der Konfigurationsdatei
google-services.json
.
- Wechseln Sie zum Verzeichnis Ihrer Flutter-Anwendung und verschieben Sie die Datei
google-services.json
, die Sie gerade heruntergeladen haben, in das Verzeichnisandroid/app
. - Überspringen Sie in der Firebase Console die restlichen Schritte und kehren Sie zur Hauptseite der Firebase Console zurück.
- Zum Schluss benötigen Sie das Gradle-Plug-in für Google-Dienste, um die von Firebase generierte Datei
google-services.json
zu lesen. - Ö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'
- Öffnen Sie
android/build.gradle
und fügen Sie innerhalb desbuildscript
-Tags eine neue Abhängigkeit hinzu:
buildscript {
repositories {
// ...
}
dependencies {
// ...
Classpath 'com.google.gms:google-services:4.3.3'
}
}
- 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 Flutter-App für Android ist abgeschlossen. Für iOS sollten Sie dieses Codelab zurate ziehen ( Firebase für Flutter kennenlernen).
5. Firebase Analytics in Flutter konfigurieren
In diesem Schritt verwenden Sie das Firebase Analytics-Paket firebase_analytics
, das Firebase Analytics-Funktionen enthält.
In der Veröffentlichungsdatei werden die Assets für eine Flutter-Anwendung verwaltet. Hängen Sie in pubspec.yaml
firebase_analytics: ^6.2.0
(firebase_analytics
6.2.0 oder höher) an die Liste der Abhängigkeiten an :
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.2
firebase_analytics: ^6.2.0 # add this line
Rufen Sie die Spezifikation in der Editoransicht von Android Studio auf und klicken Sie auf Pakete abrufen. Dadurch wird das Paket in Ihr Projekt geladen. In der Konsole sollten Sie Folgendes sehen:
flutter packages get
Running "flutter packages get" in startup_namer...
Process finished with exit code 0
Durch die Ausführung von Pub get
wird außerdem automatisch die Datei pubspec.lock
mit einer Liste aller in das Projekt geladenen Pakete und deren Versionsnummern generiert.
Importieren Sie das neue Paket in lib/main.dart
:
import 'package:firebase_analytics/firebase_analytics.dart';
Initiieren Sie in der MyApp
-Klasse das FirebaseAnalytics
-Objekt, indem Sie den Konstruktor aufrufen.
class MyApp extends StatelessWidget {
static FirebaseAnalytics analytics = FirebaseAnalytics();
...
}
Jetzt können Sie einige benutzerdefinierte Ereignislogs auslösen.
6. Benutzerdefinierte Ereignisse mit Firebase Analytics erfassen
Wenn Sie eine neue Vorlage in der Flutter-App generieren, sehen Sie die Variable _counter
und die Methode _incrementCounter()
in der Standardklasse State
. Nun möchten Sie benutzerdefinierte Ereignisse protokollieren, wenn die Inkrement-Schaltfläche mehr als fünfmal von besonders begeisterten Nutzern angeklickt wird. Später werden wir eine App-Kampagne starten, um potenzielle begeisterte Nutzer
Zuerst werden die initialisierten Analyseobjekte an das Stateful
-Widget übergeben. Zuerst fügen wir dem MyHomePage
-Konstruktor einen Analyseparameter hinzu.
MyHomePage({Key key, this.title, this.analytics}) : super(key: key);
Sie fügen auch einen Analyseparameter hinzu, wenn Sie den Konstruktor aufrufen.
home: MyHomePage(
title: 'Flutter Demo Home Page',
analytics: analytics,
),
Jetzt können Sie Ereignisse ganz einfach mit der Methode logEvent()
protokollieren. Fügen Sie die Methode hinzu und erhöhen Sie die Variable _counter
.
void _incrementCounter() {
setState(() {
_counter++;
//add this
if(_counter > 5) {
widget.analytics.logEvent(name: "clicked_counter");
}
});
}
Jetzt ist Ihre App bereit, das benutzerdefinierte Ereignisprotokoll auszulösen.
Sie können auch vordefinierte Methoden zum Auslösen von Ereignissen verwenden.
Jetzt ist alles bereit. Führen Sie in Android Studio "main.dart" aus.
Optional: Zusätzliche Informationen mithilfe von Parametern an Firebase Analytics senden
Über Parameter können Sie zusätzliche Informationen senden. Benutzerdefinierte Parameter können für Berichte in Analytics-Berichten registriert werden. Sie können auch als Filter in Zielgruppendefinitionen verwendet werden, die auf die einzelnen Berichte angewendet werden können. Wenn Ihre App mit einem BigQuery-Projekt verknüpft ist, sind benutzerdefinierte Parameter auch in BigQuery vorhanden (siehe BigQuery Export für Firebase).
Wir legen hier den Wert _counter
als Parameter fest.
void _incrementCounter() {
setState(() {
_counter++;
if(_counter > 5) {
widget.analytics.logEvent(name: "clicked_counter", parameters: {'count' : _counter});
}
});
}
Ereignisse prüfen und Fehler beheben
Nach einigen Stunden können Sie die protokollierten Ereignisse in der Firebase Console sehen. Klicken Sie einfach im Analytics-Bereich der Firebase Console auf den Tab Ereignisse. Sie können auch die Werte im Ereignis clicked_counter
prüfen, indem Sie einfach auf das Ereignis klicken.
Sie können clicked_counter
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.
7. 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.
- Rufen Sie die Firebase-Einstellungen auf, indem Sie auf die Schaltfläche neben Projektübersicht klicken.
- Auf dem Tab Integrationen sehen Sie Google Ads und die Schaltfläche Verknüpfen. Klicken Sie auf Verknüpfen und dann auf Weiter.
- Wählen Sie Google Ads-Konto aus.
Jetzt ist der Firebase-Teil abgeschlossen.
Rufen Sie Google Ads auf.
- Melden Sie sich an und rufen Sie Tools und Einstellungen > Messung > Conversions, um benutzerdefinierte Ereignisse als Conversions zu importieren.
- Klicken Sie auf die Schaltfläche +, um neue Conversion-Aktionen hinzuzufügen.
- Wählen Sie Google Analytics 4-Properties (Firebase) aus und klicken Sie auf Weiter.
- Hier sehen Sie alle Analytics-Ereignisse, die als Conversions markiert sind. Suchen Sie das
clicked_counter
-Ereignis, das wir zuvor implementiert haben.
- Prüfen Sie die Aktion, klicken Sie auf Importieren und dann auf Weiter.
Nachdem Sie „clicked_counter
“ als Conversion-Aktion festgelegt haben, können Sie Aktionskampagnen starten, die auf Nutzer ausgerichtet sind, die wahrscheinlich mehr als fünfmal clicked_counter
-Ereignisse auslösen.
8. App-Aktionskampagnen mit importierten Ereignissen starten
- 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.
- Starten Sie eine App-Werbekampagne mit der Option App-Installationen.
- Suchen Sie Ihre App, indem Sie den Namen der App, den Paketnamen oder den Publisher eingeben.
- Wählen Sie im Bereich Gebote die Option In-App-Aktionen aus dem Drop-down-Menü aus.
- 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.
- Schließen Sie die Kampagneneinstellungen ab.
9. Glückwunsch
Sie haben Firebase und Google Ads erfolgreich integriert. So lässt sich die Kampagnenleistung mit importierten Firebase-Ereignissen steigern.
Sie haben gelernt,
- Firebase Analytics für Flutter konfigurieren
- Anleitung zum Protokollieren benutzerdefinierter Ereignisse mit Firebase Analytics in der Flutter-App.
- Ereignisse importieren und für Aktionskampagnen verwenden