Configura el SDK de anuncios de Google para dispositivos móviles para React Native

Para publicar anuncios y obtener ingresos, integra el Google Mobile Ads SDK for React Native en tu app de React Native. En esta guía, se explica cómo instalar e inicializar el Google Mobile Ads SDK for React Native, y seleccionar un formato de anuncio.

Requisitos previos

Antes de continuar, obtén lo siguiente:

  • React Native 0.85.0 o una versión posterior
  • Una cuenta de AdMob y un ID de app Para obtener un ID de app, consulta Cómo configurar una app en AdMob.

  • Los siguientes elementos de Android:

    • Nivel de API de Android 24 o posterior
    • La versión más reciente de Android Studio
    • Versión 8.0 o posterior del complemento de Android para Gradle (AGP)

  • Los siguientes elementos de iOS:

    • iOS 13.0 o una versión posterior
    • Xcode 16.0 o una versión posterior, y herramientas de línea de comandos habilitadas.
    • CocoaPods

Instalar Google Mobile Ads SDK for React Native

Para instalar Google Mobile Ads SDK for React Native, haz lo siguiente:

  1. Descarga la carpeta gma-sdk-react-native de Google Drive.

  2. Extrae el archivo ZIP en un directorio independiente fuera del directorio de trabajo del proyecto. Este proceso podría evitar conflictos con los archivos de configuración de tu proyecto.

  3. En la raíz del proyecto, crea un directorio local_packages/.

  4. En este directorio, copia el archivo mobile-ads-0.1.0.tgz:

    mkdir -p local_packages
cp EXTRACT_DIR/gma-sdk-react-native/google-mobile-ads/mobile-ads-0.1.0.tgz local_packages/

    Reemplaza EXTRACT_DIR por la ruta de acceso al directorio en el que extrajiste el archivo.

  5. Instala el paquete con tu administrador de paquetes preferido:

    npm

    npm install ./local_packages/mobile-ads-0.1.0.tgz

    hilo

    yarn add ./local_packages/mobile-ads-0.1.0.tgz

Cómo configurar tu app

Para configurar tu app con dependencias de la plataforma, agrega tus IDs de app de AdMob al archivo app.json de la raíz de tu proyecto.

Para realizar pruebas, usa los IDs de app de AdMob de ejemplo que se muestran en el siguiente caso:

{
  "name": "APP_NAME",
  "displayName": "APP_NAME",
  "googleMobileAds": {
    "android_app_id": "ca-app-pub-3940256099942544~3347511713",
    "ios_app_id": "ca-app-pub-3940256099942544~1458002511"
  }
}

Durante el tiempo de compilación, Google Mobile Ads SDK for React Native agrega la propiedad android_app_id al archivo AndroidManifest.xml y la propiedad ios_app_id en el archivo Info.plist compilado como la clave GADApplicationIdentifier.

Para obtener opciones específicas de la plataforma o realizar la configuración manual, selecciona una de las siguientes plataformas:

Android

Si administras varias configuraciones de compilación o integras React Native en una app para Android existente, agrega tu ID de app que se monetiza mediante AdMob en el elemento <application> del archivo AndroidManifest.xml de tu proyecto en lugar del archivo app.json:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">
  <application>
    <!-- Sample AdMob app ID: ca-app-pub-3940256099942544~3347511713 -->
    <meta-data
        android:name="com.google.android.gms.ads.APPLICATION_ID"
        android:value="SAMPLE_APP_ID"
        tools:replace="android:value"/>
  </application>
</manifest>

Gradle resuelve automáticamente las dependencias de Android durante el tiempo de compilación.

iOS

Completa los siguientes pasos:

  1. Instala las dependencias de CocoaPods desde el directorio ios/ de tu proyecto:

    pod install --repo-update

    Como alternativa, instala las dependencias de CocoaPods desde el directorio raíz de tu proyecto:

    npx pod-install

    La vinculación automática de CocoaPods configura la secuencia de comandos de la fase de compilación de Xcode que agrega la propiedad ios_app_id del archivo app.json en tu archivo Info.plist compilado.

  2. En el archivo Info.plist de tu app, agrega una clave SKAdNetworkItems en el elemento <dict> para Google cstr6suwn9.skadnetwork y compradores externos específicos.

    En el siguiente ejemplo, se muestra un archivo Info.plist completo que contiene el array SKAdNetworkItems requerido:

    Ejemplo completo

    <key>SKAdNetworkItems</key>
<array>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>cstr6suwn9.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>4fzdc2evr5.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>2fnua5tdw4.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>ydx93a7ass.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>p78axxw29g.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>v72qych5uu.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>ludvb6z3bs.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>cp8zw746q7.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>3sh42y64q3.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>c6k4g5qg8m.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>s39g8k73mm.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>wg4vff78zm.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>3qy4746246.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>f38h382jlk.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>hs6bdukanm.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>mlmmfzh3r3.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>v4nxqhlyqp.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>wzmmz9fp6w.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>su67r6k2v3.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>yclnxrl5pm.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>t38b2kh725.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>7ug5zh24hu.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>gta9lk7p23.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>vutu7akeur.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>y5ghdn5j9k.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>v9wttpbfk9.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>n38lu8286q.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>47vhws6wlr.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>kbd757ywx3.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>9t245vhmpl.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>a2p9lx4jpn.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>22mmun2rn5.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>44jx6755aq.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>k674qkevps.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>4468km3ulz.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>2u9pt9hc89.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>8s468mfl3y.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>klf5c3l5u5.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>ppxm28t8ap.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>kbmxgpxpgc.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>uw77j35x4d.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>578prtvx9j.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>4dzt52r2t5.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>tl55sbb4fm.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>c3frkrj4fj.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>e5fvkxwrpn.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>8c4e2ghe7u.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>3rd42ekr43.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>97r2b46745.skadnetwork</string>
  </dict>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>3qcr597p9d.skadnetwork</string>
  </dict>
</array>

Inicializa Google Mobile Ads SDK for React Native

Antes de cargar anuncios, llama al método initialize para inicializar Google Mobile Ads SDK for React Native. Llama al método initialize una vez cuando se inicie la app, por ejemplo, en el componente raíz App.tsx.

En el siguiente ejemplo, se inicializa el Google Mobile Ads SDK for React Native:

import {InitializationStatus, initialize} from '@google/mobile-ads';
import {useEffect, useState} from 'react';
import {Text, View} from 'react-native';

/**
 * Root application component demonstrating Google Mobile Ads SDK initialization.
 */
export function App() {
  const [isInitialized, setIsInitialized] = useState<boolean>(false);

  useEffect(() => {
    // Initialize the Google Mobile Ads SDK.
    initialize({}, (status: InitializationStatus) => {
      console.log('Mobile Ads SDK initialized successfully:', status);
      setIsInitialized(true);
    });
  }, []);

  return (
    <View>
      <Text>
        {isInitialized ? 'Mobile Ads SDK Ready' : 'Initializing SDK...'}
      </Text>
    </View>
  );
}

Selecciona un formato de anuncio

Después de inicializar el Google Mobile Ads SDK for React Native, puedes implementar anuncios. AdMob ofrece los siguientes formatos de anuncios:

Formato Descripción Documentación
Inicio de aplicación Aparece cuando los usuarios abren tu app o vuelven a ella, y se superpone a la pantalla de carga o de presentación. Configura anuncios para inicio de aplicación
Intersticial Son anuncios de pantalla completa que cubren la interfaz de la app que los aloja. Estos anuncios aparecen en puntos de transición natural del flujo de una app, como entre actividades o durante la pausa entre niveles de un juego. Configura anuncios intersticiales
Recompensado Son anuncios de pantalla completa que recompensan a los usuarios por mirar anuncios de video o interactuar con anuncios con juegos. Configura anuncios recompensados
Intersticial recompensado Es un formato de anuncio incentivado que te permite ofrecer recompensas por los anuncios que aparecen automáticamente durante las transiciones naturales de la app. Configura anuncios intersticiales recompensados