Как настроить баннеры

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

На этой странице рассказывается, как интегрировать фиксированные адаптивные баннеры в приложение React Native.

Требования

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

Android 

ca-app-pub-3940256099942544/9214589741

iOS 

ca-app-pub-3940256099942544/2435281174

Получение размера объявления

Чтобы запросить фиксированный адаптивный баннер, вызовите метод AdSize.getLargeAnchoredAdaptiveBannerAdSize, указав доступную ширину контейнера объявления в пикселях, не зависящих от плотности экрана (dp). Этот метод возвращает объект Promise, который распознается как объект AdSize.

В примере ниже показано, как получить и вернуть размер фиксированного адаптивного баннера:

export async function getAdaptiveAdSize(width: number): Promise<AdSize> {
  const adSize = await AdSize.getLargeAnchoredAdaptiveBannerAdSize(width);
  return adSize;
}

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

Получив объект AdSize, вызовите метод load для класса BannerAd, указав идентификатор и размер рекламного блока.

В примере ниже загружается фиксированный адаптивный баннер с заданным размером и идентификатором рекламного блока. В случае успеха возвращается экземпляр BannerAd, а в случае неудачи регистрируется ошибка.

export function loadBannerAd(
  adUnitId: string,
  adSize: AdSize,
  callback?: BannerAdLoadCallback,
): void {
  BannerAd.load(
    {adUnitId, adSize},
    {
      // Called when an ad has finished loading.
      onAdLoaded: (ad) => {
        console.log('Banner ad loaded successfully.');
        callback?.onAdLoaded?.(ad);
      },
      // Called when an ad request fails.
      onAdFailedToLoad: (error: LoadAdError) => {
        console.error('Failed to load banner ad:', error.message);
        callback?.onAdFailedToLoad?.(error);
      },
    },
  );
}

Как обновить объявление

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

Показ баннера

Чтобы показать загруженный экземпляр BannerAd, передайте его в свойство ad компонента BannerAdView в иерархии View.

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

export function BannerAdViewComponent({ad}: {ad: BannerAd}): React.JSX.Element {
  useEffect(() => {
    // Destroy native resources when the component unmounts.
    return () => {
      ad.destroy();
    };
  }, [ad]);

  return <BannerAdView ad={ad} />;
}

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

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

Чтобы прослушивать события объявлений, например показы объявлений и клики, настройте обратные вызовы в компоненте BannerAdView. Все обратные вызовы перечислены в BannerAdViewProps.

В примере ниже показано, как настроить обратные вызовы для отслеживания событий баннеров.

export function BannerEventsExample({ad}: {ad: BannerAd}): React.JSX.Element {
  return (
    <BannerAdView
      ad={ad}
      // Called when an impression is recorded for an ad.
      onAdImpression={() => {
        console.log('Banner ad recorded an impression.');
      }}
      // Called when a click is recorded for an ad.
      onAdClicked={() => {
        console.log('Banner ad clicked.');
      }}
      // Called when the ad opens an in-app overlay or landing page.
      onAdShowedFullScreenContent={() => {
        console.log('Banner ad opened overlay content.');
      }}
      // Called when the user dismisses the ad overlay.
      onAdDismissedFullScreenContent={() => {
        console.log('Banner ad overlay dismissed.');
      }}
      // Called when the ad is estimated to have earned money.
      onAdPaid={(adValue) => {
        console.log(
          `Banner ad paid: ${adValue.amountMicros} ${adValue.currencyCode}`,
        );
      }}
      // Called when the ad automatically refreshes.
      onAdRefreshed={() => {
        console.log('Banner ad refreshed.');
      }}
      // Called when the ad fails to automatically refresh.
      onAdFailedToRefresh={(error) => {
        console.error('Banner ad failed to refresh:', error.message);
      }}
    />
  );
}

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

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

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

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

export function BannerScreen() {
  const {width} = useWindowDimensions();
  const insets = useSafeAreaInsets();
  const [ad, setAd] = useState<BannerAd | null>(null);
  const [status, setStatus] = useState('Idle');

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

  const handleLoadAd = async () => {
    setStatus('Loading adaptive banner ad...');
    try {
      const adaptiveSize = await getAdaptiveAdSize(width);
      loadBannerAd(BANNER_AD_UNIT_ID, adaptiveSize, {
        onAdLoaded: (loadedAd) => {
          setAd(loadedAd);
          setStatus('Banner ad loaded successfully.');
        },
        onAdFailedToLoad: (error: LoadAdError) => {
          setStatus(`Failed to load banner ad: ${error.message}`);
        },
      });
    } catch (error) {
      setStatus(`Failed to get adaptive ad size: ${error}`);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Anchored Adaptive Banner Ad</Text>
      <Text style={styles.status}>Status: {status}</Text>
      <View style={styles.buttonGroup}>
        <Button title="Load Banner Ad" onPress={handleLoadAd} />
      </View>
      {ad ? (
        <View style={[styles.bannerContainer, {bottom: insets.bottom}]}>
          <BannerAdView
            ad={ad}
            onAdImpression={() => setStatus('Banner ad recorded impression.')}
            onAdClicked={() => setStatus('Banner ad clicked.')}
            onAdShowedFullScreenContent={() =>
              setStatus('Banner ad showed overlay content.')
            }
            onAdDismissedFullScreenContent={() =>
              setStatus('Banner ad overlay dismissed.')
            }
          />
        </View>
      ) : null}
    </View>
  );
}

Замените BANNER_AD_UNIT_ID идентификатором своего рекламного блока.

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

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