Monetizando Aplicativos em Flutter com o Admob

Aqui no blog, em um post anterior, eu já demonstrei como utilizar o Admob com o objetivo de monetizar um app. Nesse antigo post, além da criação dos anúncios no console do Admob, foi realizada também a implementação da integração em um aplicativo Android desenvolvido em Java. Porém, se quiséssemos criar uma versão desse mesmo app para o iOS, por exemplo, a maneira de implementar os anúncios seria completamente distinta, o que custaria mais tempo e estudo.

Com a ascensão do Flutter ficou mais fácil a monetização de apps, uma vez que, com uma mesma implementação, é possível monetizar o aplicativo tanto para Android quanto para iOS. Apesar do Flutter ser um framework novo para o desenvolvimento de apps, ele já possui diversos pacotes que auxiliam o desenvolvedor a monetizar seu app. Um deles, o admob_flutter, eu mencionei anteriormente quando falei de alguns pacotes úteis para a criação de apps em Flutter. Com o uso de pacotes como o admob_flutter, é possível garantir que a posição e a exibição dos anúncios serão mantidas tanto na versão Android quanto na iOS do app.

Neste post, vamos utilizar o admob_flutter para exibirmos anúncios em um aplicativo desenvolvido em Flutter. Serão implementados anúncios em banner e full screen. Lembrando que focaremos apenas na implementação. Toda a parte de criação e configuração no Admob já foi detalhada em posts anteriores.

Então, sem mais blá blá blá… Vamos começar a implementação.

Primeiramente, vamos importar o pacote no pubspec.yaml:

Com a importação feita, precisamos atualizar o arquivo AndroiMainfest.xml na pasta android > app > main, adicionando na tag application o seguinte código:

É importante deixar claro que tanto o APPLICATION_ID (exposto acima) quanto os ID dos blocos de anúncios que serão usados no projeto deste post são exemplos disponibilizados pelo próprio Admob. Por isso, é interessante trocar os ID por outros antes de utilizar o código em seu aplicativo (você não quer dar sua monetização de graça à Google não é mesmo? kkk).

Para os anúncios também rodarem no iOS, é preciso inserir o seguinte trecho de código ao final do arquivo Info.plist na pasta ios > Runner:

Feito isso, já podemos começar a implementar a tela principal do app, a qual exibirá três tipos de anúncios. Serão dois do tipo banner, sendo um pequeno de 320×50 e outro médio de 300×250. Além disso, também será exibido um intersticial (full-screen). Na documentação do Admob é possível encontrar todos os tamanhos de anúncios disponíveis.

Continuando a implementação, precisamos inserir o seguinte trecho de código no método main do nosso projeto:

No código acima, no método Admob.initialize, é realizada a inicialização da integração com o Admob. Lembrando que o ID da aplicação deve ser passado como parâmetro de acordo com a plataforma (você deve criar um ID para o Android e outro para o iOS).

Com o ID da aplicação já atribuído, precisamos criar variáveis para receber os ID dos blocos de anúncio para cada plataforma. Os métodos getBannerId e getInterstitialId foram criados apenas para retornar o ID de acordo com a plataforma em que o app estiver sendo executado.

No método initState do nosso StatefulWidget, instanciamos um AdmobInterstitial e criamos um método chamado getBanner para instanciar um AdmobBanner, o qual possui como parâmetro o tamanho do banner que deve ser exibido. Além disso, também implementamos o método showInterstitial para checar se o anúncio intersticial foi carregado e exibi-lo.

É importante ressaltar que com o pacote admob_flutter também é possível manipular os eventos gerados no carregamento dos anúncios. Podendo o evento ser gerado quando o anuncio foi aberto ou falhou no carregamento, por exemplo. Para isso implementamos o método handleEvent com o objetivo de customizar uma ação para cada tipo de evento capturado.

Finalizada a base da integração, a próxima etapa é criar posicionar os anúncios na tela. Com o pacote admob_flutter esse posicionamento é livre. Para este tutorial, um widget foi implementado de modo que a tela fosse dividida em três partes. Dessa forma, o banner de 320×50, o banner de 300×250 e um botão para executar o anúncio intersticial foram dispostos nessa ordem.

No código acima é possível notar que é preciso chamar o dispose do intersticial quando este bloco de anúncio não for mais necessário (antes do app ser fechado, por exemplo).

O resultado final da tela que foi implementada neste post pode ser visto baixo:

Para visualizar o código fonte do projeto desenvolvido neste post acesse: https://github.com/luizmarcus/Flutter/tree/master/exemplo_admob

Bom, é isso.
Qualquer dúvida, deixa um comentário.

11 comentários em “Monetizando Aplicativos em Flutter com o Admob”

  1. Muito Obrigado, esse foi o método mais simples que eu encontrei para implementar, porém o meu não está aparecendo os banners apenas os de teste quando tento usar os meus ids aparecem erros. vc pode me ajudar?

    Responder
    • Olá, David.

      O correto, enquanto você está testando seu app, é utilizar os IDs de teste que o Admob fornece. Se você utilizar os seus IDs de produção para realizar os testes, o Admob pode entender como quebra de política de uso e invalidar seus banners.
      O jeito correto de testar seus próprios IDs, na versão 1.0.1 da admob_flutter, é adicionar o parâmetro testDeviceIds no método initialize:

      Admob.initialize(testDeviceIds: ["ID DO SEU DISPOSITIVO"]);

      O ID do seu dispositivo você encontra no terminal de Debug quando você executa o projeto. Dessa forma, fazendo uso do código acima, você poderá testar seus banners sem problemas.

      Espero ter ajudado.

      Responder
      • Bom dia Luiz e muito obrigado pelo retorno, estou muito perto de colocar o meu primeiro filho na loja. Pode apenas tirar mais algumas dúvidas por favor.
        Então em desenvolvimento tenho que manter os id de teste, quando eu fechar o app para publicação devo colocar os meu ids no local, certo ou tem uma forma de fazer essa troca automaticamente?

        No momento o meu código de main está assim:
        void main() {
        WidgetsFlutterBinding.ensureInitialized();
        Admob.initialize(testDeviceIds: [‘ca-app-pub-meu código’]);
        runApp(Hub());
        }

        Devo manter assim na hora de fechar o app ou tenho que alterar alguma coisa nessa parte?

        De toda forma muito obrigado pelo trabalho maravilho, tive alguns problemas com o firebase, porém de resto ocorreu tudo nos conforme.

        Responder
        • Olá, David. De nada! =]

          Exatamente, em desenvolvimento você mantém os ID de teste. Quando for publicar o app, troca para os seus ID.
          Outra possibilidade, como eu mencionei na resposta anterior, é você utilizar os seus próprios ID e adicionar a linha Admob.initialize(testDeviceIds: ["ID DO SEU DISPOSITIVO"]). Assim, você pode testar o app normalmente e não precisa fazer a troca dos ID. Quando o app for publicado, os banners já serão exibidos em produção.

          No trecho de código que você enviou, o valor que você atribuiu no testDeviceIds está errado. Nesse parâmetro, você deve informar o ID do seu dispositivo que será usado nos testes. Para encontrar o ID, basta executar o seu app no dispositivo e verificar o LogCat do Android Studio. Dá uma olhada na imagem abaixo:

          https://i.stack.imgur.com/pGqTU.png

          Responder
  2. Faltou uma pergunta.
    O que eu coloco no lugar do APPLICATION_ID dessa parte do código:
    android:name=”com.google.android.gms.ads.APPLICATION_ID”
    ou apenas não mexo?

    Responder
    • David,

      O APPLICATION_ID refere-se ao ID do seu app na Admob. O que você precisa fazer é acessar a sua conta no Admob, copiar o ID do seu app e colar no AndroidMainfest.xml:

      android:name="com.google.android.gms.ads.APPLICATION_ID"
      android:value="ca-app-pub-ID-DA-SUA-APLICAÇÃO-NO-ADMOB"

      Espero ter ajudado.

      Responder
  3. Muito intuitivo o tutorial. Parabéns. Estive usando o firebase_admob, mas como ele não permite o uso do banner onde eu quiser, terei de migrar para este outro package…

    Responder
    • Olá, Marcelo. Obrigado pelo elogio!

      Realmente, o firebase_admob não permite o posicionamento livre de banner. Já o admob_flutter permite o uso de banner como widget. Não esquece de olhar a documentação, pois o pacote ganhou algumas melhorias após este post ter sido publicado.

      Boa sorte! 🙂

      Responder
  4. Olá Luiz, excelente post. Tenho 1 dúvida amigo… Com certeza os anúncios funcionam sem precisar publicar na loja (google play) o App? Ou é obrigatório publicar? Pergunto porque há uns 4 anos atrás, eu fiz um App e funcionou os anúncios sem publicar o App, mas ouvi falar que agora é obrigatório publicar! É que não queria publicar esse App por enquanto. Ficarei feliz se puder me responder, obrigado!

    Responder

Deixe um comentário