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.
Muito Obrigado, esse foi o método mais simples que eu encontrei para implementar, muito obrigado.
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?
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
testDeviceIdsno métodoinitialize: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.
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.
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
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?
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.
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…
Olá, Marcelo. Obrigado pelo elogio!
Realmente, o
firebase_admobnão permite o posicionamento livre de banner. Já oadmob_flutterpermite 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! 🙂
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!
Olá, Flávio.
Obrigado pelo elogio.
Pergunta muito boa, mas não sei te responder. 🙁
Sugiro que você dê uma olhada nas políticas do Admob.
Espero ter ajudado.