Баннер

Выберите платформу: Android iOS Unity Flutter

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

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

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

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

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

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

Андроид 

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 SDK учитывает любую частоту обновления, указанную в пользовательском интерфейсе 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 и более поздних версиях. Фиксированные баннеры, такие как закрепленные, не подвержены этой проблеме и могут использоваться с оптимальной производительностью на всех уровнях API Android.

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

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

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

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

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

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

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

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