Configurar anúncios do AdMob em um aplicativo React Native usando Expo é um processo direto, mas envolve alguns passos importantes. Aqui, irei demonstrar esse processo com base nas informações disponíveis no
Abra seu arquivo app.json ou app.config.js e adicione a configuração do Google Mobile Ads:
{
"expo": {
"react-native-google-mobile-ads": {
"android_app_id": "ca-app-pub-XXXXXXXXXXXXXXXX~XXXXXXXXXX",
"ios_app_id": "ca-app-pub-XXXXXXXXXXXXXXXX~XXXXXXXXXX"
}
}
}
Certifique-se de substituir ca-app-pub-XXXXXXXXXXXXXXXX~XXXXXXXXXX pelo seu próprio ID de aplicativo do AdMob.
Antes de carregar anúncios, faça com que seu aplicativo inicialize o Google Mobile Ads SDK chamando initialize, que inicializa o SDK e retorna uma promisse assim que a inicialização for concluída (ou após um tempo limite de 30 segundos). Isso precisa ser feito apenas uma vez, de preferência no carregamento do aplicativo.
import mobileAds from 'react-native-google-mobile-ads';
mobileAds()
.initialize()
.then(adapterStatuses => {
// Inicialização completa!
});
Passo 3: Implementação dos Anúncios
Agora, vamos implementar os anúncios no seu aplicativo. Importe e configure o AdMob no seu código React Native:
Banner Ad
import { BannerAd, BannerAdSize } from 'react-native-google-mobile-ads';
import React, { useEffect } from 'react';
import { View } from 'react-native';
export default function App() {
return (
<View>
<BannerAd
adUnitID="ca-app-pub-XXXXXXXXXXXXXXXX/XXXXXXXXXX" // Substitua pelo seu próprio ID de unidade de anúncio
size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
requestOptions={{
requestNonPersonalizedAdsOnly: true,
}}
/>
</View>
);
}
Intersticial Ad
import { InterstitialAd, AdEventType } from 'react-native-google-mobile-ads';
import React, { useEffect } from 'react';
import { Button } from 'react-native';
export default function App() {
useEffect(() => {
const unsubscribe = interstitial.addAdEventListener(
AdEventType.LOADED,
() => {}
);
interstitial.load();
return unsubscribe;
}, []);
const showInterstitialAd = () => {
interstitial.loaded && interstitial.show();
};
return (
<Button
title="Mostrar Anúncio Intersticial"
onPress={showInterstitialAd}
/>
);
}
Conclusão
E pronto! Você configurou com sucesso anúncios do AdMob, incluindo anúncios de banner e intersticiais, no seu aplicativo React Native usando Expo. Este guia foi feito para te dar uma introdução básica; consulte a documentação oficial para detalhes mais avançados e opções de configuração.
Se precisar de mais ajuda, sinta-se à vontade para perguntar. Boa sorte com seu aplicativo!
SOCIAL SHARE CARD GENERATOR