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

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

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

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

Требования

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

Android 

ca-app-pub-3940256099942544/1033173712

iOS 

ca-app-pub-3940256099942544/4411468910

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

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

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

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

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

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

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

export function startPreloader(
  adUnitId: string,
  preloadId: string,
  customPreloadCallback?: PreloadCallback,
): boolean {
  try {
    const started = InterstitialAdPreloader.start(
      preloadId,
      {
        request: {adUnitId},
        bufferSize: 2,
      },
      {
        // Called when an ad is preloaded into the buffer.
        onAdPreloaded: (metadata) => {
          console.log(`Interstitial ad preloaded for ${metadata.preloadId}`);
          customPreloadCallback?.onAdPreloaded?.(metadata);
        },
        // Called when an ad fails to preload.
        onAdFailedToPreload: (error: LoadAdError) => {
          console.error('Failed to preload interstitial ad:', error.message);
          customPreloadCallback?.onAdFailedToPreload?.(error);
        },
        // Called when all preloaded ads in the buffer have been shown.
        onAdsExhausted: () => {
          console.log('Preload buffer exhausted for interstitial ads.');
          customPreloadCallback?.onAdsExhausted?.();
        },
      },
    );
    return started;
  } catch (error) {
    console.error('Error starting interstitial ad preloader:', error);
    return false;
  }
}

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

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

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

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

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

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

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

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

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

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

export function showPreloadedAd(
  preloadId: string,
  customAdEventCallback?: FullScreenAdEventCallback,
) {
  if (InterstitialAdPreloader.isAdAvailable(preloadId)) {
    const ad = InterstitialAdPreloader.pollAd(preloadId);
    if (ad) {
      ad.adEventCallback = {
        // Called when the ad is presented on screen.
        onAdShowedFullScreenContent: () => {
          console.log('Preloaded interstitial ad showed full screen content.');
          customAdEventCallback?.onAdShowedFullScreenContent?.();
        },
        // Called when the ad is closed by the user.
        onAdDismissedFullScreenContent: () => {
          console.log('Preloaded interstitial ad dismissed.');
          customAdEventCallback?.onAdDismissedFullScreenContent?.();
          ad.destroy();
        },
        // Called when presentation fails.
        onAdFailedToShowFullScreenContent: (error) => {
          console.error('Preloaded interstitial ad failed to show:', error);
          customAdEventCallback?.onAdFailedToShowFullScreenContent?.(error);
          ad.destroy();
        },
        // Called when an impression is recorded.
        onAdImpression: () => {
          console.log('Preloaded interstitial ad recorded an impression.');
          customAdEventCallback?.onAdImpression?.();
        },
        // Called when the user taps the ad.
        onAdClicked: () => {
          console.log('Preloaded interstitial ad was clicked.');
          customAdEventCallback?.onAdClicked?.();
        },
        // Called when the ad is estimated to have earned money.
        onAdPaid: (adValue) => {
          console.log(
            `Preloaded interstitial ad paid: ${adValue.amountMicros}` +
              ` ${adValue.currencyCode}`,
          );
          customAdEventCallback?.onAdPaid?.(adValue);
        },
      };
      ad.show();
    }
  } else {
    console.log('No preloaded interstitial ad available in buffer.');
  }
}

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

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

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

export function peekPreloadedAdResponseInfo(preloadId: string) {
  if (InterstitialAdPreloader.isAdAvailable(preloadId)) {
    const responseInfo = InterstitialAdPreloader.peekAdResponseInfo(preloadId);
    if (responseInfo) {
      console.log('Next preloaded ad response info:', responseInfo);
    }
  }
}

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

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

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

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

export function destroyPreloader(preloadId: string) {
  InterstitialAdPreloader.destroy(preloadId);
}

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

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

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

export function InterstitialScreen() {
  const [numAdsAvailable, setNumAdsAvailable] = useState<number>(0);
  const [status, setStatus] = useState<string>('Initializing Preloader...');

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

  useEffect(() => {
    // Start preloading interstitial ads on component mount
    startPreloader(INTERSTITIAL_AD_UNIT_ID, PRELOAD_ID, {
      onAdPreloaded: () => {
        refreshAdCount();
        setStatus('Ad preloaded and ready!');
      },
      onAdFailedToPreload: (error) => {
        setStatus(`Preload failed: ${error.message}`);
      },
      onAdsExhausted: () => {
        refreshAdCount();
        setStatus('Preload buffer exhausted.');
      },
    });
    setStatus('Preloader started.');

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

  const handleShow = () => {
    showPreloadedAd(PRELOAD_ID, {
      onAdDismissedFullScreenContent: () => {
        setStatus('Ad dismissed.');
      },
      onAdFailedToShowFullScreenContent: (error) => {
        setStatus(`Failed to show ad: ${error.message}`);
      },
    });
    setStatus('Showing preloaded ad...');
    refreshAdCount();
  };

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

Замените следующее:

  • INTERSTITIAL_AD_UNIT_ID на идентификатор рекламного блока.
  • PRELOAD_ID – идентификатор предзагрузчика.

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

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