Configurer le SDK Google Mobile Ads pour React Native

Pour diffuser des annonces et générer des revenus, intégrez Google Mobile Ads SDK for React Native à votre application React Native. Ce guide explique comment installer et initialiser Google Mobile Ads SDK for React Native, et comment sélectionner un format d'annonce.

Prérequis

Avant de continuer, procurez-vous les éléments suivants :

  • React Native 0.85.0 ou version ultérieure.
  • Un compte AdMob et un ID d'application. Pour obtenir un ID d'application, consultez Configurer une application dans AdMob.

  • Les éléments Android suivants :

    • Niveau d'API Android 24 ou version ultérieure.
    • La dernière version d'Android Studio.
    • Plug-in Android Gradle (AGP) version 8.0 ou ultérieure.

  • Les éléments iOS suivants :

    • iOS 13.0 ou version ultérieure.
    • Xcode version 16.0 ou ultérieure, avec les outils de ligne de commande activés.
    • CocoaPods

Installer Google Mobile Ads SDK for React Native

Pour installer Google Mobile Ads SDK for React Native, procédez comme suit :

  1. Téléchargez le dossier gma-sdk-react-native depuis Google Drive.

  2. Extrayez l'archive ZIP dans un répertoire distinct en dehors du répertoire de votre projet de travail. Ce processus peut éviter les conflits avec les fichiers de configuration de votre projet.

  3. À la racine de votre projet, créez un répertoire local_packages/.

  4. Dans ce répertoire, copiez le fichier 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/

    Remplacez EXTRACT_DIR par le chemin d'accès au répertoire dans lequel vous avez extrait l'archive.

  5. Installez le package avec le gestionnaire de packages de votre choix :

    npm

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

    fil

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

Configurer votre application

Pour configurer votre application avec des dépendances de plate-forme, ajoutez vos ID d'application AdMob au fichier app.json de la racine de votre projet.

Pour les tests, utilisez les exemples d'ID d'application AdMob présentés dans l'exemple suivant :

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

Lors de la compilation, Google Mobile Ads SDK for React Native ajoute la propriété android_app_id au fichier AndroidManifest.xml et la propriété ios_app_id à votre fichier Info.plist compilé en tant que clé GADApplicationIdentifier.

Pour connaître les options spécifiques à une plate-forme ou pour effectuer une configuration manuelle, sélectionnez l'une des plates-formes suivantes :

Android

Si vous gérez plusieurs configurations de compilation ou si vous intégrez React Native à une application Android existante, ajoutez votre ID d'application AdMob dans l'élément <application> du fichier AndroidManifest.xml de votre projet au lieu du fichier 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 résout automatiquement les dépendances Android au moment de la compilation.

iOS

Procédez comme suit :

  1. Installez les dépendances CocoaPods à partir du répertoire ios/ de votre projet :

    pod install --repo-update

    Vous pouvez également installer les dépendances CocoaPods à partir du répertoire racine de votre projet :

    npx pod-install

    L'association automatique CocoaPods configure le script de phase de compilation Xcode qui ajoute la propriété ios_app_id du fichier app.json dans votre fichier Info.plist compilé.

  2. Dans le fichier Info.plist de votre application, ajoutez une clé SKAdNetworkItems dans l'élément <dict> pour Google cstr6suwn9.skadnetwork et sélectionnez des acheteurs tiers.

    L'exemple suivant montre un fichier Info.plist complet contenant le tableau SKAdNetworkItems requis :

    Exemple complet

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

Initialiser Google Mobile Ads SDK for React Native

Avant de charger des annonces, appelez la méthode initialize pour initialiser Google Mobile Ads SDK for React Native. Appelez la méthode initialize une fois au lancement de l'application, par exemple dans votre composant racine App.tsx.

L'exemple suivant initialise 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>
  );
}

Sélectionnez un format d'annonce

Après avoir initialisé Google Mobile Ads SDK for React Native, vous pouvez implémenter des annonces. AdMob propose les formats d'annonces suivants :

Format Description Documentation
Annonce à l'ouverture S'affiche lorsque les utilisateurs ouvrent votre application ou y reviennent, en se superposant à l'écran de chargement ou à l'écran de démarrage. Configurer des annonces à l'ouverture d'une application
Interstitiel Annonces en plein écran qui recouvrent l'interface de l'application hôte. Elles s'affichent à des moments de transition naturels dans une application, par exemple entre deux activités ou pendant la pause entre deux niveaux de jeu. Configurer des annonces interstitielles
Accordé Annonces en plein écran qui récompensent les utilisateurs qui regardent des annonces vidéo ou interagissent avec des annonces jouables. Configurer des annonces avec récompense
Interstitiel avec récompense Format d'annonce incitatif qui vous permet de proposer des récompenses pour les annonces diffusées automatiquement aux points de transition naturels dans votre application. Configurer des annonces interstitielles avec récompense