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

Dernière mise à jour : 25/01/2021

Ce que vous allez faire

Cet atelier de programmation explique comment implémenter des événements personnalisés avec Google Analytics pour Firebase et lancer des campagnes d'action via Google Ads pour une application Flutter.

Nous allons utiliser l'application Flutter par défaut avec un simple widget compteur. Nous ferons la promotion de l'application auprès d'utilisateurs potentiels, susceptibles de cliquer sur ce widget.

bdbf1fc3cbf49ac7.png

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 d'action avec des événements personnalisés

Ce dont vous avez besoin

  • Android Studio 3.6 ou version ultérieure
  • Xcode (pour la compatibilité avec iOS)
  • Compte Firebase
  • Compte Google Ads

Créez une application Flutter simple à partir d'un modèle. Pour cet atelier de programmation, vous allez modifier cette application de départ.

Lancez Android Studio.

  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 File > New > New Flutter Project (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 "Next" (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.

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 donnez-lui le nom de votre choix.

e9a8e1b1c7c52125.png

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

e58151a081f0628.png

Pour en savoir plus sur les projets Firebase, consultez la page Comprendre les projets Firebase.

3e5b8f1b6ca538c4.png

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 ci-dessous s'affiche.

3b7d3b33d81fe8ea.png

  1. Il est important d'indiquer le nom du package Android (voir l'étape suivante pour l'obtenir).
  1. Dans le répertoire de votre application Flutter, ouvrez le fichier android/app/src/main/AndroidManifest.xml.
  2. 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.
  3. Dans la boîte de dialogue Firebase, collez ce nom de package dans le champ Android package name.
  4. 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.
  5. Cliquez sur Enregistrer l'application.
  6. Dans Firebase, suivez les instructions pour télécharger le fichier de configuration google-services.json.

52f08aa18c8d59d0.png

  1. 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.
  2. Retournez dans la console Firebase, ignorez les étapes restantes, puis revenez à la page principale de la console Firebase.
  3. Enfin, pour lire le fichier google-services.json généré par Firebase, vous avez besoin du plug-in Gradle des services Google.
  4. 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'
  1. 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'
   }
}
  1. 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 l'atelier de programmation Découvrez Firebase pour Flutter.

À cette étape, vous allez utiliser le package Firebase Analytics intitulé firebase_analytics (lequel contient les fonctionnalités de 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, vous allez lancer 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.

Si vous deviez générer un nouveau modèle dans l'application Flutter, vous verriez la variable _counter et la méthode _incrementCounter() dans la classe "State" par défaut. Vous voulez maintenant consigner des événements personnalisés lorsque des utilisateurs cliquent plus de cinq fois sur le bouton d'incrémentation.

Plus tard, nous allons lancer des campagnes pour applications, spécialement conçues pour attirer des utilisateurs potentiels qui interagiront activement avec votre application.

Tout d'abord, nous voulons transmettre au widget "Stateful" les objets analytiques que nous avons initialisés. 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,
),

Vous pouvez maintenant consigner des événements facilement avec la méthode logEvent(). Indiquez la méthode suivie en augmentant 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.

f0742c956977df1d.png

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 également définir des paramètres pour envoyer des informations supplémentaires (par exemple, des paramètres personnalisés pour 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 la page 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 suffit de cliquer sur l'onglet "Événements" dans la section "Analytics" de la console Firebase. Vous pouvez également vérifier les valeurs de l'événement clicked_counter en cliquant simplement sur celui-ci.

32b01a1412ab2ba5.png

Pour marquer l'événement clicked_counter en tant que conversion, faites glisser le bouton bascule "Marquer comme conversion" vers la droite.

e6b420a73db88f03.png

Pour vérifier si l'événement a bien été marqué comme conversion, effectuez une seconde vérification. Si l'événement figure dans l'onglet "Conversion", c'est qu'il a bien été enregistré en tant que conversion. Une fois que vous avez marqué cet événement comme conversion, Google Ads peut l'importer depuis Firebase.

Toutefois, à des fins de débogage, vous pouvez utiliser Firebase DebugView. Pour en savoir plus, consultez la section Événements de débogage.

Une fois la configuration de Firebase-Flutter terminée, vous pouvez lancer des campagnes pour applications avec des événements d'action. Vous devez d'abord associer Firebase à Google Ads. Une fois cette association effectuée, 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. Cliquez sur le bouton situé à côté de "Vue d'ensemble du projet" pour accéder aux paramètres de Firebase.
  2. Dans l'onglet "Intégrations", Google Ads et un bouton "Associer" sont affichés. Cliquez sur "Associer", puis sur "Continuer".

b711bf2e94fa0895.png

  1. Sélectionnez un compte Google Ads.

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.

73cec8d2e80eab03.png

  1. Sélectionnez les propriétés Google Analytics 4 (Firebase), puis cliquez sur "Continuer".

4b1d8f6a712b2ac6.png

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

ba1bbe6b2924fac8.png

  1. Cochez l'événement, puis cliquez sur le bouton "Importer et continuer".

ab35e341dff32e48.png

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.

  1. Accédez à l'onglet "Campagne" de votre compte actuel et créez une campagne en cliquant sur le bouton "+". Cliquez sur [Nouvelle campagne], puis continuez.
  2. Vous allez lancer une campagne de promotion d'applications et sélectionner l'option "Installations d'applications".

af98c44d1476558.png

  1. Recherchez votre application en saisissant son nom, le nom du package ou l'éditeur.
  2. Dans la section "Enchères", sélectionnez "Actions dans l'application" dans le menu déroulant.
  3. Votre événement personnalisé figure dans la liste affichée. Définissez un coût par action cible, ainsi que les options souhaitées.

885956ad00592eb3.png

  1. Terminez la configuration de votre campagne.

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 une application Flutter
  • Importer des événements et les utiliser pour des campagnes d'action