Настройка баннерной рекламы, Настройка баннерной рекламы

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

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

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

Адаптивные баннерные объявления с привязкой к определенной ширине — это объявления с фиксированным соотношением сторон, а не фиксированным размером . Соотношение сторон аналогично 320x50. После указания доступной полной ширины Google Mobile Ads Flutter Plugin возвращает объявление с оптимальной высотой для этой ширины. Оптимальная высота объявления остается постоянной при разных запросах, а контент вокруг объявления остается на месте после обновления страницы.

Всегда проводите тестирование с помощью тестовых объявлений.

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

Самый простой способ загрузить тестовые объявления — использовать наш специальный идентификатор тестового рекламного блока для баннеров:

Android 

ca-app-pub-3940256099942544/9214589741

iOS 

ca-app-pub-3940256099942544/2435281174

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

Узнать размер рекламы

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

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

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

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

Загрузить рекламу

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

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

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

  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();
}
main.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 an 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.");
},
main.dart

Обновить рекламу

Если вы настроили автоматическое обновление рекламного блока, вам не нужно запрашивать новый рекламный блок, если предыдущий не загружается. 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!),
      ),
    ),
  ),
main.dart

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

Вот и всё! Ваше приложение готово к показу баннерной рекламы.

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

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

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

Полный пример интеграции баннера, описанный на этой странице, можно посмотреть в файле banner_example .

Узнайте о других типах баннеров

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

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

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

Складные баннеры

Сворачиваемые баннеры — это баннеры, которые изначально отображаются в виде увеличенного наложения с кнопкой для сворачивания объявления до меньшего размера. Рекомендуется использовать этот тип баннера для дальнейшей оптимизации эффективности. Более подробную информацию см. в разделе «Сворачиваемые баннеры» .