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

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

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

В следующем примере показано, как загрузить баннер:

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(),
  );
}
banner_ad_snippets.dart

Вместо _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.');
},
banner_ad_snippets.dart

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

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

Примечание. Если задать частоту обновления в интерфейсе AdMob, автоматическое обновление будет происходить только в том случае, если баннер виден на экране.

Как показывать баннеры

Чтобы показывать BannerAd в виде виджета, после вызова load() необходимо создать экземпляр AdWidget с поддерживаемым объявлением. Вы можете создать виджет до вызова 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!),
      ),
    ),
  ),
banner_ad_snippets.dart

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

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

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

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

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

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

Другие типы баннеров

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

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

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

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

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