Adaptive inline banner

Adaptive inline banners are a flexible format of banner advertising, providing maximum efficiency by optimizing the size of the ad on each device.

This ad type lets developers set a maximum allowable width and height for the ad, though the optimal ad size is still determined automatically. To select the best ad size, built-in adaptive banners use the maximum height rather than the fixed height. That provides room for improving performance.

Typically, that format is used in feed-based apps or contexts where it's okay to focus primarily on the ad.

This guide shows how to integrate adaptive inline banners into Flutter apps. In addition to code examples and instructions, it has offers format-specific recommendations and links to additional resources.

Prerequisite

Follow the process in Quick start to integrate the Yandex Mobile Ads Flutter Plugin.
Make sure you're running the latest Yandex Mobile Ads Flutter Plugin version. If you're using mediation, make sure you're running the latest version of the unified build.

Implementation

Key steps for integrating adaptive inline banners:

Create and configure a widget for displaying banner ads.
Install callback functions for ad lifecycle events.
Load the ad.

Features of adaptive inline banner integration

If you received an error in the onAdFailedToLoad() callback, don't try to load a new ad again. If there's no other option, limit the number of ad load retries. That will help avoid constant unsuccessful requests and connection issues when limitations arise.
To ensure that adaptive inline banners function correctly, make your app layouts adaptive. Otherwise, your ads might render incorrectly.
Adaptive inline banners work best when using all the available width. In most cases, that's the full width of the device screen. Make sure to include all padding and safe display areas applicable to your app.
Adaptive inline banners are designed for placement in scrollable content. It can have the same height as the device screen or be limited to the maximum height depending on the API.
To get the size of the ad, use the BannerAdSize.inline(width, maxAdHeight) method, which accepts the available width of the ad container and the maximum acceptable ad height as arguments.
The BannerAdSize object, which is calculated using the BannerAdSize.inlineSize(width, maxAdHeight) method, contains technical data for selecting the most effective ad sizes on the backend. The height of the ad may change every time it's loaded. Use the BannerAdSize::getCalculatedBannerAdSize() method to get the actual width and height of the ad.

To display banner ads, you need to add AdWidget to the app layout.

Example of adding AdWidget to the app screen layout:

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

Loading and rendering ads

Once AdWidget has been created and added to the app screen, the ad needs to be loaded. The ad size must also be calculated for each device before loading adaptive inline banners.

That happens automatically via the SDK API: BannerAdSize.inline(width, maxAdHeight).

As an argument, pass the width of the ad container and the maximum acceptable ad height. We recommend using the entire width of the device screen or the width of the parent container. Be sure to include all the applicable paddings and safe display areas applicable to your app.

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

To load an ad, you'll need the ad unit ID from the Partner Interface (adUnitId).

To notify when ads load or fail to load and to track the life cycle of adaptive inline banners, set callback functions for the BannerAd class object.

You can expand ad request parameters through AdRequest() by passing user interests, contextual page data, location details, or other data. Delivering additional contextual data in the request can significantly improve your ad quality.

The following example shows how to load an adaptive inline banner. After successfully loading, the banner will be displayed automatically:

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,
      ),
    );
  }
}

Releasing resources

If the callback method was called after the end of the widget lifecycle, release the resources by calling the destroy() function on the ad object:

_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;
      }
    },
  );
}

Testing adaptive inline banner integration

Android

iOS

Using demo ad units for ad testing

We recommend using test ads to test your adaptive inline banner integration and your app itself.

To guarantee that test ads are returned for every ad request, we created a special demo ad placement ID. Use it to check your ad integration.

Demo adUnitId: demo-banner-yandex.

Warning

Before publishing your app in the store, make sure to replace the demo ad placement ID with a real one obtained from the Partner Interface.

You can find the list of available demo ad placement IDs in the Demo ad units for testing section.

Testing ad integration

You can test your adaptive inline banner integration using the SDK's built-in analyzer.

The tool makes sure your ads are integrated properly and outputs a detailed report to the log. To view the report, search for the "YandexAds" keyword in the Logcat tool for Android app debugging.

adb logcat -v brief '*:S YandexAds'

If the integration is successful, you'll see this message:

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

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

Using demo ad units for ad testing

We recommend using test ads to test your ad integration and your app itself.

To guarantee that test ads are returned for every ad request, we created a special demo ad placement ID. Use it to check your ad integration.

Demo adUnitId: demo-banner-yandex.

Warning

Before publishing your app to the store, make sure you replace the demo ad unit ID with a real one obtained from the Partner Interface.

You can find the list of available demo ad placement IDs in the Demo ad units for testing section.

Testing ad integration

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

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

YMAMobileAds.enableLogging()

To view SDK logs, go to the Console tool and set sybsystem = com.yandex.mobile.ads.sdk. You can also filter logs by category and 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

Link to pub.dev.

Was the article helpful?

Ad formats

Adaptive sticky banner

Adaptive inline banner

Prerequisite

Implementation

Features of adaptive inline banner integration

Adding a banner widget to the app layout

Loading and rendering ads

Releasing resources

Testing adaptive inline banner integration

Using demo ad units for ad testing

Testing ad integration

Using demo ad units for ad testing

Testing ad integration

Additional resources

Was the article helpful?