Como Configurar Anúncios do AdMob em um Aplicativo React Native Usando Expo
Rodrigo Martins
Posted on November 26, 2024
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 React Native Google Mobile Ads.
Passo 1: Instalação das Dependências
Primeiro, vamos instalar as dependências necessárias. Abra seu terminal e execute os seguintes comandos:
npx expo install react-native-google-mobile-ads
Passo 2: Configuração do AdMob no Expo
Antes de poder exibir anúncios para seus usuários, você precisa ter uma conta do Google AdMob . No item de menu Apps, crie ou escolha um aplicativo Android/iOS existente. Cada plataforma de aplicativo expõe um ID de conta exclusivo que precisa ser adicionado ao projeto.
No item de menu Configurações do aplicativo, você pode encontrar o ID do aplicativo:
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!
Posted on November 26, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
November 27, 2024