Adicionar os anúncios da AdMob a um app do Flutter

1. Introdução

O que você vai criar

Neste codelab, vamos ajudar a adicionar um anúncio intersticial, premiado e de banner a um app chamado Awesome Drawing Quiz, um jogo para adivinhar o nome do desenho.

Se você encontrar problemas, como bugs no código, erros gramaticais e enunciados confusos, notifique o problema pelo link Informar um erro no canto inferior esquerdo da tela.

Dica: para saber como implementar anúncios inline nativos e de banner, confira o codelab Adicionar anúncios inline nativos e de banner da AdMob a um app do Flutter.

O que você vai aprender

• Como configurar o plug-in dos anúncios para dispositivos móveis do Google para AdMob
• Como implementar anúncios intersticiais, premiados e de banner em um app do Flutter

Pré-requisitos

• Android Studio 4.1 ou mais recente
• Xcode 12 ou versão mais recente (para desenvolvimento no iOS)

Qual é seu nível de experiência com a AdMob?

Iniciante Intermediário Proficiente

Qual é seu nível de experiência com o Flutter?

Iniciante Intermediário Proficiente

2. Configurar seu ambiente de desenvolvimento do Flutter

Você precisa de dois softwares para concluir este laboratório: o SDK do Flutter e um editor.

É possível executar o codelab usando qualquer um destes dispositivos:

• Um dispositivo físico Android ou iOS conectado ao seu computador e configurado para o modo de desenvolvedor.
• O simulador para iOS, que exige a instalação de ferramentas do Xcode.
• O Android Emulator, que requer configuração no Android Studio.
• Um navegador (o Chrome é necessário para depuração).
• Como um aplicativo para computador Windows, Linux ou macOS. Você precisa desenvolver na plataforma em que pretende implantar. Portanto, se quiser desenvolver um app para um computador Windows, crie no Windows para acessar a cadeia de compilação adequada. Os requisitos específicos do sistema operacional são abordados em detalhes em docs.flutter.dev/desktop.

Fazer o download do código

Fazer o download do código-fonte Visualizar o repositório no GitHub

Faça o download e extraia o conteúdo do arquivo ZIP. Nele, você vai encontrar a pasta admob-ads-in-flutter-master.

Se preferir, clone o repositório do GitHub encontrado na linha de comando:

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

O repositório contém duas pastas:

• starter: código inicial que você vai criar neste codelab.
• complete: código completo para este codelab.

3. Configurar o app e os blocos de anúncios da AdMob

Como o Flutter é um SDK multiplataforma, você precisa adicionar um app e blocos de anúncios para Android e iOS na AdMob.

Observação: se você quiser seguir o codelab em vez de criar um novo aplicativo e blocos de anúncios por conta própria, confira a seção Usar o app e os blocos de anúncios de teste da AdMob.

Configuração para Android

Adicione um app Android e crie blocos de anúncios.

Adicionar um app Android

1. No Console da AdMob, clique em ADICIONAR APP no menu Apps.
2. Quando aparecer Você publicou seu app no Google Play ou na App Store?, clique em NÃO.
3. Insira Awesome Drawing Quiz no campo de nome do aplicativo e selecione Android como plataforma.

4. Não é preciso ativar as métricas do usuário para concluir este codelab. No entanto, recomendamos que você faça isso para entender melhor o comportamento do usuário. Clique em ADICIONAR para concluir o processo.

Criar blocos de anúncios

Para adicionar blocos de anúncios à AdMob:

1. Selecione Awesome Drawing Quiz no menu Apps do console da AdMob.
2. Clique no menu Blocos de anúncios.

Banner

Clique no botão ADICIONAR BLOCO DE ANÚNCIOS. Selecione Banner como formato. Insira android-adq-banner no campo Nome do bloco de anúncios. Clique em CRIAR BLOCO DE ANÚNCIOS para concluir o processo.

Intersticial

Clique no botão ADICIONAR BLOCO DE ANÚNCIOS. Selecione Intersticial como formato. Insira android-adq-interstitial no campo Nome do bloco de anúncios. Clique em CRIAR BLOCO DE ANÚNCIOS para concluir o processo.

Premiado

Clique no botão ADICIONAR BLOCO DE ANÚNCIOS. Selecione Premiado como formato. Insira android-adq-rewarded no campo Nome do bloco de anúncios. Mantenha os valores padrão para Configurações do prêmio. Clique em CRIAR BLOCO DE ANÚNCIOS para concluir o processo.

Importante: ao criar e testar seus apps, use anúncios de teste em vez de publicidade de produção ativa. Se não, sua conta pode ser suspensa. Para mais informações sobre como os anúncios de teste do SDK para dispositivos móveis funcionam, consulte Anúncios de teste.

Geralmente, leva algumas horas para que um novo bloco comece a veicular anúncios.

Se você não quiser esperar para testar o comportamento do anúncio, use os IDs do app e do bloco de anúncios de teste mostrados nas tabelas de IDs do app iOS/bloco de anúncios.

Configuração para iOS

Adicione um app iOS e crie blocos de anúncios.

Adicionar um app iOS

1. No Console da AdMob, clique em ADICIONAR APP no menu Apps.
2. Quando aparecer Você publicou seu app no Google Play ou na App Store?, clique em NÃO.
3. Insira Awesome Drawing Quiz no campo de nome do aplicativo e selecione iOS como plataforma.

4. Não é preciso ativar as métricas do usuário para concluir este codelab. No entanto, recomendamos que você faça isso para entender melhor o comportamento do usuário. Clique em ADICIONAR para concluir o processo.

Criar blocos de anúncios

Para adicionar blocos de anúncios:

1. Selecione o app Awesome Drawing Quiz no menu Apps do console da AdMob.
2. Clique no menu Blocos de anúncios.

Banner

Clique no botão ADICIONAR BLOCO DE ANÚNCIOS. Selecione Banner como formato. Insira ios-adq-banner no campo Nome do bloco de anúncios. Clique em CRIAR BLOCO DE ANÚNCIOS para concluir o processo.

Intersticial

Clique no botão ADICIONAR BLOCO DE ANÚNCIOS. Selecione Intersticial como formato. Insira ios-adq-interstitial no campo Nome do bloco de anúncios. Clique em CRIAR BLOCO DE ANÚNCIOS para concluir o processo.

Premiado

Clique no botão ADICIONAR BLOCO DE ANÚNCIOS. Selecione Premiado como formato. Insira ios-adq-rewarded no campo Nome do bloco de anúncios. Mantenha os valores padrão para Configurações do prêmio. Clique em CRIAR BLOCO DE ANÚNCIOS para concluir o processo.

Importante: ao criar e testar seus apps, use anúncios de teste em vez de publicidade de produção ativa. Se não, sua conta pode ser suspensa. Para mais informações sobre como os anúncios de teste do SDK para dispositivos móveis funcionam, consulte Anúncios de teste.

Geralmente, leva algumas horas para que um novo bloco comece a veicular anúncios.

Se você não quiser esperar para testar o comportamento do anúncio, use os IDs do app e do bloco de anúncios de teste mostrados na tabela a seguir.

Usar o app e os blocos de anúncios de teste da AdMob (Opcional)

Se você quiser seguir o codelab em vez de criar um novo app e blocos de anúncios por conta própria, use os IDs do app AdMob e dos blocos de anúncios mostrados na tabela a seguir.

ID do app Android/ID do bloco de anúncios

Item	ID do app/ID do bloco de anúncios
ID do app AdMob	ca-app-pub-3940256099942544~3347511713
Banner	ca-app-pub-3940256099942544/6300978111
Intersticial	ca-app-pub-3940256099942544/1033173712
Premiado	ca-app-pub-3940256099942544/5224354917

ID do app iOS/ID do bloco de anúncios

Item	ID do app/ID do bloco de anúncios
ID do app AdMob	ca-app-pub-3940256099942544~1458002511
Banner	ca-app-pub-3940256099942544/2934735716
Intersticial	ca-app-pub-3940256099942544/4411468910
Premiado	ca-app-pub-3940256099942544/1712485313

Para mais informações sobre anúncios de teste, consulte a documentação para desenvolvedores nos links Anúncios de teste para Android e Anúncios de teste para iOS.

4. Adicionar o plug-in dos anúncios para dispositivos móveis do Google para Flutter

O Flutter usa plug-ins para oferecer acesso a vários serviços específicos da plataforma. Com os plug-ins, você pode acessar serviços e APIs em cada plataforma.

O plug-in google_mobile_ads permite o carregamento e a veiculação de anúncios intersticiais, premiados, nativos e de banner usando a API da AdMob.

Como o Flutter é um SDK multiplataforma, o plug-in google_mobile_ads é aplicável tanto para iOS quanto para Android. Portanto, se você adicionar o plug-in ao seu app do Flutter, ele vai ser usado pelas versões Android e iOS do aplicativo de anúncios inline da AdMob.

Adicionar o plug-in dos anúncios para dispositivos móveis do Google como dependência

Para acessar as APIs da AdMob usando o projeto de anúncios inline da AdMob, inclua google_mobile_ads como dependência para o arquivo pubspec.yaml localizado na raiz do projeto.

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

...

Clique em Pub get para instalar o plug-in no projeto do Awesome Drawing Quiz.

Atualizar o AndroidManifest.xml (Android)

1. Abra o arquivo android/app/src/main/AndroidManifest.xml no Android Studio.
2. Adicione o ID do app AdMob usando uma tag <meta-data> com o nome com.google.android.gms.ads.APPLICATION_ID. Por exemplo, se o ID for ca-app-pub-3940256099942544~3347511713, inclua as seguintes linhas no arquivo AndroidManifest.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>

Atualizar o Info.plist (iOS)

1. Abra o arquivo ios/Runner/Info.plist no Android Studio.
2. Adicione uma chave GADApplicationIdentifier com o valor de string do ID do app AdMob. Por exemplo, se o ID for ca-app-pub-3940256099942544~1458002511, inclua as seguintes linhas no arquivo Info.plist.

ios/Runner/Info.plist

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

5. Adicionar uma classe auxiliar para anúncios

Crie um novo arquivo chamado ad_helper.dart no diretório lib. Implemente a classe AdHelper, que disponibiliza os IDs do app e do bloco de anúncios da AdMob para Android e iOS.

Substitua o ID do app AdMob (ca-app-pub-xxxxxx~yyyyy) e o ID do bloco de anúncios (ca-app-pub-xxxxxxx/yyyyyyyy) pelos IDs que você criou na etapa anterior.

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');
    }
  }
}

Use o snippet de código a seguir para aplicar os IDs do app e dos blocos de anúncios de teste da AdMob.

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. Inicializar o SDK dos anúncios para dispositivos móveis do Google

Antes de carregar os anúncios, você precisa inicializar o SDK dos anúncios para dispositivos móveis do Google. Abra o arquivo lib/home_route.dart e modifique _initGoogleMobileAds() para inicializar o SDK antes que a página inicial seja totalmente aberta.

Mude o tipo de retorno do método _initGoogleMobileAds() de Future<dynamic> para Future<InitializationStatus> de modo a visualizar o resultado da inicialização do SDK após a conclusão.

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. Adicionar um anúncio de banner

Nesta seção, você mostra um anúncio de banner na parte superior da tela do jogo, conforme a captura de tela a seguir.

1. Abra o arquivo lib/game_route.dart e importe ad_manager.dart.
2. Importe ad_helper.dart e google_mobile_ads.dart adicionando as seguintes linhas:

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 {
  ...
}

3. Na classe _GameRouteState, adicione os seguintes membros para um anúncio de banner.

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  // TODO: Add _bannerAd
  BannerAd? _bannerAd;

  ...
}

4. No método initState(), crie e carregue um BannerAd para o banner de 320 x 50 (AdSize.banner). Um listener de eventos é configurado para atualizar a interface (setState()) quando um anúncio é carregado.

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();
}

5. Modifique o método build() para mostrar o anúncio de banner quando ele estiver disponível.

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!),
              ),
            ),
        ],
      ),
    ),
    ...
  );
}

6. Libere o recurso associado ao objeto BannerAd chamando o método BannerAd.dispose() no método de callback dispose().

lib/game_route.dart

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

  ...

  super.dispose();
}

E pronto. Execute o projeto e inicie um novo jogo. Após o carregamento, o anúncio de banner vai aparecer na parte superior da tela.

8. Adicionar um anúncio intersticial

Nesta seção, você mostra um anúncio intersticial após o jogo, que tem cinco níveis.

1. Abra o arquivo lib/game_route.dart.
2. Na classe _GameRouteState, adicione os seguintes membros e métodos para um anúncio intersticial.

Um listener de eventos está configurado para verificar se o anúncio está pronto (onAdLoaded() e onAdFailedToLoad()) e mostrar a tela inicial do app quando o anúncio for fechado (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}');
        },
      ),
    );
  }

  ...
}

3. Neste codelab, um anúncio intersticial aparece depois que o usuário conclui os cinco níveis. Para minimizar solicitações de anúncios desnecessárias, mostre um anúncio quando o usuário atingir o nível 3.

No método onNewLevel(), adicione as seguintes linhas.

lib/game_route.dart

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

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

4. A caixa de diálogo com a pontuação aparece assim que o jogo termina. Quando um usuário fecha esse diálogo, ele é direcionado para a tela inicial do Awesome Drawing Quiz.

Como os anúncios intersticiais devem aparecer entre as transições de tela, eles são mostrados quando um usuário clica no botão FECHAR.

Modifique o método onGameOver() desta maneira:

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();
              }
            },
          ),
        ],
      );
    },
  );
}

5. Libere o recurso associado ao objeto InterstitialAd chamando o método InterstitialAd.dispose() no método de callback dispose().

lib/game_route.dart

@override
void dispose() {
  ...

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

  ...

  super.dispose();
}

E pronto. Execute o projeto e conclua o jogo. Se um anúncio intersticial for carregado, ele vai aparecer assim que o usuário clicar no botão FECHAR na caixa de diálogo de pontuação.

9. Adicionar um anúncio premiado

Nesta seção, você adiciona um anúncio premiado que oferece uma dica adicional ao usuário como recompensa.

1. Abra o arquivo lib/game_route.dart.
2. Na classe _GameRouteState, adicione membros para um anúncio premiado e implemente o método _loadRewardedAd(). Quando o anúncio é fechado (onAdDismissedFullScreenContent), ele carrega outro para armazenar o anúncio em cache rapidamente.

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}');
        },
      ),
    );
  }

  ...
}

3. Chame _loadRewardedAd() usando o método initState() para solicitar um anúncio premiado quando o jogo começar.

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  @override
  void initState() {
    ...

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

  ...
}

4. Permita que os usuários assistam um anúncio premiado clicando no botão de ação flutuante. O botão vai aparecer apenas se um usuário não tiver usado uma dica no nível atual e um anúncio premiado for carregado.

Modifique o método _buildFloatingActionButton(), conforme a seguir, para mostrar o botão de ação flutuante. Retornar null oculta o botão da tela.

O evento onUserEarnedReward é o mais importante em um anúncio premiado. Ele é acionado quando um usuário se qualifica para receber uma recompensa (por exemplo, terminou de assistir um vídeo).

Neste codelab, o método QuizManager.instance.useHint() é chamado usando o callback, que revela mais um caractere na string de dica. O app recarrega um anúncio premiado no callback onAdClosed para garantir que ele apareça mais rápido.

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;
}

5. Libere o recurso associado ao objeto RewardedAd chamando o método RewardedAd.dispose() no método de callback dispose().

lib/game_route.dart

@override
void dispose() {
  ...

  // TODO: Dispose a RewardedAd object
  _rewardedAd?.dispose();

  ...

  super.dispose();
}

E pronto. Execute o projeto e jogue. Depois que um anúncio premiado for carregado, um botão de dica vai aparecer na parte inferior da tela. Clique no botão Dica para mostrar uma dica adicional.

10. Pronto!

Você concluiu o codelab. O código final deste codelab está na pasta complete.

Para aprender a implementar anúncios inline nativos e de banner, confira o codelab Adicionar anúncios inline nativos e de banner da AdMob a um app do Flutter.

Se quiser saber mais, confira os outros codelabs do Flutter.