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

Выберите платформу: Android iOS Unity Flutter Android (устаревшая версия)

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

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

Фиксированные адаптивные баннеры имеют фиксированное соотношение сторон, а не фиксированный размер. Соотношение сторон такое же, как у формата 320 x 50. После того как вы укажете полную доступную ширину, Google Mobile Ads Flutter Plugin вернет объявление с оптимальной высотой для этой ширины. Оптимальная высота объявления остается неизменной для разных запросов объявлений, а контент вокруг объявления не сдвигается при его обновлении.

Всегда используйте тестовые объявления

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

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

Android

ca-app-pub-3940256099942544/9214589741

iOS

ca-app-pub-3940256099942544/2435281174

Тестовые рекламные блоки настроены так, чтобы возвращать тестовые объявления по каждому запросу. Вы можете использовать их в своих приложениях при написании кода, тестировании и отладке. Перед публикацией приложения не забудьте заменить их на идентификаторы собственных рекламных блоков.

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

Большие адаптивные баннеры – это формат, предназначенный для макетов без прокрутки. По сравнению со стандартными фиксированными адаптивными баннерами у этих баннеров может быть большая максимальная высота (до 20% высоты экрана, от 50 до 150 dp). Это пространство оптимизировано для видеоконтента.

Чтобы запросить баннер правильного размера, выполните следующие действия:

  1. Получите ширину экрана устройства в пикселях, не зависящих от плотности (dp), с помощью MediaQuery.of(context). Если вы не хотите использовать всю ширину экрана, вы можете задать собственную ширину.

  2. Чтобы получить объект AdSize, используйте подходящий статический метод класса AdSize. Например, используйте AdSize.getLargeAnchoredAdaptiveBannerAdSize(int width), чтобы получить размер объявления для текущей ориентации.

// Get an AnchoredAdaptiveBannerAdSize before loading the ad.
final size = await AdSize.getLargeAnchoredAdaptiveBannerAdSize(
  MediaQuery.sizeOf(context).width.truncate(),
);

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

В примере ниже загружается баннер:

void _loadAd() async {
  // Get an AnchoredAdaptiveBannerAdSize before loading the ad.
  final size = await AdSize.getLargeAnchoredAdaptiveBannerAdSize(
    MediaQuery.sizeOf(context).width.truncate(),
  );

  if (size == null) {
    // Unable to get width of anchored banner.
    return;
  }

  unawaited(
    BannerAd(
      adUnitId: "_adUnitId",
      request: const AdRequest(),
      size: size,
      listener: BannerAdListener(
        onAdLoaded: (ad) {
          // Called when an ad is successfully received.
          debugPrint('Ad was loaded.');
          setState(() {
            _bannerAd = ad as BannerAd;
          });
        },
        onAdFailedToLoad: (ad, err) {
          // Called when an ad request failed.
          debugPrint('Ad failed to load with error: $err');
          ad.dispose();
        },
      ),
    ).load(),
  );
}

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

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

onAdOpened: (Ad ad) {
  // Called when an ad opens an overlay that covers the screen.
  debugPrint('Ad was opened.');
},
onAdClosed: (Ad ad) {
  // Called when an ad removes an overlay that covers the screen.
  debugPrint('Ad was closed.');
},
onAdImpression: (Ad ad) {
  // Called when an impression occurs on the ad.
  debugPrint('Ad recorded an impression.');
},
onAdClicked: (Ad ad) {
  // Called when a click event occurs on the ad.
  debugPrint('Ad was clicked.');
},
onAdWillDismissScreen: (Ad ad) {
  // iOS only. Called before dismissing a full screen view.
  debugPrint('Ad will be dismissed.');
},

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

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

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

Чтобы показать BannerAd в виде виджета, необходимо создать экземпляр AdWidget с поддерживаемым объявлением после вызова load(). Виджет можно создать до вызова load(), но load() необходимо вызвать до добавления виджета в дерево.

AdWidget наследует свойства класса Widget из Flutter и может использоваться как любой другой виджет. На устройствах iOS виджет нужно поместить в виджет с указанными шириной и высотой. В противном случае объявление может не показываться. BannerAd можно разместить в контейнере, размер которого соответствует размеру объявления:

if (_bannerAd != null)
  Align(
    alignment: Alignment.bottomCenter,
    child: SafeArea(
      child: SizedBox(
        width: _bannerAd!.size.width.toDouble(),
        height: _bannerAd!.size.height.toDouble(),
        child: AdWidget(ad: _bannerAd!),
      ),
    ),
  ),

Объявление должно быть удалено, когда доступ к нему больше не требуется. Рекомендуется вызывать dispose() после удаления AdWidget из дерева виджетов или в обратном вызове BannerAdListener.onAdFailedToLoad().

Готово! Теперь ваше приложение готово к показу баннеров.

Ограничение прокрутки на устройствах с Android 9 и более ранними версиями ОС

Мы знаем, что на некоторых старых или менее мощных устройствах с Android 9 или более ранней версией могут возникать проблемы с производительностью при показе встроенных баннеров в прокручиваемых представлениях. Рекомендуем использовать такие баннеры только на устройствах с Android 10 или более поздней версии. Баннеры с фиксированной позицией, например фиксированные баннеры, не затронуты и могут использоваться с оптимальной эффективностью на всех уровнях API Android.

Полный пример на GitHub

Полный пример можно посмотреть в демоверсии API.

Подробнее о других типах баннеров

Ознакомьтесь с другими типами баннеров, описанными в этом разделе, для вашего приложения Flutter.

Встроенные адаптивные баннеры

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

Сворачиваемые баннеры

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