Баннер

Виды баннеров

В Yandex Mobile Ads SDK есть два вида баннеров:

Баннер

Описание

Когда использовать

Sticky

Баннер-липучка, который примыкает к краю экрана и появляется поверх других элементов. Устойчивый к прокрутке.

Когда баннер должен «приклеиться» и находиться поверх контента даже при прокрутке.

Inline

Баннер, который встраивается как элемент UI — в списки, контент и т. д.

Когда баннер должен быть частью контента: в ленте новостей, между постами, как элемент списка.

Все виды автоматически обновляют креатив каждые 60 секунд.

Совет

Чтобы установить свой период для автообновления, обратитесь к персональному менеджеру.

Программно виды отличаются лишь тем, как задается их размер. Примеры:

BannerAdSize.sticky({required int width})
BannerAdSize.inline({required int width, required int maxHeight})

Сущность

Описание

BannerAdSize

Высота баннера должна:

  • не превышать 15% от высоты экрана;

  • составлять не менее 50 dp/pt (Android/iOS).

Все размеры баннера должны передаваться строго в dp.

adUnitId

Используйте:

  • development mode — для работы с демоблоками;

  • production mode — для работы с R-M-XXXXXX-Y (уточните реальный ID в интерфейсе Рекламной сети Яндекса). R-M-XXXXXX-Y — это вид рабочего рекламного ID, по которому будут приходить разные креативы.

Примечание

Пример работы всех типов форматов есть в демопроекте.

Пример создания баннера

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:yandex_mobileads/mobile_ads.dart';

class BannerPage extends StatefulWidget {
  const BannerPage({super.key});

  @override
  State<BannerPage> createState() => _BannerPageState();
}

class _BannerPageState extends State<BannerPage> {
  static const _tag = 'Banner';
  static const _adUnitId = 'demo-banner-yandex';

  BannerAd? _banner;
  bool _adLoaded = false;
  String _status = 'Loading...';

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    if (_banner == null) {
      _createBanner();
    }
  }

  @override
  void dispose() {
    _banner?.destroy();
    super.dispose();
  }

  void _createBanner() {
    final size = MediaQuery.of(context).size;
    
    _banner = BannerAd(
      adUnitId: _adUnitId,
      adSize: BannerAdSize.inline(
        width: size.width.round(),
        maxHeight: (size.height / 3).round(),
      ),
      adRequest: const AdRequest(),
      onAdLoaded: () {
        debugPrint('[$_tag] onAdLoaded');
        if (mounted) setState(() { _adLoaded = true; _status = 'Loaded'; });
      },
      onAdFailedToLoad: (error) {
        debugPrint('[$_tag] onAdFailedToLoad: ${error.description}');
        if (mounted) setState(() => _status = 'Error: ${error.description}');
      },
      onAdClicked: () => debugPrint('[$_tag] onAdClicked'),
      onLeftApplication: () => debugPrint('[$_tag] onLeftApplication'),
      onReturnedToApplication: () => debugPrint('[$_tag] onReturnedToApplication'),
      onImpression: (ImpressionData impressionData) => debugPrint('[$_tag] onAdImpression: $impressionData'),
      onAdClose: () => debugPrint('[$_tag] onAdClose'),
    );

    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Banner')),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(16),
            child: Text(_status),
          ),
          const Spacer(),
          if (_banner != null)
            SizedBox(
              width: double.infinity,
              child: AdWidget(bannerAd: _banner!),
            ),
        ],
      ),
    );
  }
}

Проверка интеграции

Соберите и запустите проект. Успешную интеграцию можно проверить в Logcat Android Studio по ключевому слову YandexAds:

[Integration] Ad type Banner was integrated successfully