Monetizando seu app com AdMob e Flutter
1- Criando seu aplicativo no Admob.
Primeiro você deve acessar o site da Admob e cadastrar sua conta lá. após ter feito isso, você precisa criar seu app, para isso é só seguir as instruções:
Depois de configurar sua conta, você precisa ir até o menu de “apps”, e depois clicar no botão “adicionar aplicativo”
Aqui vem os passos óbvios, basta ir respondendo as perguntas que o Admob irá fazer.
Após ter criado o aplicativo, é importante que você pegue o seu ID do Admob e guarde ele, vamos usa-lo mais tarde.
Após isso, você já pode criar o banner e o intersticial clicando no botão “Próxima Etapa: Criar um bloco de Anúncios”
No seu caso, pode não estar disponível o tipo de anúncio Nativo Avançado, não me lembro agora mas para que o Admob te disponibilize esse formato você precisa de uma rentabilidade mínima no mês de $10 dólares.
Mas nesse caso basta clicar em adicionar o banner.
Não tem muito segredo aqui, basta criar o bloco de anúncios e dar um nome a ele.
Esses são os ID`s que vamos precisar adicionar no código futuramente.
Você pode clicar em “Criar Outro Bloco de Anúncios”, e vamos criar o Intersticial.
Novamente, basta clicar em criar o intersticial
Todos os blocos de anúncios que criamos ficaram disponíveis na lista de blocos de anúncios do aplicativo.
2- Integrar aplicativo no firebase.
Para que possamos exibir os anúncios em nosso aplicativo, é necessário criar e configurar nosso aplicativo no firebase, e se você integrar o Admob com o firebase, a google consegue mostrar anúncios para os seus usuários baseados nos interesses deles, assim tendo maior probabilidade de ter um clique ou mais interesse.
Esta etapa não tem segredo, a ideia é ir avançando e aceitar os termos do firebase para ter acesso ao painel deles e criar o nosso aplicativo.
Após ter seguido os passos para a criação do projeto no firebase, agora vamos adicionar nosso aplicativo, você pode começar pelo sistema que preferir, Android ou IOS.
Configurando o aplicativo no IOS.
Para adicionar um aplicativo IOS no firebase precisamos especificar o bundle ID do nosso projeto, você pode encontrá-lo no seguinte arquivo:
ios/Runner.xcodeproj/project.pbxproj
Nesta etapa, precisamos fazer o download do arquivo e importá-lo no nosso projeto.
Minha recomendação é fazer a cópia do arquivo para a pasta do IOS usando o XCODE, dessa forma a própria IDE fará a configuração do projeto para que ele seja indexado.
Clique em “Próxima”.
Para que seu aplicativo seja reconhecido pelo firebase, vamos agora rodar nosso aplicativo no flutter com as configurações corretas.
Configurando o aplicativo em Flutter:
A primeira coisa que precisamos fazer é adicionar a dependência do `firebase_admob` no nosso projeto.
Precisamos agora fazer o download da dependência que acabamos de adicionar. Vamos fazer isso usando o comando `flutter pub get`.
Após ter sido feito o download da biblioteca, vamos de fato implementar o código em dart para fazer com que o firebase reconheça ele.
Para isso, precisamos importar a biblioteca do`firebase_admob` na nossa classe `main.dart`.
Agora vamos criar nossa classe de `TargetInfo`, onde temos diversas propriedades para filtrar os anúncios que vão ser exibidos.
Nessas propriedades conseguimos especificar as Keywords, que são as palavras chave do tipo de anúncio que queremos exibir.
- Um exemplo de keywords para um aplicativo de imobiliária, você poderia especificar nas keywords “casa”, “imóvel”, “apartamento” etc. Dessa forma a google vai entender quais anúncios exibir para seu público com base nessas palavras chave.
- Não consegui encontrar muitos detalhes sobre esse “contentUrl”, se quiser se aprofundar na documentação, este é o link. (eu não uso esse parâmetro)
- A propriedade “childDirected” você só deve colocar como “true” se caso seu aplicativo for especifico para o publico infantil. Ao habilitar essa opção a google vai filtrar os anúncios que serão exibidos neste bloco de anuncio.
Vamos integrar o banner ao nosso aplicativo, para isso você precisa criar as variáveis no início do seu código.
Banner
Agora vamos criar nosso método que vai iniciar o banner.
Vejamos que temos diversas propriedades que podemos passar na construção do nosso banner.
- adUnitId: é o nosso ID do banner que criamos lá na primeira etapa do tutorial.
- size: É o tamanho do banner que vamos usar em nosso aplicativo, sendo possíveis os seguintes tamanhos. ( Eu costumo usar o “smartBanner” fazendo com que o banner se ajuste da melhor forma de acordo com o espaço )
- targetingInfo: Aqui vamos passar nosso objeto de targetInfo que criamos com todas as propriedades do anúncio.
- listener: Para cada evento que o usuário executar ou o banner realizar, ele será retornado nesse listener, que vai ficar escutando esses eventos. Aqui está uma lista com todos eles:
-MobileAdEvent.opened: é chamado quando o anúncio é aberto para o usuário.
-MobileAdEvent.clicked: É chamado quando o usuário clica no anúncio.
-MobileAdEvent.closed: Caso o usuário feche o anúncio, esse evento será chamado.
-MobileAdEvent.failedToLoad: Caso o request pelo anúncio tenha falhado, esse evento será chamado e você deve exibir outra tela, ou simplesmente ignorar e não exibir o anúncio, já que não foi possível completar o request do anúncio.
-MobileAdEvent.impression: É chamado quando o usuário visualiza o anúncio.
- MobileAdEvent.leftApplication: Este evento é chamado quando o usuário deixa o aplicativo, a ideia aqui é que você pare de carregar o anúncio quando ele deixar a aplicação.
Após criar nosso método de inicialização do banner, precisamos exibir na tela. Para isso vamos criar mais um método.
Nele conseguimos passar o “anchorType” que vai ser onde queremos que o banner fique localizado.
É importante que limpemos a memória toda vez que o usuário fechar a aplicação ou quando o evento dispose for chamado, para isso basta adicionar no seu código dart o seguinte script.
E por fim, vamos chamar as funções de inicialização do banner.
Feito isso o banner já vai ser exibido na localização que você especificou, porém, devido ao framework renderizar o banner acima de tudo ele vai sobrepor o conteúdo de seu app. Para isso podemos utilizar uma parte específica da tela de nosso app reservada para o banner, no exemplo abaixo foi usado o Padding no bottom, assim o Scaffold e todo o conteúdo do app não vai ficar abaixo do banner.
Intersticial
Para integrar o intersticial, precisamos incluir o trecho de código abaixo que recebe as mesmas propriedades do banner. A diferença aqui está no listener, onde foi inserida a verificação para checar quando o anúncio foi completamente carregado e está pronto para ser exibido. E a verificação caso o usuário tenha clicado ou fechado, ai vamos limpar o anuncio da memoria.
Para exibir o anúncio intersticial basta usar o código abaixo.
Link do projeto finalizado no github.
Obrigado pessoal, espero que o tutorial tenha ajudado em algo.
Me siga nas redes sociais.
