Configurare l'SDK Google Mobile Ads per React Native

Per pubblicare annunci e generare entrate, integra Google Mobile Ads SDK for React Native nella tua app React Native. Questa guida illustra l'installazione e l'inizializzazione di Google Mobile Ads SDK for React Native e la selezione di un formato dell'annuncio.

Prerequisiti

Prima di continuare, procurati quanto segue:

  • React Native 0.85.0 o versioni successive.
  • Un account AdMob e un ID app. Per ottenere un ID app, consulta Configura un'app in AdMob.

  • I seguenti elementi Android:

    • Android con livello API 24 o versioni successive.
    • L'ultima versione di Android Studio.
    • Plug-in Android per Gradle (AGP) versione 8.0 o successive.

  • I seguenti elementi iOS:

    • iOS 13.0 o versioni successive.
    • Xcode versione 16.0 o successive e strumenti a riga di comando abilitati.
    • CocoaPods

Installa Google Mobile Ads SDK for React Native

Per installare Google Mobile Ads SDK for React Native, segui questi passaggi:

  1. Scarica la cartella gma-sdk-react-native da Google Drive.

  2. Estrai il file ZIP in una directory separata al di fuori della directory del progetto di lavoro. Questo processo potrebbe evitare conflitti con i file di configurazione del progetto.

  3. Nella directory root del progetto, crea una directory local_packages/.

  4. In questa directory, copia il file 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/

    Sostituisci EXTRACT_DIR con il percorso della directory in cui hai estratto l'archivio.

  5. Installa il pacchetto con il gestore di pacchetti che preferisci:

    npm

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

    filo

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

Configura la tua app

Per configurare la tua app con le dipendenze della piattaforma, aggiungi gli ID app AdMob al file app.json della directory principale del progetto.

Per i test, utilizza gli ID delle app monetizzate con AdMob di esempio mostrati nel seguente esempio:

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

Durante la fase di build, Google Mobile Ads SDK for React Native aggiunge la proprietà android_app_id al file AndroidManifest.xml e la proprietà ios_app_id nel file Info.plist creato come chiave GADApplicationIdentifier.

Per le opzioni specifiche della piattaforma o la configurazione manuale, seleziona una delle seguenti piattaforme:

Android

Se gestisci più configurazioni di build o stai integrando React Native in un'app per Android esistente, aggiungi l'ID app AdMob nell'elemento <application> del file AndroidManifest.xml del progetto anziché nel file 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 risolve automaticamente le dipendenze Android durante la fase di build.

iOS

Completa i seguenti passaggi:

  1. Installa le dipendenze di CocoaPods dalla directory ios/ del progetto:

    pod install --repo-update

    In alternativa, installa le dipendenze CocoaPods dalla directory root del progetto:

    npx pod-install

    Il collegamento automatico di CocoaPods configura lo script della fase di build di Xcode che aggiunge la proprietà ios_app_id dal file app.json nel file Info.plist creato.

  2. Nel file Info.plist dell'app, aggiungi una chiave SKAdNetworkItems nell'elemento <dict> per Google cstr6suwn9.skadnetwork e seleziona acquirenti di terze parti.

    L'esempio seguente mostra un file Info.plist completo che contiene l'array SKAdNetworkItems richiesto:

    Esempio 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>

Inizializza Google Mobile Ads SDK for React Native

Prima di caricare gli annunci, chiama il metodo initialize per inizializzare Google Mobile Ads SDK for React Native. Chiama il metodo initialize una volta all'avvio dell'app, ad esempio nel componente App.tsx principale.

L'esempio seguente inizializza 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>
  );
}

Seleziona un formato dell'annuncio

Dopo aver inizializzato Google Mobile Ads SDK for React Native, puoi implementare gli annunci. AdMob offre i seguenti formati degli annunci:

Formato Descrizione Documentazione
Apertura app Viene visualizzato quando gli utenti aprono la tua app o vi tornano, sovrapponendosi alla schermata di caricamento o iniziale. Configura gli annunci apertura app
Interstitial Annunci a schermo intero che coprono l'interfaccia dell'app host. Questi annunci vengono visualizzati in punti di transizione naturali nel flusso di un'app, ad esempio tra le varie attività o durante la pausa tra i livelli di un gioco. Configura gli annunci interstitial
Con premio Annunci a schermo intero che premiano gli utenti per la visualizzazione di annunci video o l'interazione con annunci demo. Configura gli annunci con premio
Interstitial con premio Un formato dell'annuncio con incentivi che ti consente di offrire premi per gli annunci che vengono visualizzati automaticamente durante le normali transizioni dell'app. Configura gli annunci interstitial con premio