Introdução
A monetização na web já existe há décadas e sua popularidade continua a ganhar força, especialmente à medida que novas tecnologias surgem diariamente. Além de ganhar uma receita extra com o tráfego do seu site, outra forma de ganhar dinheiro é por meio da monetização de aplicativos móveis por meio de anúncios para celular.
A monetização em um aplicativo móvel é um pouco diferente da monetização do site, com a principal diferença no posicionamento e nas configurações dos anúncios.
Neste tutorial, mostrarei como gerar receita extra por meio de anúncios, implementando o Google AdMob no React Native. Também demonstrarei como a AdMob funciona no React Native criando um aplicativo de exemplo para exibir diferentes anúncios no aplicativo usando Firebase e React Firebase nativo .
Aqui está o que vamos cobrir:
- O que é AdMob?
- formatos de anúncio da AdMob
- Criação de um aplicativo Firebase
- Criação de uma conta da AdMob
- Reação de aplicativo nativo com exemplo da AdMob
- Exibição de anúncios da AdMob no aplicativo nativo React
- Detalhando o código
Para acompanhar este tutorial de estilo do React Native, você deve ter:
- Familiaridade com CSS, HTML e Javascript (ES6)
- Node.js e Watchman instalados em sua máquina de desenvolvimento
- Simulador de iOS ou emulador de Android para teste
- Um editor de código instalado em sua máquina de desenvolvimento (por exemplo, VS Code)
- Uma compreensão básica de React e React Native
O que é AdMob?
A AdMob é uma empresa de publicidade móvel do Google fundada em 2016 por Omar Hamoui. A empresa capacita desenvolvedores de aplicativos móveis e empresas a alavancar a publicidade de aplicativos móveis para aumentar sua receita.
Formatos de anúncio da AdMob
Embora seja empolgante ganhar algum dinheiro extra, entender o anúncio certo a ser exibido em seu aplicativo é a chave para a monetização sustentável. Abaixo está uma lista de anúncios da AdMob e uma descrição de onde exibi-los.
- Recompensado: anúncios que você pode mostrar aos usuários em troca de recompensas no aplicativo, por exemplo, mais pontos de vida, pontos extras e dicas de jogo
- Nativo: esses são os anúncios típicos que parecem fazer parte do seu aplicativo
- Banner: um anúncio retangular que pode ser colocado na parte superior ou inferior da tela do aplicativo
- Intersticial: anúncios em vídeo exibidos no ponto de interrupção ou ponto de transição do seu aplicativo
Agora que você está familiarizado com a AdMob e seus anúncios disponíveis, vamos criar um projeto Firebase para demonstrar a AdMob em ação.
Criação de um aplicativo Firebase
Firebase é uma tecnologia de back-end totalmente funcional usada para construir aplicativos móveis e da web. É o local ideal para criar recursos em tempo real, como notificações push, mensagens em tempo real e bancos de dados em tempo real.
Decidi construir este tutorial com o Firebase por causa de seu suporte para AdMob pronto para uso. É mais fácil de integrar com menos configurações.
Etapa 1
Visite https://firebase.google.com e clique no link Obter botão iniciado . No console, clique em Adicionar produto , conforme mostrado na captura de tela abaixo:
Etapa 2
Digite um nome preferido para o seu projeto. Para este tutorial, estou usando o React Native Admob . Clique em Continuar para ir para a próxima etapa:
Etapa 3
Clique em Continuar até chegar à Etapa 3 de 3 e, a seguir, clique em Criar um projeto . Assim que seu projeto for criado, você deverá ver uma tela como esta abaixo:
Etapa 4
Para implementar a AdMob no Firebase, tudo que você precisa obter do Firebase é GoogleService-Info.plist para iOS ou google-services.json para Android.
Você pode fazer isso adicionando um arquivo iOS ou Android ao projeto criado na Etapa 1, conforme mostrado na captura de tela abaixo:
Agora que você registrou um aplicativo iOS e obteve o GoogleService-Info.plist , vamos prosseguir com a configuração de uma conta da AdMob para que possamos começar a criar nosso primeiro aplicativo para celular monetizado com React Native.
Criação de uma conta da AdMob
Para criar e configurar sua conta da AdMob, siga as etapas simples abaixo.
Etapa 1
Visite https://apps.admob.com , faça login em sua conta do Google para acessar a AdMob, concorde com os termos de serviço e clique em criar uma conta da AdMob . Aceite ofertas especiais e dicas se estiver interessado e clique em Continuar . Você deve ser redirecionado para uma página semelhante à imagem abaixo:
Etapa 2
Na barra lateral, clique em Aplicativos (descrito na captura de tela abaixo). Se você já conectou aplicativos à sua conta da AdMob, deverá vê-los listados lá. Caso contrário, você encontrará um link para criar um novo aplicativo.
Etapa 3
A seguir, clique no botão ADICIONAR UNIDADE DE ANÚNCIO para criar uma nova unidade de anúncio. Você precisa configurar um bloco de anúncios para exibi-lo em seu aplicativo. Você sempre precisará de um ID de bloco de anúncios para exibir blocos de anúncios em diferentes partes do seu aplicativo. Veja a imagem abaixo:
Reaja aplicativo nativo com AdMob
Antes de prosseguirmos, vamos criar um novo aplicativo React Native, instalar a dependência necessária e realizar as configurações necessárias.
Neste tutorial, usaremos o React Native Firebase para nos comunicar com a AdMob e exibir os anúncios.
Primeiro, vamos inicializar um novo aplicativo React Native. Execute o código abaixo para começar:
npx init nativo reactivo ReactNativeAdmob
Em seguida, instale o React Native Firebase com o código abaixo:
npm install--save @ react-native-firebase/app
Abra o Xcode e adicione o GoogleService-Info.plist que você baixou do Firebase ao seu projeto iOS.
Então, precisamos inicializar o Firebase para usar nossa credencial de AppDeligate.m . Abra AppDelegate.m de sua pasta iOS e cole o código abaixo na parte superior do arquivo para importar o módulo Firebase:
#import
Cole o código abaixo na função didFinishLaunchingWithOptions para configurar o Firebase:
if ([FIRApp defaultApp]==nil) {
[Configurar FIRApp];
}
Reconstrua o projeto com o comando abaixo:
cd ios/ pod install--repo-update CD.. npx react-nativo run-ios
Em seguida, precisamos instalar a dependência do Firebase AdMob com o seguinte código:
npm install @ react-native-firebase/admob
Em seguida, crie firebase.json no diretório raiz do aplicativo React Native, cole o código abaixo para configurar e vincule seu aplicativo à conta da AdMob:
{ "react-native": { "admob_android_app_id":"ca-app-pub-xxxxxxxx ~ xxxxxxxx", "admob_ios_app_id":"ca-app-pub-xxxxxxxx ~ xxxxxxxx"
}
}
Substitua os valores admob_android_app_id e admob_ios_app_id por seus IDs de aplicativo apropriados.
Reconstrua o aplicativo para aplicar as alterações:
cd ios/&& pod install npx react-nativo run-ios
Exibindo anúncios da AdMob no aplicativo nativo React
Usaremos os IDs de teste padrão fornecidos com a dependência do Firebase AdMob porque não é aconselhável usar o ID do seu aplicativo durante o desenvolvimento. Assim que seu aplicativo estiver pronto para produção, você pode substituir o ID do aplicativo.
Exibindo anúncios de banner
A dependência do Firebase AdMob oferece acesso a uma série de tags usadas para exibir diferentes tipos de anúncios no React Native.
Para um anúncio de banner, usaremos a tag
import {TestIds, BannerAd, BannerAdSize} from'@ react-native-firebase/admob'; {
console.log ('Anúncio carregado');}}
onAdFailedToLoad={(erro)=> {
console.error ('Falha ao carregar anúncio:', erro);}}
/>
Se você percebeu, usamos o TestIds.BANNER para informar à dependência da AdMob que desejamos usar o ID de teste para implementar o anúncio. Também registramos no console quando o anúncio é carregado usando o manipulador de eventos onAdLoaded .
Exibindo anúncios intersticiais
Os anúncios intersticiais geralmente são acionados por eventos e, como são anúncios de página inteira, não há problema em agrupá-los em um evento ou ao lado do evento acionado de um usuário.
Para implementar um anúncio intersticial, precisamos importar a classe
import {InterstitialAd, TestIds, AdEventType} de'@ react-native-firebase/admob'; ...
showInterstitialAd=()=> {
interstitialAd.onAdEvent ((tipo, erro)=> {
if (type===AdEventType.LOADED) {
interstitialAd.show ();
}});
interstitialAd.load ();
}
Como o anúncio intersticial demora para carregar, é aconselhável chamar o método .show () no evento .LOADED . Observe que você pode arriscar um travamento se tentar chamar o método .show () fora do evento .LOADED .
Exibindo anúncios de recompensa
Um anúncio de recompensa é mostrado aos seus usuários em troca de recompensas no aplicativo. Ele também adota uma abordagem semelhante ao anúncio intersticial para implementar:
import {TestIds, RewardedAd, RewardedAdEventType} de'@ react-native-firebase/admob';
....
showRewardAd=()=> {
//Crie uma nova instância
const recompensaAd=RewardedAd.createForAdRequest (TestIds.REWARDED);
//Adicionar manipuladores de eventos
RewardsAd.onAdEvent ((tipo, erro)=> {
if (type===RewardedAdEventType.LOADED) {
RewardsAd.show ();
} if (type===RewardedAdEventType.EARNED_REWARD) {
console.log ('O usuário ganhou recompensa de 3 estrelas');
Alert.alert ('Nova recompensa','Você acabou de ganhar uma recompensa de 3 estrelas', [{text:'OK', onPress: ()=> console.log ('OK pressionado')},], {cancelável: verdadeiro } )
}}); //Carregar um novo anúncio
RewardsAd.load ();
}
Da mesma forma, o anúncio de prêmio também leva tempo para carregar, razão pela qual chamamos o método .show () no manipulador RewardedAdEventType.LOADED . Você também pode usar .EARNED_REWARD para dar ao seu usuário a recompensa prometida no aplicativo.
Conclusão
Quer você tenha um aplicativo React Native pronto para produção ou seu aplicativo já esteja implantado na loja iOS ou Android sem monetização anterior, a AdMoetub pode servir como a tecnologia para preencher essa lacuna.
A postagem Como implementar a AdMob em React Native com Firebase apareceu primeiro no LogRocket Blog .
