Informazioni su questo codelab
1. Introduzione
Cosa creerai
Questo codelab ti spiega come aggiungere un banner, un annuncio interstitial e un annuncio con premio a un'app chiamata Awesome Drawing Quiz, un gioco che consente ai giocatori di indovinare il nome del disegno.
|
|
Se riscontri problemi (bug di codice, errori grammaticali, parole poco chiare) mentre lavori con il codelab, segnalali facendo clic sul link Segnala un errore nell'angolo in basso a sinistra del codelab.
Cosa imparerai a fare
- Come configurare il plug-in AdMob di Google Mobile Ads
- Come implementare banner, annunci interstitial e annunci con premio in un'app Flutter
Che cosa ti serve
- Android Studio 4.1 o versioni successive
- Xcode 12 o versione successiva (per sviluppo iOS)
Come giudichi il tuo livello di esperienza con AdMob?
Come valuteresti il tuo livello di esperienza con Flutter?
2. Configura l'ambiente di sviluppo di Flutter
Per completare questo lab sono necessari due software: l'SDK Flutter e l'editor.
Puoi eseguire il codelab utilizzando uno di questi dispositivi:
- Un dispositivo fisico Android o iOS connesso al computer e impostato sulla modalità sviluppatore.
- Il simulatore iOS (richiede l'installazione degli strumenti Xcode).
- L'emulatore Android (richiede la configurazione in Android Studio).
- Un browser (per il debug è richiesto Chrome).
- Come applicazione desktop Windows, Linux o macOS. Devi svilupparle sulla piattaforma in cui prevedi di eseguire il deployment. Quindi, se vuoi sviluppare un'app desktop per Windows, devi sviluppare su Windows per accedere alla catena di build appropriata. Alcuni requisiti specifici del sistema operativo sono descritti in dettaglio all'indirizzo docs.flutter.dev/desktop.
Scarica il codice
Dopo aver scaricato il file ZIP, estrai i contenuti. Avrai una cartella denominata admob-ads-in-flutter-master.
In alternativa, puoi clonare il repository GitHub dalla riga di comando:
$ git clone https://github.com/googlecodelabs/admob-ads-in-flutter
Il repository contiene due cartelle:
comando iniziale: codice iniziale che creerai in questo codelab.- complete: codice completato per questo codelab.
3. Configurare l'app e le unità pubblicitarie AdMob
Poiché Flutter è un SDK multipiattaforma, devi aggiungere in AdMob un'app e unità pubblicitarie per Android e iOS.
Configurazione per Android
Per eseguire la configurazione per Android, devi aggiungere un'app per Android e creare unità pubblicitarie.
Aggiungere un'app per Android
- Nella console AdMob, fai clic su AGGIUNGI APP dal menu App.
- Quando ti viene chiesto Hai pubblicato la tua app su Google Play o nell'App Store?, fai clic su NO.
- Inserisci
Awesome Drawing Quiznel campo del nome dell'app e seleziona Android come piattaforma.
- Non è necessario attivare le metriche utente per completare questo codelab. Tuttavia, ti consigliamo di farlo perché ti consente di comprendere più dettagliatamente il comportamento degli utenti. Fai clic su AGGIUNGI per completare la procedura.
Creare unità pubblicitarie
Per iniziare ad aggiungere unità pubblicitarie ad AdMob:
- Seleziona Awesome Drawing Quiz dal menu App della console di AdMob.
- Fai clic sul menu Unità pubblicitarie.
Banner
|
|
Interstitial
|
|
Con premio
|
|
In genere, sono necessarie alcune ore prima che una nuova unità pubblicitaria possa pubblicare annunci.
Se vuoi verificare immediatamente il comportamento dell'annuncio, utilizza l'ID app di test e gli ID unità pubblicitaria elencati nelle tabelle ID app per Android/ID unità pubblicitaria e ID app per iOS/ID unità pubblicitaria.
Configurazione per iOS
Per effettuare l'impostazione per iOS, devi aggiungere un'app per iOS e creare unità pubblicitarie.
Aggiungere un'app per iOS
- Nella console AdMob, fai clic su AGGIUNGI APP dal menu App.
- Quando ti viene chiesto Hai pubblicato la tua app su Google Play o nell'App Store?, fai clic su NO.
- Inserisci
Awesome Drawing Quiznel campo del nome dell'app e seleziona iOS come piattaforma.
- Non è necessario attivare le metriche utente per completare questo codelab. Tuttavia, ti consigliamo di farlo perché ti consente di comprendere più dettagliatamente il comportamento degli utenti. Fai clic su AGGIUNGI per completare la procedura.
Creare unità pubblicitarie
Per aggiungere unità pubblicitarie:
- Seleziona l'app Awesome Drawing Quiz dal menu App della console AdMob.
- Fai clic sul menu Unità pubblicitarie.
Banner
|
|
Interstitial
|
|
Con premio
|
|
In genere, sono necessarie alcune ore prima che una nuova unità pubblicitaria possa pubblicare annunci.
Se vuoi verificare immediatamente il comportamento dell'annuncio, utilizza l'ID app di prova e gli ID unità pubblicitaria elencati nella seguente tabella.
(Facoltativo) Utilizza l'app e le unità pubblicitarie di prova di AdMob
Se preferisci seguire il codelab invece di creare una nuova applicazione e unità pubblicitarie autonomamente, puoi utilizzare l'ID app AdMob di prova e gli ID unità pubblicitaria elencati nelle tabelle seguenti.
ID app/ID unità pubblicitaria per Android
Elemento | ID app/ID unità pubblicitaria |
ID app AdMob |
|
Banner |
|
Interstitial |
|
Con premio |
|
ID app per iOS/ID unità pubblicitaria
Elemento | ID app/ID unità pubblicitaria |
ID app AdMob |
|
Banner |
|
Interstitial |
|
Con premio |
|
Per ulteriori informazioni sugli annunci di prova, consulta la documentazione per gli sviluppatori sugli annunci di prova per Android e sugli annunci di prova per iOS.
4. Aggiungi il plug-in Flutter di Google Mobile Ads
Flutter utilizza plug-in per fornire l'accesso a una vasta gamma di servizi specifici della piattaforma. I plug-in ti consentono di accedere a servizi e API su ogni piattaforma.
Il plug-in google_mobile_ads supporta il caricamento e la visualizzazione di annunci banner, interstitial, con premio e nativi tramite l'API AdMob.
Poiché Flutter è un SDK multipiattaforma, il plug-in google_mobile_ads è applicabile sia per iOS che per Android. Pertanto, se aggiungi il plug-in alla tua app Flutter, questo verrà utilizzato sia dalle versioni Android che iOS dell'app per gli annunci in linea di AdMob.
Aggiungere il plug-in Google Mobile Ads come dipendenza
Per accedere alle API AdMob dal progetto degli annunci in linea AdMob, aggiungi google_mobile_ads come dipendenza al file pubspec.yaml che si trova alla directory principale del progetto.
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
...
Fai clic su Pub get per installare il plug-in nel progetto Awesome Drawing Quiz.
Aggiorna AndroidManifest.xml (Android)
- Apri il file
android/app/src/main/AndroidManifest.xmlin Android Studio. - Aggiungi l'ID app AdMob aggiungendo un tag
<meta-data>con il nomecom.google.android.gms.ads.APPLICATION_ID. Ad esempio, se il tuo ID app AdMob èca-app-pub-3940256099942544~3347511713, devi aggiungere le seguenti righe al fileAndroidManifest.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>
Aggiorna Info.plist (iOS)
- Apri il file
ios/Runner/Info.plistin Android Studio. - Aggiungi una chiave
GADApplicationIdentifiercon il valore stringa del tuo ID app AdMob. Ad esempio, se il tuo ID app AdMob èca-app-pub-3940256099942544~1458002511, devi aggiungere le seguenti righe al fileInfo.plist.
ios/Runner/Info.plist
...
<key>GADApplicationIdentifier</key>
<string>ca-app-pub-3940256099942544~1458002511</string>
...
5. Aggiungi un corso per gli annunci
Crea un nuovo file denominato ad_helper.dart nella directory lib. Poi, implementa la classe AdHelper, che fornisce un ID app AdMob e ID unità pubblicitaria per Android e iOS.
Assicurati di sostituire l'ID app AdMob (ca-app-pub-xxxxxx~yyyyy) e l'ID unità pubblicitaria (ca-app-pub-xxxxxxx/yyyyyyyy) con gli ID creati nel passaggio precedente.
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');
}
}
}
Utilizza il seguente snippet di codice se vuoi usare l'ID app AdMob di prova e gli ID unità pubblicitaria di prova.
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. Inizializzare l'SDK Google Mobile Ads
Prima di caricare gli annunci, devi inizializzare l'SDK Google Mobile Ads. Apri il file lib/home_route.dart e modifica _initGoogleMobileAds() per inizializzare l'SDK prima del caricamento della home page.
Tieni presente che devi modificare il tipo restituito del metodo _initGoogleMobileAds() da Future<dynamic> a Future<InitializationStatus> per ottenere il risultato dell'inizializzazione dell'SDK una volta completata l'operazione.
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. Aggiungi un annuncio banner
In questa sezione, un annuncio banner viene visualizzato nella parte superiore della schermata del gioco, come illustrato nello screenshot seguente.
- Apri il file
lib/game_route.darte importaad_manager.dart - Importa
ad_helper.dartegoogle_mobile_ads.dartaggiungendo le righe seguenti:
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 {
...
}
- Nel corso
_GameRouteState, aggiungi i seguenti membri per un annuncio banner.
lib/game_route.dart
class _GameRouteState extends State<GameRoute> implements QuizEventListener {
...
// TODO: Add _bannerAd
BannerAd? _bannerAd;
...
}
- Nel metodo
initState(), crea e carica unBannerAdper il banner 320 x 50 (AdSize.banner). Tieni presente che un listener di eventi di annunci è configurato per aggiornare l'interfaccia utente (setState()) quando viene caricato un annuncio .
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();
}
- Modifica il metodo
build()per visualizzare un annuncio banner, se disponibile.
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!),
),
),
],
),
),
...
);
}
- Rilascia la risorsa associata all'oggetto
BannerAdchiamando il metodoBannerAd.dispose()nel metodo di callbackdispose().
lib/game_route.dart
@override
void dispose() {
// TODO: Dispose a BannerAd object
_bannerAd?.dispose();
...
super.dispose();
}
È tutto. Esegui il progetto e inizia un nuovo gioco. Dopo che un annuncio è stato caricato, viene visualizzato un annuncio banner nella parte superiore dello schermo.
8. Aggiungi un annuncio interstitial
In questa sezione, mostri un annuncio interstitial al termine del gioco (5 livelli in totale).
- Apri il file
lib/game_route.dart - Nella classe
_GameRouteState, aggiungi i seguenti membri e metodi per un annuncio interstitial.
Tieni presente che un listener di eventi di annunci è configurato per verificare se l'annuncio è pronto (onAdLoaded() e onAdFailedToLoad()) e per visualizzare la schermata Home dell'app quando l'annuncio viene chiuso (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}');
},
),
);
}
...
}
- In questo codelab, viene visualizzato un annuncio interstitial dopo che un utente completa 5 livelli. Per ridurre al minimo le richieste di annunci non necessarie, richiedi un annuncio quando un utente raggiunge il livello 3.
Nel metodo onNewLevel(), aggiungi le seguenti righe.
lib/game_route.dart
@override
void onNewLevel(int level, Drawing drawing, String clue) {
...
// TODO: Load an Interstitial Ad
if (level >= 3 && _interstitialAd == null) {
_loadInterstitialAd();
}
}
- Al termine di una partita, viene visualizzata la finestra di dialogo del risultato. Quando l'utente chiude la finestra di dialogo, l'utente viene indirizzato alla schermata Home del Quiz di Awesome Drawing.
Poiché gli annunci interstitial devono essere visualizzati tra le transizioni tra le schermate, gli mostriamo quando un utente fa clic sul pulsante CHIUDI.
Modifica il metodo onGameOver() come segue.
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();
}
},
),
],
);
},
);
}
- Rilascia la risorsa associata all'oggetto
InterstitialAdchiamando il metodoInterstitialAd.dispose()nel metodo di callbackdispose().
lib/game_route.dart
@override
void dispose() {
...
// TODO: Dispose an InterstitialAd object
_interstitialAd?.dispose();
...
super.dispose();
}
È tutto. Esegui il progetto e completa il gioco. Se un annuncio interstitial viene caricato, lo vedrai visualizzato dopo aver fatto clic sul pulsante CHIUDI nella finestra di dialogo del punteggio.
9. Aggiungi un annuncio con premio
In questa sezione, aggiungi un annuncio con premio che offre a un utente un ulteriore suggerimento come premio.
- Apri il file
lib/game_route.dart - Nel corso
_GameRouteState, aggiungi membri per un annuncio con premio e implementa il metodo_loadRewardedAd(). Tieni presente che quando l'annuncio viene chiuso (onAdDismissedFullScreenContent) viene caricato un altro annuncio con premio per memorizzarlo nella cache il prima possibile.
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}');
},
),
);
}
...
}
- Chiama
_loadRewardedAd()dal metodoinitState()per richiedere un annuncio con premio quando inizia il gioco.
lib/game_route.dart
class _GameRouteState extends State<GameRoute> implements QuizEventListener {
...
@override
void initState() {
...
// COMPLETE: Load a Rewarded Ad
_loadRewardedAd();
}
...
}
- Consenti agli utenti di guardare un annuncio con premio facendo clic sul pulsante di azione fluttuante. Il pulsante viene visualizzato solo se un utente non ha utilizzato un suggerimento al livello corrente e se viene caricato un annuncio con premio.
Modifica il metodo _buildFloatingActionButton() come segue per visualizzare il pulsante di azione mobile. Tieni presente che la restituzione di null nasconde il pulsante sullo schermo.
Tieni presente che onUserEarnedReward è l'evento più importante in un annuncio con premio. Viene attivato quando un utente diventa idoneo a ricevere un premio (ad esempio dopo aver finito di guardare un video).
In questo codelab, il metodo QuizManager.instance.useHint() viene chiamato dal callback, che rivela un altro carattere nella stringa hint. L'app ricarica un annuncio con premio nel callback onAdClosed per assicurarsi che sia pronto il prima possibile.
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;
}
- Rilascia la risorsa associata all'oggetto
RewardedAdchiamando il metodoRewardedAd.dispose()nel metodo di callbackdispose().
lib/game_route.dart
@override
void dispose() {
...
// TODO: Dispose a RewardedAd object
_rewardedAd?.dispose();
...
super.dispose();
}
È tutto. Esegui il progetto e inizia a giocare. Una volta caricato un annuncio con premio, viene visualizzato un pulsante di suggerimento nella parte inferiore dello schermo. Fai clic sul pulsante Suggerimento per ottenere un ulteriore suggerimento.
10. Operazione completata.
Hai completato il codelab. Puoi trovare il codice completato per questo codelab nella cartella complete.
Per scoprire come implementare banner e annunci in linea nativi, consulta il codelab Aggiungere un banner AdMob e annunci in linea nativi a un'app Flutter.
Per scoprire di più, prova gli altri codelab di Flutter.