Ajouter des annonces AdMob à une application Flutter

Objectifs de l'atelier

Dans cet atelier de programmation, vous allez apprendre comment ajouter une bannière AdMob, une annonce interstitielle et une annonce avec récompense à Awesome Draw Quiz, un jeu où il faut deviner à quoi correspond un dessin.

Si vous rencontrez des problèmes (bugs de code, erreurs grammaticales, formulation peu claire, etc.) au cours de cet atelier de programmation, veuillez les signaler en cliquant sur le lien Signaler une erreur situé dans l'angle inférieur gauche de l'atelier de programmation.

Points abordés

  • Configurer un projet Firebase pour une application Flutter
  • Configurer le plug-in AdMob pour Firebase
  • Utiliser des bannières, des interstitiels et des annonces avec récompense dans une application Flutter

Prérequis

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

Comment évalueriez-vous votre niveau d'expérience avec AdMob ?

Débutant Intermédiaire Expert

Qu'attendez-vous de cet atelier de programmation ?

Je suis novice en la matière et je voudrais avoir un bon aperçu. Je connais un peu le sujet, mais j'aimerais revoir certains points. Je recherche un exemple de code à utiliser dans mon projet. Je cherche des explications sur un point spécifique.

Configurer l'environnement de développement Flutter

  1. Installez le SDK Flutter sur votre ordinateur en suivant les instructions d'installation sur flutter.dev.
  2. Ouvrez Android Studio, puis suivez les étapes indiquées dans la page de configuration pour installer les plug-ins Flutter et Dart pour Android Studio.

Télécharger le code

Pour télécharger l'ensemble du code de cet atelier de programmation dans un fichier ZIP, cliquez sur le bouton ci-dessous :

Télécharger le code source

Extrayez les fichiers inclus dans le fichier compressé. Cette action décompresse le dossier racine, nommé admob-ads-in-flutter-master.

Vous pouvez également cloner le dépôt GitHub à partir de la ligne de commande.

$ git clone https://github.com/googlecodelabs/admob-ads-in-flutter

Le dépôt contient deux dossiers :

  • android_studio_folder.pngstarter : code de démarrage sur lequel s'appuie cet atelier de programmation
  • android_studio_folder.pngcomplete : code final de cet atelier de programmation

Importer le projet de démarrage

  1. Ouvrez Android Studio.
  2. Sur l'écran d'accueil, sélectionnez Ouvrir un projet Android Studio existant. a3a1fa1afc967e37.png
  3. Ouvrez le dossier android_studio_folder.pngstarter à partir du code que vous avez téléchargé à l'étape précédente.

a879fa2385ba368f.png

  1. Les messages d'erreur suivants peuvent s'afficher dans l'onglet Dart Analysis. Cette erreur ne se produit qu'une seule fois lorsque vous importez le projet existant dans Android Studio, car les packages utilisés dans l'exemple de projet ne sont pas encore téléchargés.

2b8fbccf84e1e8a5.png

  1. Pour corriger l'erreur, cliquez sur Get dependencies (Télécharger les dépendances) en haut du volet de l'éditeur. Les packages dont dépend l'exemple de projet seront ainsi téléchargés.

dc017166e44ac333.png

  1. Une fois le téléchargement terminé, aucune erreur ne doit s'afficher dans l'onglet Dart Analysis. Votre projet est maintenant prêt pour le développement.

Vous devez configurer un projet Firebase pour diffuser des annonces AdMob avec le plug-in AdMob pour Firebase.

Créer un projet Firebase

  1. Dans la console Firebase, cliquez sur Ajouter un projet.
  2. Saisissez Awesome Drawing Quiz comme nom de projet.
  3. Activez Google Analytics pour votre projet, puis cliquez sur Continuer.

87590d75b00db648.png

  1. Choisissez l'emplacement des données analytiques et les paramètres qui s'appliquent à votre projet. Lisez et acceptez les conditions d'utilisation, puis cliquez sur Créer un projet.

700c64d82fedbd0b.png

  1. Au bout d'une minute environ, votre projet Firebase est prêt.

Enregistrer l'application auprès de Firebase

Dans la console Firebase, sélectionnez le projet Awesome Draw Quiz que vous avez créé à l'étape précédente.

Enregistrer une application Android

  1. Au centre de la page de présentation du projet, cliquez sur l'icône Android pour lancer le processus de configuration.
  2. Saisissez com.codelab.awesomedrawingquiz dans le champ Nom du package Android.
  3. Saisissez Awesome Drawing Quiz (Android) dans le champ Pseudo de l'application.
  4. Cliquez sur Enregistrer l'application.
  5. Téléchargez le fichier google-services.json pour une utilisation future.

Enregistrer une application iOS

  1. Au centre de la page de présentation du projet, cliquez sur l'icône iOS ou sur l'icône "Ajouter une application" (+) pour lancer le processus de configuration.
  2. Saisissez com.codelab.awesomedrawingquiz dans le champ ID du groupe iOS.
  3. Saisissez Awesome Drawing Quiz (iOS) dans le champ Pseudo de l'application.
  4. Cliquez sur Enregistrer l'application.
  5. Téléchargez le fichier GoogleService-Info.plist pour une utilisation future.

Ajouter un fichier de configuration Firebase

Les instructions suivantes vous expliquent comment configurer Firebase pour Android et iOS.

Configurer pour Android

  1. Ouvrez le projet de starter dans Android Studio en vous reportant à la section Importer le projet de démarrage de l'étape Configurer l'environnement de développement de cet atelier de programmation.
  2. Déplacez le fichier google-services.json dans le répertoire android/app du projet Flutter Awesome Draw Quiz.

bd0729c424b0c79d.png

  1. Dans le fichier Gradle au niveau du projet (android/build.gradle), ajoutez des règles pour inclure le plug-in Gradle des services Google. Vérifiez que vous disposez du dépôt Maven de Google.

android/build.gradle

buildscript {

    repositories {
      // Check that you have the following line (if not, add it):
      google()  // Google's Maven repository
    }

    ...

    dependencies {
      ...

      // TODO: Add Google Services plugin
      classpath 'com.google.gms:google-services:4.3.3'
    }
}

allprojects {
    ...

    repositories {
      // Check that you have the following line (if not, add it):
      google()  // Google's Maven repository
      ...
    }
}
  1. Dans le fichier Gradle au niveau de l'application (android/app/build.gradle), appliquez le plug-in Gradle des services Google.

android/app/build.gradle

...

// TODO: Apply google-services plugin
apply plugin: 'com.google.gms.google-services'

android {
  ...
}

...

Configurer pour iOS

  1. Ouvrez le projet de starter dans Android Studio en vous reportant à la section Importer le projet de démarrage de l'étape Configurer l'environnement de développement de cet atelier de programmation.
  2. Ouvrez un fichier dans le répertoire ios (Par exemple : ios/Runner/AppDelegate.swift).
  3. Cliquez sur Open iOS Module in Xcode (Ouvrir le module iOS dans Xcode).

b0e50d31ada7bf46.png

  1. Dans Xcode, faites glisser le fichier GoogleService-Info.plist dans le répertoire Runner pour importer le fichier de configuration dans le projet Xcode.

1f552ff12b67008.png

Étant donné que Flutter est un SDK multiplate-forme, vous devez ajouter une application et des blocs d'annonces pour Android et iOS dans AdMob.

Avant de commencer, vous devez vous familiariser avec les glossaires AdMob suivants.

Bloc d'annonces

Le bloc d'annonces est un groupe d'annonces affichées en réponse à une portion du code d'annonce AdMob. Vous pouvez créer et personnaliser un bloc d'annonces dans votre compte AdMob.

Chaque bloc d'annonces possède un identifiant unique, appelé "ID du bloc d'annonces". Lorsque vous mettez en œuvre un nouveau bloc d'annonces dans votre application, vous référencez l'ID du bloc d'annonces pour indiquer aux réseaux publicitaires où envoyer des annonces à la demande.

Bannière

Les bannières sont diffusées dans une application, en haut ou en bas de l'écran de l'appareil. Elles restent à l'écran lorsque les utilisateurs interagissent avec l'application et peuvent s'actualiser automatiquement au bout d'un certain temps.

Annonce interstitielle

Les annonces interstitielles s'affichent en plein écran, recouvrant l'interface de l'application hôte. Elles sont généralement diffusées lors de points de transition naturels, par exemple entre deux activités ou pendant la pause entre les niveaux du jeu.

Annonce avec récompense

Les utilisateurs ont la possibilité d'interagir avec ce type d'annonces en échange d'une récompense dans une application.

Configurer pour Android

Cette section vous explique comment ajouter une application Android et des blocs d'annonces à AdMob.

Ajouter une application Android

Suivez les instructions ci-dessous pour ajouter une application Android à AdMob :

  1. Dans la console AdMob, cliquez sur AJOUTER UNE APPLICATION dans le menu Applications.
  2. Lorsque le message Avez-vous publié votre application sur Google Play ou sur l'App Store ? s'affiche, cliquez sur NON.
  3. Saisissez Awesome Drawing Quiz dans le champ du nom de l'application, puis sélectionnez la plate-forme Android.

152e1694fd0ce870.png

  1. Il n'est pas nécessaire d'activer les métriques utilisateur pour effectuer cet atelier de programmation. Toutefois, nous vous recommandons de le faire, car les données analytiques fournies vous permettront de comprendre plus en détail le comportement des utilisateurs. Cliquez sur ADD (Ajouter) pour terminer le processus.

5204925f5c652b41.png

  1. Notez votre nouvel ID d'application (ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy). Vous devrez l'ajouter au code source de l'exemple de projet pour pouvoir diffuser des annonces.

Créer des blocs d'annonces

Pour ajouter des blocs d'annonces à AdMob :

  1. Sélectionnez Awesome Drawing Quiz (Android) dans le menu Applications de la console AdMob.
  2. Cliquez sur le menu Blocs d'annonces.

Dans le menu Blocs d'annonces, suivez les instructions pour créer une bannière, une annonce interstitielle et un bloc d'annonce avec récompense.

Bannière

  1. Cliquez sur le bouton AJOUTER UN BLOC D'ANNONCES.
  2. Sélectionnez le format Bannière.
  3. Saisissez android-adq-banner dans le champ Nom du bloc d'annonces.
  4. Cliquez sur CRÉER UN BLOC D'ANNONCES pour terminer le processus.

Interstitiel

  1. Cliquez sur le bouton AJOUTER UN BLOC D'ANNONCES.
  2. Sélectionnez le format Interstitiel.
  3. Saisissez android-adq-interstitial dans le champ Nom du bloc d'annonces.
  4. Cliquez sur CRÉER UN BLOC D'ANNONCES pour terminer le processus.

Avec récompense

  1. Cliquez sur le bouton AJOUTER UN BLOC D'ANNONCES.
  2. Sélectionnez le format Avec récompense.
  3. Saisissez android-adq-rewarded dans le champ Nom du bloc d'annonces.
  4. Conservez la valeur par défaut pour les paramètres relatifs aux récompenses.
  5. Cliquez sur CRÉER UN BLOC D'ANNONCES pour terminer le processus.

Configurer pour iOS

Cette section vous explique comment ajouter une application iOS et des blocs d'annonces à AdMob.

Ajouter une application iOS

Suivez les instructions ci-dessous pour ajouter une application iOS à AdMob :

  1. Dans la console AdMob, cliquez sur AJOUTER UNE APPLICATION dans le menu Applications.
  2. Lorsque le message Avez-vous publié votre application sur Google Play ou sur l'App Store ? s'affiche, cliquez sur NON.
  3. Saisissez Awesome Drawing Quiz dans le champ du nom de l'application, puis sélectionnez la plate-forme iOS.

a8fa48af652021d8.png

  1. Il n'est pas nécessaire d'activer les métriques utilisateur pour effectuer cet atelier de programmation. Toutefois, nous vous recommandons de le faire, car les données analytiques fournies vous permettront de comprendre plus en détail le comportement des utilisateurs. Cliquez sur ADD (Ajouter) pour terminer le processus.

5204925f5c652b41.png

  1. Notez votre nouvel ID d'application (ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy). Vous devrez l'ajouter au code source de l'exemple de projet pour pouvoir diffuser des annonces.

Créer des blocs d'annonces

Pour ajouter des blocs d'annonces :

  1. Sélectionnez Awesome Drawing Quiz (iOS) dans le menu Applications de la console AdMob.
  2. Cliquez sur le menu Blocs d'annonces.

Dans le menu Blocs d'annonces, suivez les instructions pour créer une bannière, une annonce interstitielle et un bloc d'annonce avec récompense.

Bannière

  1. Cliquez sur le bouton AJOUTER UN BLOC D'ANNONCES.
  2. Sélectionnez le format Bannière.
  3. Saisissez ios-adq-banner dans le champ Nom du bloc d'annonces.
  4. Cliquez sur CRÉER UN BLOC D'ANNONCES pour terminer le processus.

Interstitiel

  1. Cliquez sur le bouton AJOUTER UN BLOC D'ANNONCES.
  2. Sélectionnez le format Interstitiel.
  3. Saisissez ios-adq-interstitial dans le champ Nom du bloc d'annonces.
  4. Cliquez sur CRÉER UN BLOC D'ANNONCES pour terminer le processus.

Avec récompense

  1. Cliquez sur le bouton AJOUTER UN BLOC D'ANNONCES.
  2. Sélectionnez le format Avec récompense.
  3. Saisissez ios-adq-rewarded dans le champ Nom du bloc d'annonces.
  4. Conservez la valeur par défaut pour les paramètres relatifs aux récompenses.
  5. Cliquez sur CRÉER UN BLOC D'ANNONCES pour terminer le processus.

(Facultatif) Utiliser l'application AdMob et les blocs d'annonces préconfigurés

Si vous souhaitez suivre l'atelier de programmation au lieu de créer vous-même une application et des blocs d'annonces, vous pouvez utiliser l'ID de l'application AdMob et les ID de blocs d'annonces préconfigurés indiqués ci-dessous.

Android

ID AdMob de test pour Android :

Élément

ID de l'application/ID du bloc d'annonces

ID de l'application AdMob

ca-app-pub-3940256099942544~4354546703

Bannière

ca-app-pub-3940256099942544/8865242552

Interstitiel

ca-app-pub-3940256099942544/7049598008

Avec récompense

ca-app-pub-3940256099942544/8673189370

iOS

ID AdMob de test pour iOS :

Élément

ID de l'application/ID du bloc d'annonces

ID de l'application AdMob

ca-app-pub-3940256099942544~2594085930

Bannière

ca-app-pub-3940256099942544/4339318960

Interstitiel

ca-app-pub-3940256099942544/3964253750

Avec récompense

ca-app-pub-3940256099942544/7552160883

Flutter utilise des plug-ins pour fournir un accès à un large éventail de services spécifiques à une plate-forme. Les plug-ins incluent du code spécifique à une plate-forme permettant d'accéder aux services et aux API sur chaque plate-forme.

Le plug-in firebase_admob permet de charger et d'afficher des bannières, des interstitiels et des annonces avec récompense à l'aide de l'API AdMob.

Étant donné que Flutter est un SDK multiplate-forme, le plug-in firebase_admob peut être utilisé pour iOS et Android. Si vous ajoutez le plug-in à votre application Flutter, il est utilisé à la fois par les versions Android et iOS de l'application Awesome Drawing Quiz.

Ajouter le plug-in Firebase en tant que dépendance

Pour accéder aux API AdMob à partir du projet Awesome Draw Quiz, ajoutez le plug-in firebase_admob en tant que dépendance au fichier pubspec.yaml situé à la racine du projet.

pubspec.yaml.

...

dependencies:
  flutter:
    sdk: flutter
  google_fonts: ^0.3.9

  # Add the following line
  firebase_admob: ^0.9.3

...

Cliquez sur Packages get pour installer le plug-in dans le projet Awesome Draw Quiz.

d9fc62bf4054cea9.png

Mettre à jour le fichier AndroidManifest.xml (Android)

  1. Ouvrez le fichier android/app/src/main/AndroidManifest.xml dans Android Studio.
  2. Ajoutez votre ID d'application AdMob en ajoutant une balise <meta-data> et en saisissant com.google.android.gms.ads.APPLICATION_ID. Si l'ID de votre application AdMob est ca-app-pub-3940256099942544~3347511713, ajoutez les lignes suivantes au fichier AndroidManifest.xml.

android/app/src/main/AndroidManifest.xml

<manifest>
    ...
    <application>
       ...
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-3940256099942544~3347511713"/>
    </application>

</manifest>

Mettre à jour le fichier Info.plist (iOS)

  1. Ouvrez le fichier ios/Runner/Info.plist dans Android Studio.
  2. Ajoutez une clé GADApplicationIdentifier avec la valeur de chaîne de l'ID de votre application AdMob. Par exemple, si l'ID de votre application AdMob est ca-app-pub-3940256099942544~1458002511, ajoutez les lignes suivantes au fichier Info.plist.

ios/Runner/Info.plist

...
<key>GADApplicationIdentifier</key>
<string>ca-app-pub-3940256099942544~1458002511</string>
...

Créez un fichier nommé ad_manager.dart dans le répertoire lib. Ensuite, mettez en œuvre la classe AdManager, qui fournit un ID d'application AdMob et des ID de bloc d'annonces pour Android et iOS.

Assurez-vous de remplacer l'ID d'application AdMob (ca-app-pub-xxxxxx~yyyyy) et l'ID du bloc d'annonces (ca-app-pub-xxxxxxx/yyyyyyyy) par les ID que vous avez créés à l'étape précédente.

lib/ad_manager.dart

import 'dart:io';

class AdManager {

  static String get appId {
    if (Platform.isAndroid) {
      return "<YOUR_ANDROID_ADMOB_APP_ID>";
    } else if (Platform.isIOS) {
      return "<YOUR_IOS_ADMOB_APP_ID>";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }

  static String get bannerAdUnitId {
    if (Platform.isAndroid) {
      return "<YOUR_ANDROID_BANNER_AD_UNIT_ID";
    } else if (Platform.isIOS) {
      return "<YOUR_IOS_BANNER_AD_UNIT_ID>";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }

  static String get interstitialAdUnitId {
    if (Platform.isAndroid) {
      return "<YOUR_ANDROID_INTERSTITIAL_AD_UNIT_ID>";
    } else if (Platform.isIOS) {
      return "<YOUR_IOS_INTERSTITIAL_AD_UNIT_ID>";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }

  static String get rewardedAdUnitId {
    if (Platform.isAndroid) {
      return "<YOUR_ANDROID_REWARDED_AD_UNIT_ID>";
    } else if (Platform.isIOS) {
      return "<YOUR_IOS_REWARDED_AD_UNIT_ID>";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }
}

Servez-vous de l'extrait de code suivant si vous souhaitez utiliser l'ID de l'application AdMob et les ID de blocs d'annonces préconfigurés.

lib/ad_manager.dart

import 'dart:io';

class AdManager {

  static String get appId {
    if (Platform.isAndroid) {
      return "ca-app-pub-3940256099942544~4354546703";
    } else if (Platform.isIOS) {
      return "ca-app-pub-3940256099942544~2594085930";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }

  static String get bannerAdUnitId {
    if (Platform.isAndroid) {
      return "ca-app-pub-3940256099942544/8865242552";
    } else if (Platform.isIOS) {
      return "ca-app-pub-3940256099942544/4339318960";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }

  static String get interstitialAdUnitId {
    if (Platform.isAndroid) {
      return "ca-app-pub-3940256099942544/7049598008";
    } else if (Platform.isIOS) {
      return "ca-app-pub-3940256099942544/3964253750";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }

  static String get rewardedAdUnitId {
    if (Platform.isAndroid) {
      return "ca-app-pub-3940256099942544/8673189370";
    } else if (Platform.isIOS) {
      return "ca-app-pub-3940256099942544/7552160883";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }
}

Avant de charger les annonces, vous devez initialiser le SDK AdMob. Ouvrez le fichier lib/home_route.dart et modifiez _initAdMob() pour initialiser le SDK avant le début du jeu.

lib/home_route.dart

// TODO: Import ad_manager.dart
import 'package:awesome_drawing_quiz/ad_manager.dart';

import 'package:awesome_drawing_quiz/app_theme.dart';

// TODO: Import firebase_admob.dart
import 'package:firebase_admob/firebase_admob.dart';

import 'package:flutter/material.dart';

...

class _HomeRouteState extends State<HomeRoute> {

  ...

  Future<void> _initAdMob() {
    // TODO: Initialize AdMob SDK
    return FirebaseAdMob.instance.initialize(appId: AdManager.appId);
  }
}

Dans cette section, vous ajoutez une bannière en haut de l'écran du jeu, comme illustré.

580a296a77065928.png 6d6659121dbf382e.png

Ouvrez le fichier lib/game_route.dart, puis importez ad_manager.dart et firebase_admob.dart en ajoutant les lignes suivantes :

lib/game_route.dart

...

// TODO: Import ad_manager.dart
import 'package:awesome_drawing_quiz/ad_manager.dart';

// TODO: Import firebase_admob.dart
import 'package:firebase_admob/firebase_admob.dart';

class GameRoute extends StatefulWidget {
  ...
}

Ensuite, dans la classe _GameRouteState, ajoutez le éléments et les méthodes suivants pour la bannière.

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  // TODO: Add _bannerAd
  BannerAd _bannerAd;

  ...

  // TODO: Implement _loadBannerAd()
  void _loadBannerAd() {
    _bannerAd
      ..load()
      ..show(anchorType: AnchorType.top);
  }

  ...
}

Dans la méthode initState(), créez un objet BannerAd, puis chargez la bannière. Notez que celle-ci est au format 320 x 50 (AdSize.banner).

lib/game_route.dart

@override
void initState() {
  ...

  // TODO: Initialize _bannerAd
  _bannerAd = BannerAd(
      adUnitId: AdManager.bannerAdUnitId,
      size: AdSize.banner,
  );

  // TODO: Load a Banner Ad
  _loadBannerAd();
}

Enfin, libérez la ressource associée à l'objet BannerAd en appelant la méthode BannerAd.dispose() dans la méthode de rappel dispose().

lib/game_route.dart

@override
void dispose() {
  // TODO: Dispose BannerAd object
  _bannerAd?.dispose();

  ...

  super.dispose();
}

Et voilà ! Exécutez le projet pour afficher une bannière en haut de l'écran du jeu.

d82f07411be93d37.png f221e4821191cf99.png

Dans cette section, vous affichez une annonce interstitielle à la fin du jeu (cinq niveaux au total).

Tout d'abord, dans la classe _GameRouteState, ajoutez les éléments et les méthodes suivants pour l'annonce interstitielle.

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  // TODO: Add _interstitialAd
  InterstitialAd _interstitialAd;

  // TODO: Add _isInterstitialAdReady
  bool _isInterstitialAdReady;

  ...

  // TODO: Implement _loadInterstitialAd()
  void _loadInterstitialAd() {
    _interstitialAd.load();
  }

  // TODO: Implement _onInterstitialAdEvent()
  void _onInterstitialAdEvent(MobileAdEvent event) {
    switch (event) {
      case MobileAdEvent.loaded:
        _isInterstitialAdReady = true;
        break;
      case MobileAdEvent.failedToLoad:
        _isInterstitialAdReady = false;
        print('Failed to load an interstitial ad');
        break;
      case MobileAdEvent.closed:
        _moveToHome();
        break;
      default:
      // do nothing
    }
  }

  ...
}

Ensuite, initialisez _isInterstitialAdReady et _interstitialAd dans la méthode initState(). Étant donné que _onInterstitialAdEvent est configuré en tant qu'écouteur d'événements d'annonce pour _interstitialAd, chaque événement publicitaire de _interstitialAd est transmis à la méthode _onInterstitialAdEvent.

lib/game_route.dart

@override
void initState() {
  ...

  // TODO: Initialize _isInterstitialAdReady
  _isInterstitialAdReady = false;

  // TODO: Initialize _interstitialAd
  _interstitialAd = InterstitialAd(
    adUnitId: AdManager.interstitialAdUnitId,
    listener: _onInterstitialAdEvent,
  );
}

Dans cet atelier de programmation, une annonce interstitielle s'affiche lorsque l'utilisateur termine les cinq niveaux du jeu. Afin de limiter le nombre de demandes d'annonces inutiles, l'annonce ne commence à être chargée que quand l'utilisateur atteint le niveau 3.

Dans la méthode onNewLevel(), ajoutez les lignes suivantes.

lib/game_route.dart

@override
void onNewLevel(int level, Drawing drawing, String clue) {
  ...

  // TODO: Load an Interstitial Ad
  if (level >= 3 && !_isInterstitialAdReady) {
    _loadInterstitialAd();
  }
}

Une fois le jeu terminé, la boîte de dialogue du score s'affiche. Lorsque l'utilisateur ferme la boîte de dialogue, il est redirigé vers l'écran d'accueil de Awesome Drawing Quiz.

Étant donné que les annonces interstitielles doivent s'afficher pendant une transition d'écran, nous diffusons l'annonce interstitielle lorsque l'utilisateur clique sur le bouton FERMER.

Modifiez la méthode onGameOver() comme suit :

lib/game_route.dart

@override
void onGameOver(int correctAnswers) {
  showDialog(
    context: _scaffoldKey.currentContext,
    builder: (context) {
      return AlertDialog(
        title: Text('Game over!'),
        content: Text('Score: $correctAnswers/5'),
        actions: <Widget>[
          FlatButton(
            child: Text('close'.toUpperCase()),
            onPressed: () {

              // TODO: Display an Interstitial Ad
              if (_isInterstitialAdReady) {
                _interstitialAd.show();
              }

              _moveToHome();
            },
          ),
        ],
      );
    },
  );
}

Enfin, libérez la ressource associée à l'objet InterstitialAd en appelant la méthode InterstitialAd.dispose() dans la méthode de rappel dispose().

lib/game_route.dart

@override
void dispose() {
  ...

  // TODO: Dispose InterstitialAd object
  _interstitialAd?.dispose();

  ...

  super.dispose();
}

Et voilà ! Exécutez le projet pour afficher une annonce interstitielle à la fin du jeu.

53f44b98e8a0c446.gif

Dans cette section, vous ajoutez une annonce avec récompense qui fournit à l'utilisateur un indice supplémentaire en tant que récompense.

Tout d'abord, ajoutez les éléments et les méthodes de l'annonce avec récompense dans la classe _GameRouteState. Notez que RewardedVideoAd est un objet singleton. Vous n'avez donc pas besoin d'élément pour gérer l'instance de la classe RewardedVideoAd.

RewardedVideoAdEvent.rewarded est l'événement d'annonce le plus important d'une annonce avec récompense. Il se déclenche lorsqu'un utilisateur peut recevoir une récompense (lorsqu'il a regardé l'intégralité d'une vidéo, par exemple). Dans cet atelier de programmation, RewardedVideoAdEvent.rewarded appelle la méthode QuizManager.instance.useHint() qui révèle un caractère supplémentaire sous forme d'indice.

De plus, selon l'événement d'annonce, RewardedVideoAdEvent.rewarded met à jour l'interface utilisateur en modifiant la valeur de _isRewardedAdReady. Notez que _isRewardedAdReady actualise l'annonce lorsque l'utilisateur la ferme, afin qu'elle soit le plus tôt possible.

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  // TODO: Add _isRewardedAdReady
  bool _isRewardedAdReady;

  ...

  // TODO: Implement _loadRewardedAd()
  void _loadRewardedAd() {
    RewardedVideoAd.instance.load(
      targetingInfo: MobileAdTargetingInfo(),
      adUnitId: AdManager.rewardedAdUnitId,
    );
  }

  // TODO: Implement _onRewardedAdEvent()
  void _onRewardedAdEvent(RewardedVideoAdEvent event,
      {String rewardType, int rewardAmount}) {
    switch (event) {
      case RewardedVideoAdEvent.loaded:
        setState(() {
          _isRewardedAdReady = true;
        });
        break;
      case RewardedVideoAdEvent.closed:
        setState(() {
          _isRewardedAdReady = false;
        });
        _loadRewardedAd();
        break;
      case RewardedVideoAdEvent.failedToLoad:
        setState(() {
          _isRewardedAdReady = false;
        });
        print('Failed to load a rewarded ad');
        break;
      case RewardedVideoAdEvent.rewarded:
        QuizManager.instance.useHint();
        break;
      default:
      // do nothing
    }
  }

  ...
}

Ensuite, initialisez _isRewardedAdReady et définissez _onRewardedAdEvent en tant qu'écouteur d'événements d'annonce, puis appelez _loadRewardedAd() pour demander une annonce avec récompense.

lib/game_route.dart

@override
void initState() {
  ...

  // TODO: Initialize _isRewardedAdReady
  _isRewardedAdReady = false;

  // TODO: Set Rewarded Ad event listener
  RewardedVideoAd.instance.listener = _onRewardedAdEvent;

  // TODO: Load a Rewarded Ad
  _loadRewardedAd();
}

Maintenant, permettez aux utilisateurs de regarder une annonce avec récompense en cliquant sur le bouton d'action flottant. Le bouton ne s'affiche que si l'utilisateur n'a pas utilisé d'indice dans le niveau actuel du jeu et qu'une annonce avec récompense est chargée.

Modifiez la méthode _buildFloatingActionButton() comme suit pour afficher le bouton d'action flottant. Notez que si vous renvoyez null, le bouton est masqué à l'écran.

lib/game_route.dart

Widget _buildFloatingActionButton() {
  // TODO: Return a FloatingActionButton if a Rewarded Ad is available
  return (!QuizManager.instance.isHintUsed && _isRewardedAdReady)
      ? FloatingActionButton.extended(
          onPressed: () {
            showDialog(
              context: context,
              builder: (context) {
                return AlertDialog(
                  title: Text('Need a hint?'),
                  content: Text('Watch an Ad to get a hint!'),
                  actions: <Widget>[
                    FlatButton(
                      child: Text('cancel'.toUpperCase()),
                      onPressed: () {
                        Navigator.pop(context);
                      },
                    ),
                    FlatButton(
                      child: Text('ok'.toUpperCase()),
                      onPressed: () {
                        Navigator.pop(context);
                        RewardedVideoAd.instance.show();
                      },
                    ),
                  ],
                );
              },
            );
          },
          label: Text('Hint'),
          icon: Icon(Icons.card_giftcard),
        )
      : null;
}

Enfin, supprimez l'écouteur d'événements d'annonces avec récompense dans la méthode de rappel dispose().

lib/game_route.dart

@override
void dispose() {
  ...

  // TODO: Remove Rewarded Ad event listener
  RewardedVideoAd.instance.listener = null;

  ...

  super.dispose();
}

Et voilà ! Exécutez le projet et regardez une annonce avec récompense pour obtenir un indice supplémentaire.

2a79a3db6b44dae9.gif

9db81af632cb2b15.pngVous avez trouvéune pièce du puzzle !

Vous avez terminé l'atelier de programmation. Vous trouverez le code final dans le dossier android_studio_folder.pngcomplete.

Pour aller plus loin, suivez les autres ateliers de programmation Flutter.