Адаптивный inline-баннер

Адаптивный inline-баннер — гибкий формат баннерной рекламы, обеспечивающий максимальную эффективность за счет оптимизации размера рекламы для каждого устройства.

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

Как правило, такой формат используется в приложениях-лентах или там, где допустимо обеспечить основной фокус на рекламе.

Это руководство покажет, как интегрировать адаптивный inline-баннер во Flutter-приложение. В дополнение к примерам кода и инструкции, оно также содержит рекомендации по использованию данного формата рекламы, а также ссылки на дополнительные ресурсы.

Дополнительно об интеграции адаптивного inline-баннера смотрите в видео:

YouTube

Пререквизит

Выполните шаги по интеграции Yandex Mobile Ads Flutter Plugin, описанные в Быстром старте.
Убедитесь, что используете самую актуальную версию Yandex Mobile Ads Flutter Plugin, а в случае использовании медиации — наиболее свежую версию единой сборки.

Имплементация

Основные шаги по интеграции адаптивного inline-баннера:

Создать и настроить виджет для отображенния баннерной рекламы.
Установите функции обратного вызова для событий жизненного цикла рекламного объявления.
Загрузить рекламу.

Особенности подключения адаптивного inline-баннера

Если вы получили ошибку в коллбэке onAdFailedToLoad(), не пытайтесь загрузить новое объявление снова. Если всё же необходимо это сделать, ограничьте число повторных попыток загрузки рекламы. Это поможет избежать постоянных неудачных запросов и проблем с подключением в случае ограничений.
Чтобы адаптивные inline-баннеры работали правильно, сделайте макеты приложения адаптивными. Невыполнение этого требования может привести к некорректному отображению рекламы.
Адаптивные inline-баннеры лучше всего работают при использовании всей доступной ширины. В большинстве случаев это будет полная ширина экрана используемого устройства. Обязательно учитывайте применимые в приложении отступы (padding) и безопасные зоны (safe area) дисплея.
Адаптивный inline-баннер предназначен для размещения в прокручиваемом контенте. Баннер может быть такой же высоты, как экран устройства, или ограничен максимальной высотой, в зависимости от API.
Для получения размера рекламного объявления воспользуйтесь методом BannerAdSize.inline(width, maxAdHeight), принимающим в качестве аргументов доступную ширину рекламного контейнера и максимально допустимую высоту объявления.
Объект BannerAdSize, рассчитанный с помощью метода BannerAdSize.inline(width, maxAdHeight) содержит технические данные для выбора наиболее эффективных размеров рекламных объявлений на стороне бэкенда. Высота рекламного объявления может изменяться при каждой загрузке рекламы. Актуальные значения ширины и высоты рекламы можно получить с помощью метода BannerAdSize::getCalculatedBannerAdSize().

Добавление рекламного виджета в макет приложения

Для отображения баннерной рекламы, необходимо добавить виджет AdWidget в макет приложения.

Пример добавления AdWidget в макет экрана приложения:

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Align(
      alignment: Alignment.bottomCenter,
      child: AdWidget(bannerAd: banner),
    ),
  );
}

Загрузка и отображение рекламы

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

Делается это автоматически через API sdk: BannerAdSize.inline(width, maxAdHeight).

В качестве аргумента необходимо передать ширину рекламного контейнера, а также максимально допустимую высоту рекламного объявления. Рекомендуется использовать всю ширину экрана устройства или ширину родительского контейнера. Обязательно учитывайте применимые в приложении отступы (padding) и безопасные зоны (safe area) дисплея:

BannerAdSize getAdSize() {
  final screenWidth = MediaQuery.of(context).size.width.round();
  return BannerAdSize.inline(width: screenWidth, maxHeight: bannerMaxHeight);
}

Для загрузки рекламы потребуется идентификатор рекламного места, полученный вами в ПИ (adUnitId).

Для уведомления об успешной или неудачной загрузке рекламы, а также для отслеживания событий жизненного цикла адаптивного inline-баннера, объекту класса BannerAd необходимо установить функции обратного вызова.

Расширить параметры запроса за рекламой можно через AdRequest(), передав в запросе данные об интересах пользователя, контекстные данные страницы, локацию или другие дополнительные данные. Дополнительные контекстные данные на запросе могут значительно улучшить качество рекламы.

В следующем примере показано, как загрузить адаптивный inline-баннер. После успешной загрузки, баннер отобразится автоматически:

class _MyHomePageState extends State<MyHomePage> {
  late BannerAd banner;
  var isBannerAlreadyCreated = false;

  _loadAd() async {
      banner = _createBanner();
      setState(() {
        isBannerAlreadyCreated = true;
      });
      // if banner was already created you can just call:
      // banner.loadAd(adRequest: const AdRequest());
  }

  BannerAdSize getAdSize() {
    final screenWidth = MediaQuery.of(context).size.width.round();
    return BannerAdSize.inline(width: screenWidth, maxHeight: bannerMaxHeight);
  }

  _createBanner() {
    return BannerAd(
      adUnitId: 'R-M-XXXXXX-Y', // or 'demo-banner-yandex'
      adSize: _getAdSize(),
      adRequest: const AdRequest(),
      onAdLoaded: () {
        // The ad was loaded successfully. Now it will be shown.
      },
      onAdFailedToLoad: (error) {
        // Ad failed to load with AdRequestError.
        // Attempting to load a new ad from the onAdFailedToLoad() method is strongly discouraged.
      },
      onAdClicked: () {
        // Called when a click is recorded for an ad.
      },
      onLeftApplication: () {
        // Called when user is about to leave application (e.g., to go to the browser), as a result of clicking on the ad.
      },
      onReturnedToApplication: () {
        // Called when user returned to application after click.
      },
      onImpression: (impressionData) {
        // Called when an impression is recorded for an ad.
      }
    );
  }

  @override
  initState() {
    super.initState();
    MobileAds.initialize();
    _loadAd();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Align(
        alignment: Alignment.bottomCenter,
        child: isBannerAlreadyCreated ? AdWidget(bannerAd: banner) : null,
      ),
    );
  }
}

Освобождение ресурсов

Если метод обратного вызова был вызван после окончания жизненного цикла виджета, освободите ресурсы вызовом функции destroy() для используемого объекта рекламы:

_createBanner() {
  return BannerAd(
    adUnitId: 'R-M-XXXXXX-Y', // or 'demo-banner-yandex'
    adSize: getAdSize(),
    adRequest: const AdRequest(),
    onAdLoaded: () {
      // The ad was loaded successfully. Now it will be shown.
      if (!mounted) {
        banner.destroy();
        return;
      }
    },
  );
}

Тестирование интеграции адаптивного inline-баннера

Android

iOS

Использование демоблоков для тестирования рекламы

Для проверки корректной интеграции адаптивного inline-баннера, а также для тестирования вашего приложения, рекомендуется использовать тестовую рекламу.

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

Демонстрационный adUnitId: demo-banner-yandex.

Важно

Убедитесь, что перед выкладыванием приложения в store, вы заменили демонстрационный идентификатор рекламного места на настоящий, полученный в ПИ.

Список всех доступных демонстрационных идентификаторов рекламного места доступен в разделе Демоблоки для тестирования.

Проверка корректной интеграции рекламы

Проверить корректность интеграции адаптивного inline-баннера можно через встроенный в sdk анализатор.

Данный инструмент проверяет корректность подключения рекламы и выводит в лог подробный отчет. Для просмотра отчета, выполните поиск по ключевому слову "YandexAds" в инструменте отладки Android-приложений Logcat.

adb logcat -v brief '*:S YandexAds'

В случае успешной интеграции, вы увидите следующее сообщение:

adb logcat -v brief '*:S YandexAds'
mobileads$ adb logcat -v brief '*:S YandexAds'
I/YandexAds(13719): [Integration] Ad type banner was integrated successfully

В случае обнаружения проблем при интеграции баннерной рекламы — подробный отчет о проблемах и рекомендации по их устранению.

Использование демоблоков для тестирования рекламы

Для проверки корректной интеграции рекламы, а также для тестирования вашего приложения, рекомендуется использовать тестовую рекламу.

Демонстрационный adUnitId: demo-banner-yandex.

Важно

Проверка корректной интеграции рекламы

Проверить корректность интеграции рекламы можно через нативный инструмент Console.

Чтобы получить возможность просматривать расширенные логи, необходимо вызвать метод enableLogging класса YMAMobileAds.

YMAMobileAds.enableLogging()

Для просмотра логов SDK в инструменте Console установите sybsystem = com.yandex.mobile.ads.sdk. Так же вы можете фильтровать логи по категории и по уровню ошибки.

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

Дополнительные ресурсы

Ссылка на pub.dev.

Была ли статья полезна?

Форматы рекламы

Адаптивный sticky-баннер