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

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

Чтобы устранить задержку при показе и обеспечить доступность объявления в момент перехода, Google Mobile Ads SDK for React Native использует предварительную загрузку объявлений для управления фоновой загрузкой, кешированием и пополнением буфера.

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

Требования

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

Android 

ca-app-pub-3940256099942544/5354046379

iOS 

ca-app-pub-3940256099942544/6978759866

Предварительная загрузка объявлений

Предварительная загрузка объявлений в Google Mobile Ads SDK for React Native автоматизирует загрузку и кеширование объявлений.

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

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

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

Начать предварительную загрузку

Чтобы начать предварительную загрузку объявлений, вызовите метод RewardedInterstitialAdPreloader.start и передайте значение preloadId, настройки конфигурации и обратные вызовы событий, чтобы отслеживать изменения состояния буфера:

export function startRewardedInterstitialAdPreloader(
  adUnitId: string,
  preloadId: string,
  customPreloadCallback?: PreloadCallback,
): boolean {
  const started = RewardedInterstitialAdPreloader.start(
    preloadId,
    {
      request: {adUnitId},
      bufferSize: 2,
    },
    {
      // Called when an ad is preloaded into the buffer.
      onAdPreloaded: (event) => {
        console.log(
          `Rewarded interstitial ad preloaded for ${event.preloadId}`,
        );
        customPreloadCallback?.onAdPreloaded?.(event);
      },
      // Called when an ad fails to preload.
      onAdFailedToPreload: (error: LoadAdError) => {
        console.error(
          'Failed to preload rewarded interstitial ad:',
          error.message,
        );
        customPreloadCallback?.onAdFailedToPreload?.(error);
      },
      // Called when all preloaded ads in the buffer have been shown.
      onAdsExhausted: () => {
        console.log('Rewarded interstitial ad buffer exhausted.');
        customPreloadCallback?.onAdsExhausted?.();
      },
    },
  );
  return started;
}

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

Когда приложение запрашивает предварительно загруженное объявление из буфера, Google Mobile Ads SDK for React Native запрашивает замену в фоновом режиме, чтобы пополнить буфер. Если в буфере не осталось предварительно загруженных объявлений, Google Mobile Ads SDK for React Native вызывает обратный вызов onAdsExhausted.

Ограничения на предварительное кеширование

Google Mobile Ads SDK for React Native ограничивает общее количество предварительно загруженных объявлений в приложении:

  • По умолчанию в памяти Google хранится не более шести предварительно загруженных объявлений. Это ограничение распространяется на все форматы и идентификаторы предварительной загрузки.
  • Рекомендуемый буфер: два предварительно загруженных объявления на каждый идентификатор предварительной загрузки.

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

Опрос и показ объявления

Перед показом объявления убедитесь, что оно доступно, вызвав метод RewardedInterstitialAdPreloader.isAdAvailable. Чтобы получить объявление, вызовите метод RewardedInterstitialAdPreloader.pollAd.

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

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

export function showPreloadedRewardedInterstitialAd(
  preloadId: string,
  onRewardEarned: (reward: Reward) => void,
  customAdEventCallback?: FullScreenAdEventCallback,
) {
  if (!RewardedInterstitialAdPreloader.isAdAvailable(preloadId)) {
    console.log('No preloaded rewarded interstitial ad available right now.');
    return;
  }

  const ad = RewardedInterstitialAdPreloader.pollAd(preloadId);
  if (!ad) {
    return;
  }

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

  ad.show(onRewardEarned);
}

Чтобы освободить память и ресурсы, вызовите метод ad.destroy в обратных вызовах onAdDismissedFullScreenContent и onAdFailedToShowFullScreenContent.

Прочитайте информацию об ответе

Чтобы проверить информацию об ответе для следующего предварительно загруженного объявления, не удаляя его из кеша, вызовите метод RewardedInterstitialAdPreloader.peekAdResponseInfo:

export function peekRewardedInterstitialAdResponseInfo(
  preloadId: string,
): ResponseInfo | null {
  const responseInfo =
    RewardedInterstitialAdPreloader.peekAdResponseInfo(preloadId);
  if (responseInfo) {
    console.log(
      'Next preloaded rewarded interstitial ad response info:',
      responseInfo,
    );
  }
  return responseInfo;
}

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

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

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

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

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

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

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

Очистка ресурсов

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

В примере ниже показано, как остановить предзагрузку.

export function destroyRewardedInterstitialAdPreloader(preloadId: string) {
  RewardedInterstitialAdPreloader.destroy(preloadId);
}

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

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

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

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

export function RewardedInterstitialScreen() {
  const [numAdsAvailable, setNumAdsAvailable] = useState<number>(0);
  const [status, setStatus] = useState<string>('Preloader idle.');
  const [reward, setReward] = useState<string | null>(null);

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

  useEffect(() => {
    // Start preloading ads on component mount
    const started = startRewardedInterstitialAdPreloader(
      REWARDED_INTERSTITIAL_AD_UNIT_ID,
      PRELOAD_ID,
      {
        onAdPreloaded: () => {
          refreshAdCount();
          setStatus('Rewarded interstitial ad preloaded into buffer.');
        },
        onAdFailedToPreload: (error) => {
          setStatus(
            `Failed to preload rewarded interstitial ad: ${error.message}`,
          );
        },
        onAdsExhausted: () => {
          refreshAdCount();
          setStatus('Preload buffer exhausted for rewarded interstitial ads.');
        },
      },
    );
    if (started) {
      setStatus('Preloader started.');
    }

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

  const handleShowAd = () => {
    setReward(null);
    setStatus('Showing preloaded ad...');
    showPreloadedRewardedInterstitialAd(
      PRELOAD_ID,
      (userReward) => {
        setReward(`${userReward.amount} ${userReward.type}`);
      },
      {
        onAdDismissedFullScreenContent: () => {
          setStatus('Ad dismissed.');
        },
        onAdFailedToShowFullScreenContent: (error) => {
          setStatus(`Failed to show preloaded ad: ${error.message}`);
        },
      },
    );
    refreshAdCount();
  };

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

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

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