Lancer des campagnes Google Ads avec des événements personnalisés Google Analytics et Flutter

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.

Remarque : Si votre IDE ne propose pas d'option pour créer un projet Flutter, assurez-vous que les plug-ins Flutter et Dart sont installés.

1. 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
2. Sélectionnez Flutter Application (Application Flutter) comme type de projet, puis cliquez sur Next (Suivant).
3. 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.)
4. Saisissez le nom du projet, puis cliquez sur Suivant.
5. Utilisez le nom de package par défaut suggéré par Android Studio, puis cliquez sur Next (Suivant).
6. Cliquez sur Finish (Terminer).
7. 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

1. 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).

2. 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

1. 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.

2. Il est important d'indiquer le nom du package Android (voir l'étape suivante pour l'obtenir).

Conseil : Pour en savoir plus sur les ID de package et d'application, consultez l'article Set the application ID (Définir l'ID d'application).

3. Dans le répertoire de votre application Flutter, ouvrez le fichier android/app/src/main/AndroidManifest.xml.
4. Dans l'élément manifest, recherchez la valeur de chaîne de l'attribut package (elle correspond au nom du package Android tel que com.yourcompany.yourproject), puis copiez-la.
5. Dans la boîte de dialogue Firebase, collez ce nom de package dans le champ Android package name.
6. 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.
7. Cliquez sur Enregistrer l'application.
8. Dans Firebase, suivez les instructions pour télécharger le fichier de configuration google-services.json.

9. 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épertoire android/app.
10. Retournez dans la console Firebase, ignorez les étapes restantes, puis revenez à la page principale de la console Firebase.
11. Enfin, pour lire le fichier google-services.json généré par Firebase, vous avez besoin du plug-in Gradle des services Google.
12. 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'

13. Ouvrez android/build.gradle, puis dans la balise buildscript, ajoutez une nouvelle dépendance :

buildscript { 
   repositories {
      // ...
   }
   dependencies {
      // ...
      Classpath 'com.google.gms:google-services:4.3.3'
   }
}

14. 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.

Attention:Pour des versions spécifiques de Firebase, java.lang.IllegalArgumentException: Service not registered s'affiche lors de la première initialisation de la classe FirebaseAnalytics (voir le problème 1662 GitHub)..

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.

1. Accédez aux paramètres Firebase en cliquant sur le bouton à côté de Vue d'ensemble du projet.
2. Dans l'onglet Intégrations, Google Ads et un bouton Associer s'affichent. Cliquez sur Associer, puis sur Continuer.

3. Sélectionnez un compte Google Ads.

Attention:Si l'événement cible n'est pas marqué comme événement de conversion, Google Ads ne pourra pas l'importer. Assurez-vous que l'événement est correctement marqué en tant que conversion.

La partie dans Firebase est maintenant terminée.

Accédez à Google Ads.

1. Connectez-vous et accédez à Outils et Paramètres > Mesure > "Conversions" pour importer des événements personnalisés en tant que conversions.
2. Cliquez sur le bouton + pour ajouter des actions de conversion.

3. Sélectionnez Propriétés Google Analytics 4 (Firebase), puis cliquez sur Continuer.

4. 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.

5. 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

Important : Pour réussir le lancement d'une campagne pour applications, vous devez télécharger une application de production dans Google Play. Toutefois, si vous n'êtes pas encore prêt pour la publication, vous pouvez ignorer cette étape pour le moment.

6. 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.
7. Lancez une campagne de promotion d'une application avec l'option Installations d'applications.

8. Recherchez votre application en saisissant son nom, le nom du package ou l'éditeur.
9. Dans la section Enchères, sélectionnez Actions dans l'application dans le menu déroulant.
10. Recherchez votre événement personnalisé dans la liste fournie. Définissez le Coût par action cible et configurez les éventuelles options supplémentaires.

11. 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