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

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

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

Требования

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

Android 

ca-app-pub-3940256099942544/5224354917

iOS 

ca-app-pub-3940256099942544/1712485313

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В примере ниже для объекта объявления с вознаграждением перед показом объявления задаются параметры ServerSideVerificationOptions (customData и userId).

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

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

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

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

export function RewardedSingleLoadScreen() {
  const [ad, setAd] = useState<RewardedAd | 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 ad...');
    const loadedAd = await loadRewardedAd(REWARDED_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 ad loaded!');
    } else {
      setStatus('Failed to load Rewarded ad.');
    }
  };

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

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Rewarded Ad (Single Load)</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>
  );
}

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

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