Configurer des annonces natives

Les annonces natives vous fournissent des composants d'annonce individuels, tels qu'un titre, des images et un texte d'invite, que vous pouvez styliser et organiser pour qu'ils correspondent à la conception visuelle de votre application. Pour gérer le suivi des clics, les impressions et la lecture de contenus multimédias, Google Mobile Ads SDK for React Native fournit les composants suivants :

Pour savoir comment diffuser des annonces natives de manière conforme, consultez Annonces natives utilisant le format natif avancé.

Cette page explique comment charger une ou plusieurs annonces natives, gérer la mémoire et le cycle de vie des annonces, et activer l'accélération matérielle pour les annonces vidéo sur Android.

Prérequis

Avant de continuer, procédez comme suit :

Android

Format Exemple d'ID de bloc d'annonces
Natif ca-app-pub-3940256099942544/2247696110
Création vidéo native ca-app-pub-3940256099942544/1044960115

iOS

Format Exemple d'ID de bloc d'annonces
Natif ca-app-pub-3940256099942544/3986624511
Création vidéo native ca-app-pub-3940256099942544/2521693316

Charger une annonce

Pour charger une annonce native, appelez la méthode NativeAd.load avec un objet NativeAdRequest contenant l'ID de votre bloc d'annonces. Cette méthode renvoie une promesse qui se résout avec l'objet NativeAd chargé ou qui est rejetée avec un objet LoadAdError.

L'exemple suivant charge une seule annonce native, renvoie l'annonce chargée en cas de réussite et consigne un message d'erreur en cas d'échec :

export async function loadNativeAd(adUnitId: string): Promise<NativeAd | null> {
  try {
    const ad = await NativeAd.load({adUnitId});
    return ad;
  } catch (error) {
    const loadError = error as LoadAdError;
    console.error('Failed to load native ad:', loadError.message);
    return null;
  }
}

Lorsque vous chargez et gérez des annonces natives, nous vous recommandons de procéder comme suit :

  • Limitez le nombre d'annonces chargées : les composants d'annonces natives consomment de la mémoire. Ne chargez que les annonces que les utilisateurs sont sur le point de voir, par exemple les un ou deux prochains emplacements d'annonces, plutôt que de charger de grands lots à la fois.
  • Nettoyer les annonces non installées : lorsque vous supprimez ou remplacez une annonce de l'écran, ou lorsque le composant conteneur est désinstallé, appelez la méthode ad.destroy. Cette méthode libère les ressources et la mémoire utilisées par l'annonce.
  • Affichez les annonces chargées dans un délai d'une heure : les créations d'annonces natives expirent au bout de 60 minutes. Si vous n'avez pas affiché une annonce chargée dans l'heure, détruisez-la et demandez-en une autre.

Facultatif : Charger plusieurs annonces

Pour charger plusieurs annonces dans une seule requête, appelez la méthode NativeAd.loadAds avec un objet NativeAdRequest, le nombre d'annonces à demander et un objet NativeAdLoadCallback. La requête peut contenir jusqu'à cinq annonces.

L'exemple suivant demande plusieurs annonces natives et gère chaque annonce chargée, les erreurs de chargement et l'achèvement de la demande à l'aide de rappels :

export function loadMultipleNativeAds(adUnitId: string, numAds: number): void {
  NativeAd.loadAds({adUnitId}, numAds, {
    // Called when an individual native ad finishes loading.
    onNativeAdLoad: (ad) => {
      console.log('Loaded native ad:', ad.headline);
    },
    // Called when an individual native ad fails to load.
    onAdFailedToLoad: (error) => {
      console.error('Failed to load native ad:', error.message);
    },
    // Called when all requested ads have finished loading.
    onAdLoadingCompleted: () => {
      console.log('All requested native ads finished loading.');
    },
  });
}

Si vous diffusez des annonces display dans un flux défilant, chargez-les à l'avance. Ce processus permet le rendu des annonces lorsque les utilisateurs y accèdent.

Activer l'accélération matérielle

Pour diffuser des annonces vidéo dans vos vues d'annonces natives sur Android, activez l'accélération matérielle.

Par défaut, Android active l'accélération matérielle. Les applications peuvent désactiver l'accélération matérielle de manière globale. Si votre application désactive l'accélération matérielle de manière globale, activez le paramètre pour les classes Activity qui diffusent des annonces.

Si vous activez l'accélération matérielle de manière globale et que votre application ne fonctionne pas comme prévu, contrôlez l'accélération matérielle pour chaque activité. Pour activer ou désactiver l'accélération matérielle, utilisez l'attribut android:hardwareAccelerated pour les éléments application et activity de votre fichier AndroidManifest.xml.

L'exemple suivant active l'accélération matérielle de manière globale pour l'application et désactive le paramètre pour une activité :

<application android:hardwareAccelerated="true">
    <!-- For activities that use ads, hardwareAcceleration should be true. -->
    <activity android:hardwareAccelerated="true" />
    <!-- For activities that don't use ads, hardwareAcceleration can be false. -->
    <activity android:hardwareAccelerated="false" />
</application>

Étapes suivantes

Après avoir chargé une annonce, affichez-la dans votre UI React Native à l'aide des composants NativeAdView et NativeAdMediaView. Pour en savoir plus, consultez Afficher des annonces natives.