Adaptive sticky banner

An adaptive sticky banner is a small, automatically updated ad placed at the bottom or top of the app screen. It doesn't overlap the main content and is often used in gaming apps.

The adaptive sticky banner delivers maximum performance by optimizing the ad size for each device. With this ad type, developers can set the maximum allowable ad width, and the system determines the optimal ad size automatically.

Appearance

This guide shows how to integrate adaptive sticky banners into Flutter apps. Besides code samples and instructions, it also contains format-specific recommendations and links to additional resources.

Prerequisite

  1. Follow the Yandex Mobile Ads Flutter plugin integration steps described under Quick start.
  2. Make sure that you have the latest version of the Yandex Mobile Ads Flutter plugin. If you're using mediation, update to the most recent single build version.

Implementation

Key steps to integrate an adaptive sticky banner:

  • Create and configure a widget for displaying banner ads.
  • Subscribe to load state streams and events.
  • Load the ad.

Features of adaptive sticky banner integration

  1. We strongly advise against attempting to load a new ad when receiving an error in the onAdFailedToLoad() method. If you need to load an ad from onAdFailedToLoad, limit retry attempts to avoid recurring failed ad requests in case of network connection constraints.

  2. Adaptive sticky banners work best when utilizing the full available width. In most cases, this will be the full width of the device screen. Be sure to consider the padding parameters set in your app and the display's safe area.

  3. To get the size of the ad, use the BannerAdSize.stickySize(adWidth) method, which accepts the available width of the ad container as the argument.

  4. The BannerAdSize object, which is calculated using the BannerAdSize.stickySize(adWidth) method, contains constant ad width and height values for identical devices. When testing your app's layout on a specific device, you can be sure that the ad size for that device will remain the same. Use the BannerAdSize::getCalculatedBannerAdSize() method to get the actual width and height of the ad.

  5. The height of an adaptive sticky banner never exceeds 15% of the screen height and can't be less than 50 dp.

Adding an ad widget to the app layout

To display banner ads, add AdWidget to your app layout.

Example of adding AdWidget to an app screen layout:

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

Loading and rendering ads

Once you created and added AdWidget to the app screen, you need to load the ads. The ad size must also be calculated for each device before loading an adaptive sticky banner.

That is performed automatically via the SDK API: BannerAdSize.sticky(width: screenWidth).

As an argument, pass the maximum permissible width of the ad container. We recommend using the entire width of the device screen or the width of the parent container. Be sure to consider the padding parameters set in your app and the display's safe area:

BannerAdSize getAdSize() {
  final screenWidth = MediaQuery.of(context).size.width.round();
  return BannerAdSize.sticky(width: screenWidth);
}

To load ads, you need the ad unit ID you obtained in the Yandex Advertising Network interface (adUnitId).

To monitor successful and failed ad loads, as well as lifecycle events for an adaptive sticky banner, subscribe to the loadStateStream and events streams provided by the BannerAd class.

You can expand ad request parameters through AdRequest(), by passing user interests, contextual page data, location, or other additional info. Adding extra context to ad requests can greatly improve ad relevance. To learn more, see Ad targeting.

The following example shows how to load an adaptive sticky banner. Once loaded, the banner is displayed automatically:

class _MyHomePageState extends State<MyHomePage> {
  BannerAd? _banner;
  var isBannerAlreadyCreated = false;

  BannerAdSize _getAdSize() {
    final screenWidth = MediaQuery.of(context).size.width.round();
    return BannerAdSize.sticky(width: screenWidth);
  }

  void _loadAd() {
    final banner = BannerAd(adSize: _getAdSize());

    banner.loadStateStream.listen((state) {
      if (state is BannerAdLoadStateLoaded) {
        // The ad was loaded successfully. Now it will be shown.
      } else if (state is BannerAdLoadStateError) {
        // Ad failed to load with AdRequestError.
        // Attempting to load a new ad from the error handler is strongly discouraged.
      }
    });

    banner.events.listen((event) {
      if (event is BannerAdClickedEvent) {
        // Called when a click is recorded for an ad.
      } else if (event is BannerAdImpressionEvent) {
        // Called when an impression is recorded for an ad.
      }
    });

    banner.load(AdRequest(adUnitId: 'R-M-XXXXXX-Y')); // or 'demo-banner-yandex'
    _banner = banner;
    setState(() {
      isBannerAlreadyCreated = true;
    });
  }

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

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

Releasing resources

When the banner is no longer needed, call the destroy() method to free up your resources:

await _banner?.destroy();
_banner = null;

Testing adaptive sticky banner integration

Using demo ad units for ad testing

Use test ads to check your adaptive sticky banner integration and the app itself. To make sure that test ads are returned for each ad request, you can use a special demo ad placement ID.

Demo adUnitId: demo-banner-yandex.

Warning

Before publishing your app in the store, make sure to replace the demo placement ID with the real ID you obtained in the Yandex Advertising Network interface.

For the list of all available demo ad placement IDs, see Demo ad units for testing.

Testing ad integration

You can check if your adaptive sticky banners are integrated correctly using the SDK's built-in analyzer. A detailed report with the test results will appear in the log.

To view the report, search for the keyword “YandexAds” in Logcat, a tool for debugging Android apps.

adb logcat -v brief '*:S YandexAds'

If the integration is successful, the following message is returned:

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

If there are any banner integration issues, you'll get a detailed issue report and troubleshooting recommendations.

Using demo ad units for ad testing

Use test ads to check your ad integration and the app itself. To make sure that test ads are returned for each ad request, you can use a special demo ad placement ID.

Demo adUnitId: demo-banner-yandex.

Warning

Before publishing your app in the store, make sure to replace the demo placement ID with the real ID you obtained in the Yandex Advertising Network interface.

For the list of all available demo ad placement IDs, see Demo ad units for testing.

Testing ad integration

You can test your ad integration using the native Console tool.

To view detailed logs, call the YandexAds class's enableLogging method.

YandexAds.enableLogging()

To view SDK logs, go to the Console tool and set Subsystem = com.mobile.ads.ads.sdk. You can filter logs by category or error level.

If you're having problems integrating ads, you'll get a detailed report on the issues and recommendations for how to fix them.

Additional resources

Previous
Adaptive inline banner
Next
Interstitial ads