1. Introduction
Objectifs de l'atelier
Cet atelier de programmation vous expliquera comment ajouter un bannière, un interstitiel et une annonce avec récompense à une application appelée Awesome Drawing Quiz. Dans ce jeu, les joueurs doivent deviner le nom d'un dessin.
|
|
Si vous rencontrez des problèmes (bugs de code, erreurs grammaticales, formulations imprécises) au cours de cet atelier de programmation, veuillez nous en informer en cliquant sur le lien Signaler une erreur en bas à gauche.
Points abordés
- Comment configurer le plug-in AdMob Google Mobile Ads ?
- Comment implémenter une bannière, un interstitiel et une annonce avec récompense dans une application Flutter ?
Prérequis
- Android Studio 4.1 ou version ultérieure
- Xcode 12 ou version ultérieure (pour le développement sur iOS)
Comment évalueriez-vous votre niveau d'expérience avec AdMob ?
Comment évalueriez-vous votre niveau d'expérience avec Flutter ?
2. Configurer votre environnement de développement Flutter
Pour cet atelier, vous avez besoin de deux logiciels : le SDK Flutter et un éditeur.
Vous pouvez exécuter l'atelier de programmation sur l'un des appareils suivants :
- Un appareil Android ou iOS physique connecté à votre ordinateur et configuré en mode développeur
- Le simulateur iOS (installation des outils Xcode requise)
- Android Emulator (configuration requise dans Android Studio)
- Un navigateur (Chrome requis pour le débogage)
- Vous pouvez exécuter l'atelier de programmation en tant qu'application de bureau Windows, Linux ou macOS. Vous devez développer votre application sur la plate-forme où vous comptez la déployer. Par exemple, si vous voulez développer une application de bureau Windows, vous devez le faire sous Windows pour accéder à la chaîne de compilation appropriée. Prenez également connaissance des exigences spécifiques aux systèmes d'exploitation, lesquelles sont détaillées sur docs.flutter.dev/desktop.
Télécharger le code
Une fois le fichier ZIP téléchargé, extrayez son contenu. Vous obtiendrez un dossier 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 :
starter : code de démarrage que vous allez compiler dans cet atelier de programmation.- complete : code final de cet atelier de programmation.
3. Configurer l'application et les blocs d'annonces AdMob
Flutter étant un SDK multiplate-forme, vous devez ajouter une application et des blocs d'annonces pour Android et iOS dans AdMob.
Configurer pour Android
Afin de configurer pour Android, vous devez ajouter une application Android et créer des blocs d'annonces.
Ajouter une application Android
- Dans la console AdMob, cliquez sur AJOUTER UNE APPLICATION dans le menu Applications.
- Répondez NON à la question Avez-vous publié votre application sur Google Play ou sur l'App Store ?.
- Saisissez
Awesome Drawing Quizdans le champ du nom de l'application, puis sélectionnez Android comme plate-forme.
- Il n'est pas nécessaire d'activer les métriques utilisateur pour suivre cet atelier de programmation. Nous recommandons toutefois de le faire, car cela permet de mieux comprendre le comportement des utilisateurs. Cliquez sur Ajouter pour terminer le processus.
Créer des blocs d'annonces
Pour commencer à ajouter des blocs d'annonces à AdMob :
- Sélectionnez Awesome Drawing Quiz dans le menu Applications de la console AdMob.
- Cliquez sur le menu Blocs d'annonces.
Bannière
|
|
Interstitiel
|
|
Annonce avec récompense
|
|
Il faut généralement compter quelques heures pour qu'un nouveau bloc d'annonces puisse diffuser des annonces.
Si vous souhaitez tester le comportement de l'annonce immédiatement, utilisez l'ID de l'application test et les ID des blocs d'annonces tests indiqués dans les tableaux "ID d'application Android/ID de bloc d'annonces" et "ID d'application iOS/ID de bloc d'annonces".
Configurer pour iOS
Afin de configurer pour iOS, vous devez ajouter une application iOS et créer des blocs d'annonces.
Ajouter une application iOS
- Dans la console AdMob, cliquez sur AJOUTER UNE APPLICATION dans le menu Applications.
- Répondez NON à la question Avez-vous publié votre application sur Google Play ou sur l'App Store ?.
- Saisissez
Awesome Drawing Quizdans le champ du nom de l'application, puis sélectionnez iOS comme plate-forme.
- Il n'est pas nécessaire d'activer les métriques utilisateur pour suivre cet atelier de programmation. Nous recommandons toutefois de le faire, car cela permet de mieux comprendre le comportement des utilisateurs. Cliquez sur Ajouter pour terminer le processus.
Créer des blocs d'annonces
Pour ajouter des blocs d'annonces :
- Sélectionnez l'application Awesome Drawing Quiz dans le menu Applications de la console AdMob.
- Cliquez sur le menu Blocs d'annonces.
Bannière
|
|
Interstitiel
|
|
Annonce avec récompense
|
|
Il faut généralement compter quelques heures pour qu'un nouveau bloc d'annonces puisse diffuser des annonces.
Si vous souhaitez tester le comportement de l'annonce immédiatement, utilisez l'ID de l'application test et les ID des blocs d'annonces tests indiqués dans le tableau suivant.
Facultatif : Utiliser l'application et les blocs d'annonces tests AdMob
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 test et les ID des blocs d'annonces tests indiqués dans les tableaux suivants.
ID d'application Android/ID de bloc d'annonces
Élément | ID de l'application/ID du bloc d'annonces |
ID d'application AdMob |
|
Bannière |
|
Interstitiel |
|
Avec récompense |
|
ID d'application iOS/ID de bloc d'annonces
Élément | ID de l'application/ID du bloc d'annonces |
ID d'application AdMob |
|
Bannière |
|
Interstitiel |
|
Avec récompense |
|
Pour en savoir plus sur les annonces tests, consultez la documentation destinée aux développeurs sur les annonces tests Android et les annonces tests iOS.
4. Ajouter le plug-in Flutter Google Mobile Ads
Flutter utilise des plug-ins pour offrir un accès à une vaste gamme de services propres aux plates-formes. Ces plug-ins vous permettent d'accéder aux services et API sur chaque plate-forme.
Le plug-in google_mobile_ads permet de charger et d'afficher des bannières, interstitiels, annonces avec récompense et annonces natives à l'aide de l'API AdMob.
Flutter étant un SDK multiplate-forme, le plug-in google_mobile_ads s'applique à la fois à iOS et Android. Par conséquent, si vous ajoutez le plug-in à votre application Flutter, il sera utilisé à la fois par les versions Android et iOS de l'application d'annonces intégrées AdMob.
Ajouter le plug-in Google Mobile Ads en tant que dépendance
Pour accéder aux API AdMob depuis le projet d'annonces intégrées AdMob, ajoutez google_mobile_ads en tant que dépendance au fichier pubspec.yaml situé à la racine du projet.
pubspec.yaml
...
environment:
# TODO: Update the minimum sdk version to 2.12.0 to support null safety.
sdk: ">=2.17.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
google_fonts: ^3.0.1
# TODO: Add google_mobile_ads as a dependency
google_mobile_ads: ^1.2.0
...
Cliquez sur Pub get pour installer le plug-in dans le projet Awesome Drawing Quiz.
Mettre à jour AndroidManifest.xml (Android)
- Ouvrez le fichier
android/app/src/main/AndroidManifest.xmldans Android Studio. - Ajoutez votre ID d'application AdMob en incluant une balise
<meta-data>dans le nomcom.google.android.gms.ads.APPLICATION_ID. Par exemple, si votre ID d'application AdMob estca-app-pub-3940256099942544~3347511713, vous devez ajouter les lignes suivantes au fichierAndroidManifest.xml.
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 Info.plist (iOS)
- Ouvrez le fichier
ios/Runner/Info.plistdans Android Studio. - Ajoutez une clé
GADApplicationIdentifieravec la valeur de chaîne de votre ID d'application AdMob. Par exemple, si votre ID d'application AdMob estca-app-pub-3940256099942544~1458002511, vous devez ajouter les lignes suivantes au fichierInfo.plist.
ios/Runner/Info.plist
...
<key>GADApplicationIdentifier</key>
<string>ca-app-pub-3940256099942544~1458002511</string>
...
5. Ajouter une classe d'assistance pour les annonces
Créez un fichier nommé ad_helper.dart dans le répertoire lib. Ensuite, implémentez la classe AdHelper, qui fournit un ID d'application AdMob et des ID de blocs d'annonces pour Android et iOS.
Assurez-vous de remplacer l'ID d'application AdMob (ca-app-pub-xxxxxx~yyyyy) et l'ID de bloc d'annonces (ca-app-pub-xxxxxxx/yyyyyyyy) par les ID créés à l'étape précédente.
lib/ad_helper.dart
import 'dart:io';
class AdHelper {
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 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 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 UnsupportedError('Unsupported platform');
}
}
}
Ajoutez l'extrait de code suivant si vous souhaitez utiliser l'ID de l'application AdMob test et les ID des blocs d'annonces tests.
lib/ad_helper.dart
import 'dart:io';
class AdHelper {
static String get bannerAdUnitId {
if (Platform.isAndroid) {
return 'ca-app-pub-3940256099942544/6300978111';
} else if (Platform.isIOS) {
return 'ca-app-pub-3940256099942544/2934735716';
} else {
throw new UnsupportedError('Unsupported platform');
}
}
static String get interstitialAdUnitId {
if (Platform.isAndroid) {
return "ca-app-pub-3940256099942544/1033173712";
} else if (Platform.isIOS) {
return "ca-app-pub-3940256099942544/4411468910";
} else {
throw new UnsupportedError("Unsupported platform");
}
}
static String get rewardedAdUnitId {
if (Platform.isAndroid) {
return "ca-app-pub-3940256099942544/5224354917";
} else if (Platform.isIOS) {
return "ca-app-pub-3940256099942544/1712485313";
} else {
throw new UnsupportedError("Unsupported platform");
}
}
}
6. Initialiser le SDK Google Mobile Ads
Avant de charger les annonces, vous devez initialiser le SDK Google Mobile Ads. Ouvrez le fichier lib/home_route.dart, puis modifiez _initGoogleMobileAds() pour initialiser le SDK avant le chargement de la page d'accueil.
Notez que vous devez modifier le type renvoyé de la méthode _initGoogleMobileAds() en remplaçant Future<dynamic> par Future<InitializationStatus> pour obtenir le résultat de la réinitialisation du SDK une fois l'opération terminée.
home_route.dart
// TODO: Import google_mobile_ads.dart
import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'package:flutter/material.dart';
...
class HomeRoute extends StatelessWidget {
...
Future<InitializationStatus> _initGoogleMobileAds() {
// TODO: Initialize Google Mobile Ads SDK
return MobileAds.instance.initialize();
}
}
7. Ajouter une bannière
Dans cette section, vous allez ajouter une bannière en haut de l'écran du jeu, comme dans la capture d'écran suivante.
- Ouvrez le fichier
lib/game_route.dart, puis importezad_manager.dart. - Importez
ad_helper.dartetgoogle_mobile_ads.darten ajoutant les lignes suivantes :
lib/game_route.dart
...
// TODO: Import ad_helper.dart
import 'package:awesome_drawing_quiz/ad_helper.dart';
// TODO: Import google_mobile_ads.dart
import 'package:google_mobile_ads/google_mobile_ads.dart';
class GameRoute extends StatefulWidget {
...
}
- Dans la classe
_GameRouteState, ajoutez les membres suivants pour une bannière.
lib/game_route.dart
class _GameRouteState extends State<GameRoute> implements QuizEventListener {
...
// TODO: Add _bannerAd
BannerAd? _bannerAd;
...
}
- Dans la méthode
initState(), créez et chargez uneBannerAdpour la bannière 320 x 50 (AdSize.banner). Notez qu'un écouteur d'événements d'annonce est configuré pour mettre à jour l'UI (setState()) lors du chargement d'une annonce.
lib/game_route.dart
@override
void initState() {
...
// TODO: Load a banner ad
BannerAd(
adUnitId: AdHelper.bannerAdUnitId,
request: AdRequest(),
size: AdSize.banner,
listener: BannerAdListener(
onAdLoaded: (ad) {
setState(() {
_bannerAd = ad as BannerAd;
});
},
onAdFailedToLoad: (ad, err) {
print('Failed to load a banner ad: ${err.message}');
ad.dispose();
},
),
).load();
}
- Modifiez la méthode
build()pour afficher la bannière disponible.
lib/game_route.dart
@override
Widget build(BuildContext context) {
return Scaffold(
...
body: SafeArea(
child: Stack(
children: [
Center(
...
),
// TODO: Display a banner when ready
if (_bannerAd != null)
Align(
alignment: Alignment.topCenter,
child: Container(
width: _bannerAd!.size.width.toDouble(),
height: _bannerAd!.size.height.toDouble(),
child: AdWidget(ad: _bannerAd!),
),
),
],
),
),
...
);
}
- Libérez la ressource associée à l'objet
BannerAden appelant la méthodeBannerAd.dispose()dans la méthode de rappeldispose().
lib/game_route.dart
@override
void dispose() {
// TODO: Dispose a BannerAd object
_bannerAd?.dispose();
...
super.dispose();
}
Et voilà ! Vous pouvez exécuter le projet et commencer un nouveau jeu. Une fois l'annonce chargée, vous verrez une bannière en haut de l'écran.
8. Ajouter une annonce interstitielle
Dans cette section, vous allez afficher une annonce interstitielle une fois le jeu terminé (cinq niveaux au total).
- Ouvrez le fichier
lib/game_route.dart. - Dans la classe
_GameRouteState, ajoutez les méthodes et membres suivants pour une annonce interstitielle.
Notez qu'un écouteur d'événements d'annonce est configuré pour vérifier si l'annonce est prête (onAdLoaded() et onAdFailedToLoad()) et pour afficher l'écran d'accueil de l'application à la fermeture de l'annonce (onAdDismissedFullScreenContent())
lib/game_route.dart
class _GameRouteState extends State<GameRoute> implements QuizEventListener {
...
// TODO: Add _interstitialAd
InterstitialAd? _interstitialAd;
// TODO: Implement _loadInterstitialAd()
void _loadInterstitialAd() {
InterstitialAd.load(
adUnitId: AdHelper.interstitialAdUnitId,
request: AdRequest(),
adLoadCallback: InterstitialAdLoadCallback(
onAdLoaded: (ad) {
ad.fullScreenContentCallback = FullScreenContentCallback(
onAdDismissedFullScreenContent: (ad) {
_moveToHome();
},
);
setState(() {
_interstitialAd = ad;
});
},
onAdFailedToLoad: (err) {
print('Failed to load an interstitial ad: ${err.message}');
},
),
);
}
...
}
- Dans cet atelier de programmation, l'annonce interstitielle s'affiche une fois que l'utilisateur a terminé les cinq niveaux. Pour limiter les demandes d'annonces inutiles, demandez une annonce lorsque 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 && _interstitialAd == null) {
_loadInterstitialAd();
}
}
- Une fois le jeu terminé, la boîte de dialogue du score s'affiche. Lorsque l'utilisateur la ferme, il est redirigé vers l'écran d'accueil d'Awesome Drawing Quiz.
Comme les annonces interstitielles doivent apparaître quand l'utilisateur passe d'un écran à l'autre, nous les affichons lorsqu'il 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: [
FlatButton(
child: Text('close'.toUpperCase()),
onPressed: () {
// TODO: Display an Interstitial Ad
if (_interstitialAd != null) {
_interstitialAd?.show();
} else {
_moveToHome();
}
},
),
],
);
},
);
}
- Libérez la ressource associée à l'objet
InterstitialAden appelant la méthodeInterstitialAd.dispose()dans la méthode de rappeldispose().
lib/game_route.dart
@override
void dispose() {
...
// TODO: Dispose an InterstitialAd object
_interstitialAd?.dispose();
...
super.dispose();
}
Et voilà ! Vous pouvez exécuter le projet et terminer le jeu. En cas de chargement d'une annonce interstitielle, vous la verrez après avoir cliqué sur le bouton FERMER de la boîte de dialogue du score.
9. Ajouter une annonce avec récompense
Dans cette section, vous allez ajouter une annonce avec récompense, qui permet à l'utilisateur de bénéficier d'une astuce supplémentaire sous la forme d'une récompense.
- Ouvrez le fichier
lib/game_route.dart. - Dans la classe
_GameRouteState, ajoutez les membres pour une annonce avec récompense et implémentez la méthode_loadRewardedAd(). Notez que celle-ci charge une autre annonce avec récompense lorsque l'utilisateur ferme l'annonce (onAdDismissedFullScreenContent) afin de mettre l'annonce en cache le plus tôt possible.
lib/game_route.dart
class _GameRouteState extends State<GameRoute> implements QuizEventListener {
...
// TODO: Add _rewardedAd
RewardedAd? _rewardedAd;
// TODO: Implement _loadRewardedAd()
void _loadRewardedAd() {
RewardedAd.load(
adUnitId: AdHelper.rewardedAdUnitId,
request: AdRequest(),
rewardedAdLoadCallback: RewardedAdLoadCallback(
onAdLoaded: (ad) {
ad.fullScreenContentCallback = FullScreenContentCallback(
onAdDismissedFullScreenContent: (ad) {
setState(() {
ad.dispose();
_rewardedAd = null;
});
_loadRewardedAd();
},
);
setState(() {
_rewardedAd = ad;
});
},
onAdFailedToLoad: (err) {
print('Failed to load a rewarded ad: ${err.message}');
},
),
);
}
...
}
- Appelez
_loadRewardedAd()à partir de la méthodeinitState()pour demander une annonce avec récompense lorsque le jeu commence.
lib/game_route.dart
class _GameRouteState extends State<GameRoute> implements QuizEventListener {
...
@override
void initState() {
...
// COMPLETE: Load a Rewarded Ad
_loadRewardedAd();
}
...
}
- Faites en sorte que les utilisateurs puissent visionner une annonce avec récompense en cliquant sur le bouton d'action flottant. Il ne s'affiche que si le joueur n'a pas utilisé d'astuce au niveau actuel 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 null est renvoyé, le bouton ne s'affiche pas à l'écran.
Remarque : onUserEarnedReward est l'événement le plus important d'une annonce avec récompense. Il est déclenché au moment où l'utilisateur peut recevoir une récompense (par exemple, lorsqu'il finit de visionner une vidéo).
Dans cet atelier de programmation, la méthode QuizManager.instance.useHint() est appelée à partir du rappel, qui affiche un caractère supplémentaire dans la chaîne de l'astuce. L'application recharge une annonce avec récompense dans le rappel onAdClosed pour s'assurer que l'annonce est prête le plus tôt possible.
lib/game_route.dart
Widget? _buildFloatingActionButton() {
// TODO: Return a FloatingActionButton if a rewarded ad is available
return (!QuizManager.instance.isHintUsed && _rewardedAd != null)
? 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: [
TextButton(
child: Text('cancel'.toUpperCase()),
onPressed: () {
Navigator.pop(context);
},
),
TextButton(
child: Text('ok'.toUpperCase()),
onPressed: () {
Navigator.pop(context);
_rewardedAd?.show(
onUserEarnedReward: (_, reward) {
QuizManager.instance.useHint();
},
);
},
),
],
);
},
);
},
label: Text('Hint'),
icon: Icon(Icons.card_giftcard),
)
: null;
}
- Libérez la ressource associée à l'objet
RewardedAden appelant la méthodeRewardedAd.dispose()dans la méthode de rappeldispose().
lib/game_route.dart
@override
void dispose() {
...
// TODO: Dispose a RewardedAd object
_rewardedAd?.dispose();
...
super.dispose();
}
Et voilà ! Vous pouvez exécuter le projet et lancer le jeu. Une fois que l'annonce avec récompense sera chargée, vous verrez un bouton d'astuce au bas de l'écran. Cliquez sur le bouton Astuce pour obtenir une astuce supplémentaire.
10. C'est terminé !
Vous avez terminé l'atelier de programmation. Vous trouverez le code final de cet atelier de programmation dans le dossier complete.
Pour savoir comment implémenter une bannière et une annonce intégrée native, accédez à l'atelier de programmation Ajouter une bannière et une annonce intégrée native AdMob à une application Flutter.
Pour aller plus loin, suivez les autres ateliers de programmation Flutter.