Эта страница переведена с помощью Cloud Translation API.

Баннер

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

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

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

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

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

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

/21775744923/example/adaptive-banner

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

Узнайте размер объявления

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

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

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

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

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

class BannerExampleState extends State<BannerExample>{
  AdManagerBannerAd? _bannerAd;
  bool _isLoaded = false;

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = '/21775744923/example/adaptive-banner';

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

    _bannerAd = AdManagerBannerAd(
      adUnitId: adUnitId,
      request: const AdManagerAdRequest(),
      size: size,
      listener: AdManagerBannerAdListener(
        // Called when an ad is successfully received.
        onAdLoaded: (ad) {
          debugPrint('$ad loaded.');
          setState(() {
            _isLoaded = true;
          });
        },
        // Called when an ad request failed.
        onAdFailedToLoad: (ad, err) {
          debugPrint('AdManagerBannerAd failed to load: $error');
          // Dispose the ad here to free resources.
          ad.dispose();
        },
      ),
    )..load();
  }
}

Баннерная реклама

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

class BannerExampleState extends State<BannerExample> {
  AdManagerBannerAd? _bannerAd;
  bool _isLoaded = false;

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = '/21775744923/example/adaptive-banner';


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

    _bannerAd = AdManagerBannerAd(
      adUnitId: adUnitId,
      request: const AdManagerAdRequest(),
      size: size,
      listener: AdManagerBannerAdListener(
        // Called when an ad is successfully received.
        onAdLoaded: (ad) {
          debugPrint('$ad loaded.');
          setState(() {
            _isLoaded = true;
          });
        },
        // Called when an ad request failed.
        onAdFailedToLoad: (ad, err) {
          debugPrint('AdManagerBannerAd failed to load: $error');
          // Dispose the ad here to free resources.
          ad.dispose();
        },
        // Called when an ad opens an overlay that covers the screen.
        onAdOpened: (Ad ad) {},
        // Called when an ad removes an overlay that covers the screen.
        onAdClosed: (Ad ad) {},
        // Called when an impression occurs on the ad.
        onAdImpression: (Ad ad) {},
      ),
    )..load();
  }
}

Обновить объявление

Если вы настроили обновление рекламного блока, вам не нужно запрашивать другое объявление, если оно не загружается. Google Mobile Ads SDK учитывает любую частоту обновления, указанную вами в пользовательском интерфейсе Менеджера рекламы. Если вы не включили обновление, отправьте новый запрос. Дополнительные сведения об обновлении рекламных блоков, например о настройке частоты обновления, см. в разделе Частота обновления рекламы в мобильных приложениях .

Показ рекламного баннера

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

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

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 из дерева виджетов, либо в обратном вызове AdManagerBannerAdListener.onAdFailedToLoad() .

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

Ограничение прокрутки на Android 9 и ниже

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

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

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

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

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

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

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