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

Выберите платформу: 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.

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

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

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

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