Añadir anuncios de Admob con React Native (Banner) – Monetiza tu APP

Tiempo de lectura: 2 minutos

En este tutorial, os voy a enseñar cómo añadir un Banner de Admob usando React Native y Expo.

Lo primero de todo es configurar un anuncio con Admob.

Una vez configurado obtenemos los códigos (de APP y de Bloque) e instalamos la librería expo-ads-admob.

expo install expo-ads-admob

Una vez instalada, creamos un nuevo componente que llamamos Banner (si no sabes crear uno, aquí te lo explicamos Crear un componente en React Native).

import React from "react";
import { AdMobBanner, setTestDeviceIDAsync } from "expo-ads-admob";

const Componente = (props) => {

    //Dispositivo de prueba
    setTestDeviceIDAsync("EMULATOR");

    return (
        <AdMobBanner
            bannerSize="banner"
            adUnitID="ca-app-pub-3940256099942544/6300978111"
            servePersonalizedAds={false}
            onDidFailToReceiveAdWithError={(error) => console.log(error)}
        />
    )
};

export default Componente;

Primero importamos los componentes necesarios de expo-ads-admob

import { AdMobBanner, setTestDeviceIDAsync } from "expo-ads-admob";

Después, en el render añadimos el bloque con el Banner.

    <AdMobBanner
        bannerSize="banner"
        adUnitID="ca-app-pub-3940256099942544/6300978111"
        servePersonalizedAds={false}
        onDidFailToReceiveAdWithError={(error) => console.log(error)}
    />

La propiedad adUnitID contiene el código que hemos sacado de Admob.

He puesto el de anuncios de prueba (ca-app-pub-3940256099942544/6300978111) pero por alguna razón no funciona. Por lo que si queréis que funcione el banner, tendréis que poner el código del anuncio final.

Ahora vamos a configurar app.json, dónde tendremos que añadir el código de APP.

Para IOS:

 "ios": {
      "supportsTablet": true,
      "config": {
        "googleMobileAdsAppId": "ca-app-pub-3940256099942544~1458002511"
      }
    },

Para ANDROID:

"android": {
      "package": "com.example",
      "config": {
        "googleMobileAdsAppId":"ca-app-pub-3940256099942544~3347511713"
      }
    },

Pero igual que en el paso anterior, la configuración de prueba (ca-app-pub-3940256099942544~3347511713) no funciona y tendremos que poner nuestro código de APP real. Si no la consola nos devuelve «No ad config».

Una vez añadidas las configuraciones, ya podemos añadir nuestro Banner al screen dónde queramos mostrarlo de la siguiente forma:

....

import Banner from '../componentes/Banner';

....

/Crear un componente llamado APP
const Screen = ({ navigation }) => {

    return (
        <View>
           <Banner />
        </View>
    )
};

....

Primero importamos el componente, y luego lo usamos cómo cualquier otro componente.

Importante: Para que funcionen correctamente en Android debemos añadir el código de APP directatmente en AndroidManifest.xml

 <meta-data
        android:name="com.google.android.gms.ads.APPLICATION_ID"
        android:value="ca-app-pub-NUESTRO_ID_CORRECTO"/>

Si no añadimos este código tendremos errores de [Error: [googleMobileAds/error-code-no-fill] The ad request was successful, but no ad was returned due to lack of ad inventory.]