Как загрузить одно межстраничное объявление

Межстраничные объявления – это полноэкранные объявления, которые показываются в моменты перехода между экранами приложения или уровнями игры. Пользователи могут нажать на объявление, чтобы перейти на целевую страницу, или закрыть его и вернуться в приложение. Подробнее читайте в рекомендациях по работе с межстраничными объявлениями и примере использования.

В этом руководстве рассказывается, как интегрировать межстраничные объявления в приложение React Native.

Требования

Android 

ca-app-pub-3940256099942544/1033173712

iOS 

ca-app-pub-3940256099942544/4411468910

Загрузка объявления

Чтобы загрузить межстраничное объявление, вызовите метод load в классе InterstitialAd.

В примере ниже при успешном выполнении загружается межстраничное объявление, а при неудачном – регистрируется ошибка.

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

Отслеживание событий объявлений

Прежде чем показывать объявление, настройте прослушиватель adEventCallback для загруженного экземпляра InterstitialAd. Этот прослушиватель получает обратные вызовы для событий жизненного цикла объявления, например когда оно показывается на экране или пользователь нажимает на него. Доступные обратные вызовы перечислены в AdEventCallback.

В следующем примере обратные вызовы настроены на прослушивание событий объявлений:

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

В этом примере метод destroy также вызывается, когда пользователь закрывает объявление или когда объявление не показывается. Это позволяет освободить ресурсы, которые использовались объявлением.

Показ объявления

Чтобы показать межстраничное объявление, вызовите метод show для загруженного экземпляра InterstitialAd.

Ниже приведен пример межстраничного объявления.

export function showInterstitialAd(ad: InterstitialAd) {
  ad.show();
}

Посмотреть полный пример

В этом разделе приведен полный пример интеграции межстраничного объявления в приложение React Native.

В примере ниже объявление интегрируется в компонент React Native, экземпляр объявления управляется в состоянии, а также предоставляются элементы управления для загрузки и показа объявления.

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

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

  const handleLoad = async () => {
    setStatus('Loading Interstitial ad...');
    const loadedAd = await loadInterstitialAd(INTERSTITIAL_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('Interstitial ad loaded!');
    } else {
      setStatus('Failed to load Interstitial ad.');
    }
  };

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

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Interstitial 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>
  );
}

Дальнейшие действия

После интеграции межстраничных объявлений ознакомьтесь со следующими темами: