1. Introduction
Dernière mise à jour : 25/01/2021
Objectifs de l'atelier
Dans cet atelier de programmation, vous allez apprendre à implémenter des événements personnalisés avec GA4F et à lancer des campagnes pour l'action via Google Ads pour l'application Flutter.
Nous allons utiliser l'application Flutter par défaut avec un simple widget compteur. Nous ferons la promotion de notre application auprès d'utilisateurs potentiels, qui seront susceptibles de cliquer sur le widget compteur.
Ce que vous allez apprendre
- Initialiser Google Analytics pour Firebase dans Flutter
- Créer des événements et des paramètres personnalisés
- Importer des événements depuis Firebase vers Google Ads
- Lancer des campagnes pour l'action avec des événements personnalisés
Prérequis
- Android Studio 3.6 ou version ultérieure
- Xcode (pour la compatibilité avec iOS)
- Compte Firebase
- Compte Google Ads
2. Démarrer un nouveau projet Flutter
Créer une application Flutter simple à partir d'un modèle Vous allez modifier cette application de démarrage pour cet atelier de programmation.
Lancez Android Studio.
- Si vous n'avez pas de projets ouverts, sélectionnez Start a new Flutter app (Démarrer une nouvelle application Flutter) sur la page d'accueil. Sinon, sélectionnez Fichier > Nouveau > Nouveau projet Flutter
- Sélectionnez Flutter Application (Application Flutter) comme type de projet, puis cliquez sur Next (Suivant).
- Vérifiez que le chemin d'accès au SDK Flutter spécifie l'emplacement du SDK. (Sélectionnez Install SDK (Installer le SDK) si le champ de texte est vide.)
- Saisissez le nom du projet, puis cliquez sur Suivant.
- Utilisez le nom de package par défaut suggéré par Android Studio, puis cliquez sur Next (Suivant).
- Cliquez sur Finish (Terminer).
- Attendez qu'Android Studio installe le SDK et crée le projet.
3. Créer et configurer un projet Firebase
Pour commencer à utiliser Firebase, vous devez créer et configurer un projet Firebase.
Créer un projet Firebase
- Connectez-vous à Firebase.
Dans la console Firebase, cliquez sur "Ajouter un projet" (ou "Créer un projet"), puis nommez votre projet Firebase "Firebase-Flutter-Ads" (ou tout autre nom de votre choix).
- Cliquez sur les options de création de projet souhaitées. Si vous y êtes invité, acceptez les conditions d'utilisation de Firebase. Nous vous conseillons d'activer Google Analytics pour ce projet, car vous aurez besoin d'événements Google Analytics pour suivre les événements d'action et analyser les conversions.
Pour en savoir plus sur les projets Firebase, consultez Comprendre les projets Firebase.
4. Configuration Firebase spécifique à la plate-forme (Android)
Configurer Android
- Dans la console Firebase, sélectionnez Vue d'ensemble du projet dans le menu de navigation de gauche, puis cliquez sur le bouton Android sous "Lancez-vous en ajoutant Firebase à votre application".
La boîte de dialogue s'affiche sur l'écran suivant.
- Il est important d'indiquer le nom du package Android (voir l'étape suivante pour l'obtenir).
- Dans le répertoire de votre application Flutter, ouvrez le fichier
android/app/src/main/AndroidManifest.xml
. - Dans l'élément
manifest
, recherchez la valeur de chaîne de l'attributpackage
(elle correspond au nom du package Android tel quecom.yourcompany.yourproject
), puis copiez-la. - Dans la boîte de dialogue Firebase, collez ce nom de package dans le champ
Android package name
. - La clé SHA-1 n'est pas nécessaire ici, sauf si vous comptez utiliser Google Sign In ou Firebase Dynamic Links (notez que ces fonctionnalités ne sont pas utilisées dans cet atelier de programmation). En revanche, vous devrez la définir plus tard si vous prévoyez d'importer des données
in_app_purchase
depuis Google Play. - Cliquez sur Enregistrer l'application.
- Dans Firebase, suivez les instructions pour télécharger le fichier de configuration
google-services.json
.
- Accédez au répertoire de votre application Flutter, puis déplacez le fichier
google-services.json
(que vous venez de télécharger) dans le répertoireandroid/app
. - Retournez dans la console Firebase, ignorez les étapes restantes, puis revenez à la page principale de la console Firebase.
- Enfin, pour lire le fichier
google-services.json
généré par Firebase, vous avez besoin du plug-in Gradle des services Google. - Dans votre IDE ou éditeur, ouvrez
android/app/build.gradle
, puis ajoutez ce qui suit en dernière ligne du fichier :
apply plugin: 'com.google.gms.google-services'
- Ouvrez
android/build.gradle
, puis dans la balisebuildscript
, ajoutez une nouvelle dépendance :
buildscript {
repositories {
// ...
}
dependencies {
// ...
Classpath 'com.google.gms:google-services:4.3.3'
}
}
- Si votre application est toujours en cours d'exécution, fermez-la et recompilez-la pour que Gradle puisse installer la dépendance.
La configuration de votre application Flutter pour Android est à présent terminée. Pour iOS, vous pouvez consulter cet atelier de programmation ( Découvrir Firebase pour Flutter).
5. Configurer Firebase Analytics dans Flutter
Au cours de cette étape, vous allez commencer à utiliser le package Firebase Analytics nommé firebase_analytics
, qui contient des fonctionnalités Firebase Analytics.
Le fichier pubspec gère les éléments d'une application Flutter. Dans pubspec.yaml
, ajoutez firebase_analytics: ^6.2.0
(firebase_analytics
6.2.0 ou version ultérieure) à la liste de dépendances :
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.2
firebase_analytics: ^6.2.0 # add this line
Lorsque vous affichez le fichier pubspec dans la vue de l'éditeur d'Android Studio, cliquez sur Packages get. Le package est alors intégré à votre projet. Vous devriez obtenir le résultat suivant dans la console :
flutter packages get
Running "flutter packages get" in startup_namer...
Process finished with exit code 0
L'exécution de Pub get
génère également automatiquement le fichier pubspec.lock
qui contient la liste de tous les packages intégrés au projet ainsi que leurs numéros de version.
Dans lib/main.dart
, importez le nouveau package :
import 'package:firebase_analytics/firebase_analytics.dart';
Dans la classe MyApp
, lancez l'objet FirebaseAnalytics
en appelant le constructeur.
class MyApp extends StatelessWidget {
static FirebaseAnalytics analytics = FirebaseAnalytics();
...
}
Vous êtes maintenant prêt à déclencher des journaux d'événements personnalisés.
6. Consigner des événements personnalisés avec Firebase Analytics
Si vous générez un nouveau modèle dans l'application Flutter, vous verrez une variable _counter
et la méthode _incrementCounter()
dans la classe State
par défaut. Vous voulez maintenant consigner des événements personnalisés lorsque l'utilisateur clique plus de cinq fois sur le bouton d'incrémentation de la part d'utilisateurs trop enthousiastes. Plus tard, nous lancerons une campagne pour applications afin d'attirer des utilisateurs potentiels
Tout d'abord, nous voulons transmettre les objets analytiques que nous avons initialisés au widget Stateful
. Nous commençons par ajouter un paramètre d'analyse au constructeur MyHomePage
.
MyHomePage({Key key, this.title, this.analytics}) : super(key: key);
Vous allez également ajouter un paramètre d'analyse lorsque le constructeur est appelé.
home: MyHomePage(
title: 'Flutter Demo Home Page',
analytics: analytics,
),
Désormais, vous pouvez facilement enregistrer des événements à l'aide de la méthode logEvent()
. Ajoutez la méthode et incrémentez la variable _counter
.
void _incrementCounter() {
setState(() {
_counter++;
//add this
if(_counter > 5) {
widget.analytics.logEvent(name: "clicked_counter");
}
});
}
Votre application est désormais prête à déclencher le journal d'événements personnalisés.
Vous pouvez également utiliser des méthodes prédéfinies pour déclencher des événements.
Tout est prêt. Dans Android Studio, exécutez "main.dart".
(Facultatif) Envoyer d'autres informations à Firebase Analytics à l'aide de paramètres
Vous pouvez envoyer des informations supplémentaires via des paramètres. Vous pouvez enregistrer des paramètres personnalisés pour la création de rapports dans vos rapports Analytics. Ils peuvent aussi servir de filtres dans les définitions d'audience applicables à chaque rapport. Si votre application est associée à un projet BigQuery, les paramètres personnalisés sont également disponibles dans BigQuery (consultez BigQuery Export pour Firebase).
Nous définissons ici la valeur _counter
comme paramètre.
void _incrementCounter() {
setState(() {
_counter++;
if(_counter > 5) {
widget.analytics.logEvent(name: "clicked_counter", parameters: {'count' : _counter});
}
});
}
Vérifier et déboguer des événements
Dans quelques heures, vous pourrez voir vos événements consignés dans la console Firebase. Il vous suffit de cliquer sur l'onglet Événements dans la section "Analytics" de la console Firebase. Vous pouvez également vérifier les valeurs dans l'événement clicked_counter
en cliquant simplement dessus.
Marquez clicked_counter
comme conversion en faisant glisser le bouton bascule Marquer comme conversion vers la droite.
Si l'événement se trouve dans l'onglet "Conversions", cela signifie qu'il a bien été marqué comme conversion. Google Ads peut désormais importer cet événement à partir de Firebase.
Pour le débogage, utilisez Firebase DebugView. Pour en savoir plus, consultez la section Événements de débogage.
7. Importer des événements d'analyse dans Google Ads
Une fois la configuration de Firebase-Flutter terminée, vous pouvez lancer les campagnes pour applications comportant des événements d'action. Commencez par associer Firebase à Google Ads. Si vous associez Firebase à Google Ads,les campagnes pour applications peuvent importer des événements Firebase. Cela permet également à Google Ads d'optimiser les campagnes pour applications en ayant davantage d'informations sur les audiences.
- Accédez aux paramètres Firebase en cliquant sur le bouton à côté de Vue d'ensemble du projet.
- Dans l'onglet Intégrations, Google Ads et un bouton Associer s'affichent. Cliquez sur Associer, puis sur Continuer.
- Sélectionnez un compte Google Ads.
La partie dans Firebase est maintenant terminée.
Accédez à Google Ads.
- Connectez-vous et accédez à Outils et Paramètres > Mesure > "Conversions" pour importer des événements personnalisés en tant que conversions.
- Cliquez sur le bouton + pour ajouter des actions de conversion.
- Sélectionnez Propriétés Google Analytics 4 (Firebase), puis cliquez sur Continuer.
- Vous pouvez consulter tous les événements d'analyse marqués comme conversions. Recherchez l'événement
clicked_counter
que nous avons implémenté précédemment.
- Cochez l'action, cliquez sur Importer,puis sur Continuer.
Après avoir défini clicked_counter
comme action de conversion, vous pouvez lancer des campagnes d'action qui peuvent cibler les utilisateurs susceptibles de déclencher des événements clicked_counter
plus de cinq fois.
8. Lancer des campagnes d'action dans l'application avec des événements importés
- Accédez à l'onglet "Campagnes" de votre compte actuel, puis créez une campagne en cliquant sur le bouton +. Cliquez sur [Nouvelle campagne], puis sur Continuer.
- Lancez une campagne de promotion d'une application avec l'option Installations d'applications.
- Recherchez votre application en saisissant son nom, le nom du package ou l'éditeur.
- Dans la section Enchères, sélectionnez Actions dans l'application dans le menu déroulant.
- Recherchez votre événement personnalisé dans la liste fournie. Définissez le Coût par action cible et configurez les éventuelles options supplémentaires.
- Terminez la configuration de votre campagne.
9. Félicitations
Félicitations, vous avez intégré Firebase et Google Ads ! Vous allez pouvoir améliorer les performances de votre campagne avec des événements Firebase importés.
Ce que vous avez appris
- Configurer Firebase Analytics pour Flutter
- Consigner des événements personnalisés avec Firebase Analytics dans l'application Flutter
- Importer des événements et les utiliser pour des campagnes d'action