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

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

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

Требования

Прежде чем продолжить, сделайте следующее:

Android 

ca-app-pub-3940256099942544/5354046379

iOS 

ca-app-pub-3940256099942544/6978759866

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

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

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

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

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

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

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

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

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

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

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

export function showRewardedInterstitialAd(
  ad: RewardedInterstitialAd,
  onRewardEarned: (reward: Reward) => void,
) {
  ad.show(onRewardEarned);
}

Как проверить обратные вызовы при проверке на стороне сервера (необязательно)

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

Заданные вами значения передаются в параметры запроса обратного вызова для проверки на стороне сервера:

  • userId: передается в параметр запроса user_id для идентификации пользователя.
  • customData – передает параметр запроса custom_data для пересылки специальных метаданных.

В примере ниже показано, как задать ServerSideVerificationOptions (customData и userId) для объекта межстраничного объявления с вознаграждением перед показом объявления:

export function setServerSideVerificationRewardedInterstitial(
  ad: RewardedInterstitialAd,
) {
  ad.serverSideVerificationOptions = {
    userId: 'user_123',
    customData: 'sample_custom_data',
  };
}

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

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

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

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

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

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

  const handleShow = () => {
    if (ad) {
      showRewardedInterstitialAd(ad, (userReward) => {
        setReward(`${userReward.amount} ${userReward.type}`);
      });
      setIsLoaded(false);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Rewarded Interstitial Ad</Text>
      <Text style={styles.status}>Status: {status}</Text>
      {reward && <Text style={styles.rewardText}>Earned: {reward}</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>
  );
}

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

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