Configurer des annonces interstitielles

Les annonces interstitielles sont des annonces en plein écran qui s'affichent à des points de transition dans votre application, par exemple entre deux écrans ou pendant la pause entre deux niveaux de jeu. Vos utilisateurs peuvent appuyer sur l'annonce pour accéder à la destination, ou la fermer et revenir à l'application. Pour en savoir plus, consultez les consignes concernant les annonces interstitielles et une étude de cas.

Pour éliminer la latence de présentation et s'assurer qu'une annonce est disponible lors d'une transition, Google Mobile Ads SDK for React Native utilise le préchargement des annonces pour gérer le chargement en arrière-plan, la mise en cache et le réapprovisionnement de la mémoire tampon.

Ce guide vous explique comment intégrer des annonces interstitielles dans une application React Native.

Prérequis

Avant de continuer, procédez comme suit :

Android 

ca-app-pub-3940256099942544/1033173712

iOS 

ca-app-pub-3940256099942544/4411468910

Comprendre le préchargement des annonces

Le préchargement des annonces dans Google Mobile Ads SDK for React Native automatise le chargement et la mise en cache des annonces.

Le préchargement des annonces offre les avantages suivants :

  • Gestion des références : conserve les références jusqu'à ce que les annonces soient diffusées.
  • Rechargement automatique : charge une nouvelle annonce lorsqu'une annonce est récupérée du cache.
  • Nouvelles tentatives gérées : charge une nouvelle annonce lorsqu'une annonce ne se charge pas.
  • Gestion de l'expiration : actualise les annonces avant leur expiration.
  • Optimisation du cache : optimise l'ordre du cache pour diffuser l'annonce ayant la priorité la plus élevée.

Pour charger des annonces manuellement, consultez le guide Charger une seule annonce interstitielle.

Démarrer le préchargement

Pour commencer à précharger des annonces, appelez la méthode InterstitialAdPreloader.start et transmettez votre valeur preloadId, vos paramètres de configuration et vos rappels d'événements pour surveiller les changements d'état du tampon :

export function startPreloader(
  adUnitId: string,
  preloadId: string,
  customPreloadCallback?: PreloadCallback,
): boolean {
  try {
    const started = InterstitialAdPreloader.start(
      preloadId,
      {
        request: {adUnitId},
        bufferSize: 2,
      },
      {
        // Called when an ad is preloaded into the buffer.
        onAdPreloaded: (metadata) => {
          console.log(`Interstitial ad preloaded for ${metadata.preloadId}`);
          customPreloadCallback?.onAdPreloaded?.(metadata);
        },
        // Called when an ad fails to preload.
        onAdFailedToPreload: (error: LoadAdError) => {
          console.error('Failed to preload interstitial ad:', error.message);
          customPreloadCallback?.onAdFailedToPreload?.(error);
        },
        // Called when all preloaded ads in the buffer have been shown.
        onAdsExhausted: () => {
          console.log('Preload buffer exhausted for interstitial ads.');
          customPreloadCallback?.onAdsExhausted?.();
        },
      },
    );
    return started;
  } catch (error) {
    console.error('Error starting interstitial ad preloader:', error);
    return false;
  }
}

Un ID de préchargement est une chaîne qui identifie de manière unique une configuration de préchargement d'annonces. Si vous utilisez l'ID de bloc d'annonces pour une seule configuration de préchargement dans votre application, utilisez cet ID de bloc d'annonces comme ID de préchargement. Si votre application nécessite plusieurs préchargeurs pour le même ID de bloc d'annonces, transmettez des chaînes distinctes pour chaque ID de préchargement.

Lorsque votre application interroge une annonce préchargée à partir du tampon, Google Mobile Ads SDK for React Native demande une annonce de remplacement en arrière-plan pour remplir à nouveau le tampon. S'il ne reste aucune annonce préchargée dans le tampon, Google Mobile Ads SDK for React Native appelle le rappel onAdsExhausted.

Limites du cache de préchargement

Google Mobile Ads SDK for React Native applique une limite à l'échelle de l'application sur le nombre total d'annonces préchargées pour l'ensemble des blocs d'annonces et des ID de préchargement :

  • Limite par défaut : Google conserve un maximum de six annonces préchargées en mémoire. Cette limite est partagée entre tous les formats et ID de préchargement.
  • Tampon recommandé : deux annonces préchargées pour chaque ID de préchargement.

Si votre application atteint la limite définie, les requêtes en arrière-plan pour les annonces préchargées sont suspendues jusqu'à ce que les annonces existantes soient interrogées à partir du cache ou détruites. Le préchargement est également mis en pause temporairement lorsqu'une annonce en plein écran est affichée à l'écran.

Interroger et diffuser l'annonce

Avant de diffuser une annonce, vérifiez qu'elle est disponible en appelant la méthode InterstitialAdPreloader.isAdAvailable. Pour récupérer l'annonce, appelez la méthode InterstitialAdPreloader.pollAd.

Pour écouter les événements de présentation, tels que les fermetures d'annonces ou les échecs d'affichage, définissez la propriété adEventCallback sur l'instance d'annonce avant d'appeler la méthode show.

L'exemple suivant vérifie la disponibilité de l'annonce et écoute les événements de présentation en plein écran avant de l'afficher :

export function showPreloadedAd(
  preloadId: string,
  customAdEventCallback?: FullScreenAdEventCallback,
) {
  if (InterstitialAdPreloader.isAdAvailable(preloadId)) {
    const ad = InterstitialAdPreloader.pollAd(preloadId);
    if (ad) {
      ad.adEventCallback = {
        // Called when the ad is presented on screen.
        onAdShowedFullScreenContent: () => {
          console.log('Preloaded interstitial ad showed full screen content.');
          customAdEventCallback?.onAdShowedFullScreenContent?.();
        },
        // Called when the ad is closed by the user.
        onAdDismissedFullScreenContent: () => {
          console.log('Preloaded interstitial ad dismissed.');
          customAdEventCallback?.onAdDismissedFullScreenContent?.();
          ad.destroy();
        },
        // Called when presentation fails.
        onAdFailedToShowFullScreenContent: (error) => {
          console.error('Preloaded interstitial ad failed to show:', error);
          customAdEventCallback?.onAdFailedToShowFullScreenContent?.(error);
          ad.destroy();
        },
        // Called when an impression is recorded.
        onAdImpression: () => {
          console.log('Preloaded interstitial ad recorded an impression.');
          customAdEventCallback?.onAdImpression?.();
        },
        // Called when the user taps the ad.
        onAdClicked: () => {
          console.log('Preloaded interstitial ad was clicked.');
          customAdEventCallback?.onAdClicked?.();
        },
        // Called when the ad is estimated to have earned money.
        onAdPaid: (adValue) => {
          console.log(
            `Preloaded interstitial ad paid: ${adValue.amountMicros}` +
              ` ${adValue.currencyCode}`,
          );
          customAdEventCallback?.onAdPaid?.(adValue);
        },
      };
      ad.show();
    }
  } else {
    console.log('No preloaded interstitial ad available in buffer.');
  }
}

Pour libérer de la mémoire et des ressources, appelez la méthode ad.destroy dans les rappels onAdDismissedFullScreenContent et onAdFailedToShowFullScreenContent.

Lire les informations de la réponse

Pour inspecter les informations de réponse de l'annonce préchargée suivante sans la supprimer du cache, appelez la méthode InterstitialAdPreloader.peekAdResponseInfo :

export function peekPreloadedAdResponseInfo(preloadId: string) {
  if (InterstitialAdPreloader.isAdAvailable(preloadId)) {
    const responseInfo = InterstitialAdPreloader.peekAdResponseInfo(preloadId);
    if (responseInfo) {
      console.log('Next preloaded ad response info:', responseInfo);
    }
  }
}

Si une annonce est disponible, la méthode peekAdResponseInfo renvoie un objet ResponseInfo contenant des informations sur la source d'annonce chargée et les adaptateurs réseau.

Effectuer un nettoyage des ressources

Si vous n'avez plus besoin de diffuser d'annonces pour un ID de préchargement spécifique pendant le reste de la session, appelez la méthode InterstitialAdPreloader.destroy. Ce processus arrête le préchargement pour cet ID de préchargement et libère de la mémoire les annonces préchargées inutilisées.

L'exemple suivant arrête le préchargement :

export function destroyPreloader(preloadId: string) {
  InterstitialAdPreloader.destroy(preloadId);
}

Une fois que l'utilisateur a fermé l'annonce ou si l'annonce ne s'affiche pas, détruisez les instances d'annonces interrogées individuellement. Pour en savoir plus, consultez Interroger et afficher l'annonce.

Voir l'exemple complet

L'exemple de composant suivant démarre le préchargement lors de l'installation, suit le nombre d'annonces disponibles et fournit des commandes pour afficher les annonces interstitielles préchargées :

export function InterstitialScreen() {
  const [numAdsAvailable, setNumAdsAvailable] = useState<number>(0);
  const [status, setStatus] = useState<string>('Initializing Preloader...');

  const refreshAdCount = () => {
    const count = InterstitialAdPreloader.getNumAdsAvailable(PRELOAD_ID);
    setNumAdsAvailable(count);
  };

  useEffect(() => {
    // Start preloading interstitial ads on component mount
    startPreloader(INTERSTITIAL_AD_UNIT_ID, PRELOAD_ID, {
      onAdPreloaded: () => {
        refreshAdCount();
        setStatus('Ad preloaded and ready!');
      },
      onAdFailedToPreload: (error) => {
        setStatus(`Preload failed: ${error.message}`);
      },
      onAdsExhausted: () => {
        refreshAdCount();
        setStatus('Preload buffer exhausted.');
      },
    });
    setStatus('Preloader started.');

    // Clean up preloader resources on component unmount
    return () => {
      destroyPreloader(PRELOAD_ID);
    };
  }, []);

  const handleShow = () => {
    showPreloadedAd(PRELOAD_ID, {
      onAdDismissedFullScreenContent: () => {
        setStatus('Ad dismissed.');
      },
      onAdFailedToShowFullScreenContent: (error) => {
        setStatus(`Failed to show ad: ${error.message}`);
      },
    });
    setStatus('Showing preloaded ad...');
    refreshAdCount();
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Preload Interstitial Ads</Text>
      <Text style={styles.status}>Status: {status}</Text>
      <Text style={styles.status}>Ads Available: {numAdsAvailable}</Text>
      <View style={styles.buttonGroup}>
        <Button
          title="Show Preloaded Ad"
          onPress={handleShow}
          disabled={numAdsAvailable === 0}
        />
      </View>
    </View>
  );
}

Remplacez les éléments suivants :

  • INTERSTITIAL_AD_UNIT_ID par l'ID de votre bloc d'annonces.
  • PRELOAD_ID par l'ID de votre préchargeur.

Étapes suivantes

Après avoir intégré des annonces interstitielles, explorez les sujets suivants :