Charger une seule annonce à l'ouverture d'une application

Les annonces à l'ouverture d'une application s'affichent lorsque les utilisateurs ouvrent votre application ou y reviennent. Ils peuvent les fermer à tout moment. Pour monétiser l'écran de chargement de votre application, utilisez des annonces à l'ouverture d'une application. Pour en savoir plus, consultez

Conseils et bonnes pratiques concernant les annonces à l'ouverture d'une application

Ce guide explique comment intégrer des annonces à l'ouverture d'une application dans une application React Native.

Prérequis

Avant de continuer, procédez comme suit :

Android 

ca-app-pub-3940256099942544/9257395921

iOS 

ca-app-pub-3940256099942544/5575463023

Charger une annonce

Pour charger une annonce à l'ouverture d'une application, appelez la méthode load.

L'exemple suivant charge une annonce à l'ouverture d'une application en cas de réussite et consigne une erreur en cas d'échec :

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

Écouter les événements d'annonce

Avant de diffuser l'annonce, définissez l'écouteur adEventCallback sur l'instance AppOpenAd chargée. Cet écouteur reçoit des rappels d'événements de cycle de vie des annonces, par exemple lorsqu'une annonce s'affiche à l'écran ou qu'un utilisateur appuie dessus. Pour connaître les rappels disponibles, consultez AdEventCallback.

L'exemple suivant définit des rappels pour écouter les événements d'annonce :

export function registerAdEvents(ad: AppOpenAd) {
  ad.adEventCallback = {
    // Called when the ad is presented on screen.
    onAdShowedFullScreenContent: () => {
      console.log('App open ad showed full screen content.');
    },
    // Called when the ad is closed by the user.
    onAdDismissedFullScreenContent: () => {
      console.log('App open ad dismissed full screen content.');
      ad.destroy();
    },
    // Called when presentation fails.
    onAdFailedToShowFullScreenContent: (error) => {
      console.error('Failed to show app open ad:', error);
      ad.destroy();
    },
    // Called when an impression is recorded.
    onAdImpression: () => {
      console.log('App open ad recorded an impression.');
    },
    // Called when the user taps the ad.
    onAdClicked: () => {
      console.log('App open ad was clicked.');
    },
    // Called when the ad is estimated to have earned money.
    onAdPaid: (adValue) => {
      console.log(
        `App open ad paid: ${adValue.amountMicros} ${adValue.currencyCode}`,
      );
    },
  };
}

Cet exemple utilise également la méthode destroy lorsqu'un utilisateur ferme l'annonce ou lorsque l'annonce ne s'affiche pas. Ce processus libère les ressources utilisées par l'annonce.

Diffuser l'annonce

Pour afficher une annonce à l'ouverture d'une application, appelez la méthode show :

export function showAppOpenAd(ad: AppOpenAd) {
  ad.show();
}

Gérer les annonces avec un gestionnaire au niveau de l'application

Nous vous recommandons de gérer les annonces à l'ouverture d'une application dans un gestionnaire au niveau de l'application, en dehors de l'arborescence des composants React. Étant donné que les annonces à l'ouverture d'une application s'affichent de manière globale lorsque l'utilisateur ouvre votre application ou y retourne, un gestionnaire au niveau de l'application sépare les annonces de l'interface utilisateur.

L'exemple suivant crée une instance SingleLoadAppOpenAdManager qui charge une annonce, écoute les événements d'annonce et vérifie la disponibilité de l'annonce :

export class SingleLoadAppOpenAdManager {
  private ad: AppOpenAd | null = null;
  private loadTime = 0;
  private isShowingAd = false;

  async loadAd(adUnitId: string) {
    // Avoid re-loading if an ad is already loaded or showing.
    if (this.ad) {
      return;
    }
    try {
      this.ad = await AppOpenAd.load({adUnitId});
      this.loadTime = Date.now();
      this.ad.adEventCallback = {
        onAdDismissedFullScreenContent: () => {
          this.ad?.destroy();
          this.ad = null;
          this.isShowingAd = false;
          // Preload the next ad for future foreground transitions.
          this.loadAd(adUnitId);
        },
        onAdFailedToShowFullScreenContent: () => {
          // An ad object that fails to present is consumed and cannot be reused.
          // Clean up native resources and preload a new ad for future events.
          this.ad?.destroy();
          this.ad = null;
          this.isShowingAd = false;
          this.loadAd(adUnitId);
        },
      };
    } catch (error) {
      console.error('Failed to load app open ad:', error);
    }
  }

  showAdIfAvailable() {
    if (!this.ad || !this.isAdAvailable()) {
      console.warn(
        'App open ad cannot be shown: ad is not loaded or has expired.',
      );
      return;
    }
    if (this.isShowingAd) {
      console.warn('App open ad cannot be shown: an ad is already displaying.');
      return;
    }

    this.ad.show();
    this.isShowingAd = true;
  }

  isAdAvailable(): boolean {
    // App Open ads expire after 4 hours per Google Mobile Ads policy.
    const FOUR_HOURS_IN_MS = 4 * 60 * 60 * 1000;
    return this.ad !== null && Date.now() - this.loadTime < FOUR_HOURS_IN_MS;
  }
}

Un gestionnaire au niveau de l'application vous aide à :

  • L'état de l'annonce doit être indépendant de la navigation sur l'écran et du cycle de vie des composants.
  • Suivez l'état de présentation des annonces lors des événements de thread natifs.
  • Gérez les transitions de l'application au premier plan pour éviter d'afficher des annonces répétées.
  • Préchargez les annonces en arrière-plan pour qu'elles soient disponibles à l'ouverture de votre application.
  • Vérifiez la limite d'expiration des annonces de quatre heures pour éviter de diffuser des annonces expirées.
  • Combinez le chargement, l'affichage et le nettoyage des ressources publicitaires.

Écouter les événements de mise au premier plan de l'application

Pour diffuser des annonces display lorsque votre application revient au premier plan, utilisez le module AppState pour écouter les changements d'état de l'application à la racine de votre application, par exemple dans le fichier App.tsx. Procédez comme suit :

  1. Enregistrez un écouteur AppState pour l'événement 'change'.
  2. Lorsque l'état passe à 'active', appelez la méthode showAdIfAvailable sur l'instance du gestionnaire d'annonces.

L'exemple suivant écoute les événements de premier plan de l'application et affiche une annonce si elle est disponible :

export function setupAppOpenAdForegroundListener(adManager: {
  showAdIfAvailable: () => void;
}): NativeEventSubscription {
  return AppState.addEventListener('change', (nextAppState: AppStateStatus) => {
    if (nextAppState === 'active') {
      adManager.showAdIfAvailable();
    }
  });
}

En savoir plus sur les démarrages à froid et les écrans de chargement

Un démarrage à froid se produit lorsque votre application démarre de zéro, par exemple lorsqu'un utilisateur l'ouvre pour la première fois ou après que l'appareil l'a fermée pour libérer de la mémoire. Lors d'un démarrage à froid, vous ne disposez pas d'une annonce à l'ouverture d'une application précédemment chargée à afficher ensuite.

En raison des délais de demande d'annonce, vos utilisateurs peuvent interagir avec votre application avant qu'une annonce ne s'affiche. Pour éviter une mauvaise expérience utilisateur, ne diffusez des annonces à l'ouverture d'une application lors d'un démarrage à froid que sur un écran de chargement pendant le chargement des éléments de l'application. Si le chargement des éléments est terminé et que l'utilisateur accède au contenu principal avant le chargement de l'annonce, ne l'affichez pas.

Configurer un écran de test

Pour tester les annonces de manière interactive ou les afficher sur un écran spécifique, gérez l'instance d'annonce dans l'état du composant.

L'exemple suivant intègre une annonce à l'ouverture d'une application dans un composant React Native avec un hook de nettoyage useEffect. Si le composant est démonté avant la diffusion de l'annonce, ce hook libère les ressources natives.

export function AppOpenSingleLoadScreen() {
  const [ad, setAd] = useState<AppOpenAd | null>(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [status, setStatus] = useState<string>('Idle');

  useEffect(() => {
    return () => {
      ad?.destroy();
    };
  }, [ad]);

  const handleLoad = async () => {
    setStatus('Loading App Open ad...');
    const loadedAd = await loadAppOpenAd(APP_OPEN_AD_UNIT_ID);
    if (loadedAd) {
      registerAdEvents(loadedAd);
      const onDismiss =
        loadedAd.adEventCallback?.onAdDismissedFullScreenContent;
      loadedAd.adEventCallback = {
        ...loadedAd.adEventCallback,
        onAdDismissedFullScreenContent: () => {
          onDismiss?.();
          setStatus('Ad dismissed.');
        },
      };
      setAd((prevAd) => {
        prevAd?.destroy();
        return loadedAd;
      });
      setIsLoaded(true);
      setStatus('App Open ad loaded!');
    } else {
      setStatus('Failed to load App Open ad.');
    }
  };

  const handleShow = () => {
    if (ad) {
      showAppOpenAd(ad);
      setIsLoaded(false);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>App Open Ad</Text>
      <Text style={styles.status}>Status: {status}</Text>
      <View style={styles.buttonGroup}>
        <Button title="Load Ad" onPress={handleLoad} />
        <View style={styles.spacerSmall} />
        <Button title="Show Ad" onPress={handleShow} disabled={!isLoaded} />
      </View>
    </View>
  );
}

Étapes suivantes

Après avoir intégré une annonce à l'ouverture d'une application, consultez les rubriques suivantes :