Adicionando Anúncios em um aplicativo Flutter

Adicionando Anúncios em um aplicativo Flutter

Existem várias estratégias de monetização que você pode considerar ao criar um aplicativo Flutter. Uma das formas mais comuns é através da exibição de anúncios.  Integrar anúncios em seu aplicativo é uma maneira popular de gerar receita. Você pode exibir anúncios de terceiros em seu aplicativo e ganhar dinheiro com base nas visualizações ou cliques nos anúncios. O Google AdMob e o Facebook Audience Network são duas das principais redes de anúncios para aplicativos móveis. Neste Post, iremos mostrar como inserir anúncios em um aplicativo Flutter, por meio do AdMob. Para isso, utilizaremos um aplicativo que foi apresentado em um post anterior, o aplicativo de consulta ao CEP. O link do post é o seguinte:

https://techleve.blogspot.com/2023/09/aplicativo-flutter-acessando-api-remota.html

O Google AdMob, que é uma plataforma popular para exibir anúncios em aplicativos móveis. Para que essa plataforma possa enviar os anúncios para seu aplicativo,  você precisa registrar seu aplicativo na plataforma,  obtendo um  identificador para o aplicativo,  e precisa obter um identificador (AdUnits) para cada tipo de anúncio que você deseja exibir. Atualmente existem vários tipos de anúncios no AdMob, sendo os principais:

1) Banner - Anúncios retangulares que ocupam uma parte do layout de um aplicativo e que podem ser atualizados automaticamente após um período de tempo.

Fonte: Google adMob

2) Intersticial - Formato de anúncio de página inteira que aparece em intervalos e transições naturais, como na conclusão de um nível.

Fonte: Google adMob

3) Premiado - Formato de anúncio de página inteira que recompensa os usuários que optam por visualizar um anúncio. 

Fonte: Google adMob

No entanto,  por simplicidade,  iremos trabalhar apenas com o Banner e com Intersticial.

    É importante dizer que a etapa do registro do aplicativo no AdMob pode ser feita antes ou depois que seu aplicativo for desenvolvido,  no entanto, será preciso inserir código no seu aplicativo para que os anúncios sejam exibidos. 

    Além disso, após a publicação do seu aplicativo na Google Play Store,  você precisará voltar à página do AdMob para associar o aplicativo da Google Play Store com seu registro na AdMob, e assim permitir a monetização. A sequência de ações  para anúncios no App é ilustrada abaixo:

    Fonte: AL2

Configurar o AdMob

1. Acesse a página do Google AdMob (https://admob.google.com/) e faça login com sua conta do Google. Se você ainda não tiver uma conta, precisará criar uma.

2. Após fazer login, vá para a guia "Apps" e clique em "ADD APP" para adicionar seu aplicativo ao AdMob. Quando aparecer Você publicou seu app no Google Play ou na App Store?, clique em NÃO.

3. Insira o nome do APP no campo de nome do aplicativo e selecione Android como plataforma. Não é preciso ativar as métricas do usuário, mas é recomendável para entender melhor o comportamento do usuário. Clique em ADICIONAR para realizar o registro do app.

4. Depois de adicionar o aplicativo, você precisa criar as unidades de anúncios (AdUnits). Para isso selecione a opção Blocos de anúncios.

5. Escolha o tipo de AdUnit que você deseja criar. No nosso exemplos os tipos são   Banner e Intersticial. Selecione cada um desses tipos de cada vez.

    

    Podemos na imagem abaixo que, ao criar a AdUnit, é também exibido o ID do app no AdMob. O primeiro Id apresentado é do App e o segundo é o AdUnit. 

 

Um detalhe importante é não usar suas AdUnits durante o desenvolvimento do aplicativo,  uma vez que os cliques nos anúncios podem ser entendidos pela plataforma como uma tentativa indevida de monetização,  podendo levar a suspensão da conta. Para evitar isso, o AdMob fornece identificador para o aplicativo e AdUnits para teste. Abaixo listamos os IDs do App e AdUnits de teste, tanto para o ambiente Android quanto para o iOS.

ID do app Android e AdUnits 

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  e AdUnits     

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

Integrando o AdMob no Flutter

Agora, você precisa integrar o AdMob no seu aplicativo Flutter. Você pode fazer isso usando o pacote firebase_admob ou o pacote google_mobile_ads. No nosso exemplo usaremos o  google_mobile_ads. A primeira etapa adicionar a dependência no arquivo pubspec.yaml. 

Passo 1 - inserir dependência no pubspec.yaml

Adicione google_mobile_ads como uma dependência em seu arquivo pubspec.yaml:

Após isso, execute flutter pub get para obter as dependências.

$ flutter pub get

Passo 2 - inserir ID do App  no  AndroidManifest.xml

No caso de aplicativos que serão executados no ambiente Android, é preciso inserir o Id do App,  obtido no AdMod, no arquivo AndroidManifest.xml. No nosso exemplo usaremos o Id de teste.

Passo 3 - inserir código no aplicativo para exibir os anúncios. 

Para organizar melhor o código iremos criar um arquivo, denominado de util.dart, que irá conter o código para tratamento dos anúncios. A figura abaixo mostra o primeiro trecho de código deste arquivo. Neste primeiro trecho, importamos o pacote google_mobile_ads. 

    O trecho mostra, também, a classe auxiliar AdHelper, que retorna a AdUnit de acordo com o sistema operacional.  

    A figura abaixo mostra o próximo trecho de código deste arquivo. Neste trecho, criamos uma variável anuncioBanner para a referência do objeto que contém as informações do anúncio do tipo banner.

     A figura abaixo mostra o próximo trecho de código deste arquivo. Neste trecho, criamos uma variável interstitialAd para a referência do objeto que contém as informações do anúncio do tipo InterstitialAd. Foram criadas, também, duas funções auxiliares, a createInterstitialAd cria uma anúncio novo e a função disposeInterstitialAd elimina o anúncio, caso exista. 

A figura abaixo mostra trecho de código que efetivamente exibe o anúncio intersticial. 

Uma vez criado o arquivo util.dart, mostraremos agora as alterações no arquivo main.dart, que permitem a exibição dos anúncios. No trecho abaixo mostramos a importação do pacote google_mobile_ads e do arquivo auxiliar util.dart. 

    No trecho a seguir carregamos o anúncio do tipo Banner na inicialização e na função que trata o clique sobre o botão de consulta, inserimos o código que mostra o anúncio intersticial, como uma probabilidade de 50% a cada clique.  

No trecho de código abaixo mostramos que contém o widget que exibe o anúncio. Estamos usando um adWidget dentro de um Container que é exibido no bottomNavigationBar do widget Scaffold. Onde será exibido o anúncio é uma decisão do projetista. No nosso caso, optamos por exibir na pate inferior da tela. 

Aqui terminamos as inserções no código para que os anúncios fossem exibidos. Procuramos manter o código o mais simples possível, porém, aplicativos mais complexos podem exigir soluções de arquitetura mais sofisticados. O código completo do projeto pode ser encontrado no seguinte repositório do github: 

https://github.com/aeledois/cepad/

Segue abaixo exemplos de tela de execução do projeto exibindo anúncios. 

Exibindo um anúncio tipo banner de teste.

Exibindo um anúncio tipo intersticial de teste.

Lembre-se de seguir as políticas do Google AdMob e as diretrizes de exibição de anúncios ao usar anúncios em seu aplicativo. Além disso, teste os anúncios em um ambiente de desenvolvimento antes de lançar seu aplicativo para garantir que tudo esteja funcionando conforme o esperado.

    Esperamos que este tutorial tenha sido útil e que você agora esteja animado para explorar mais possibilidades de desenvolvimento móvel com Flutter! Nas próximas postagens deste blog ensinaremos como  colocar o aplicativo na Google Play Store.