Como Configurar Anúncios do AdMob em um Aplicativo React Native Usando Expo

drigomartins

Rodrigo Martins

Posted on November 26, 2024

Como Configurar Anúncios do AdMob em um Aplicativo React Native Usando Expo

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
Enter fullscreen mode Exit fullscreen mode

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:

Image description

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"
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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!
  });
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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}
    />
  );
}
Enter fullscreen mode Exit fullscreen mode

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!

💖 💪 🙅 🚩
drigomartins
Rodrigo Martins

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