Banner

Banner ads are rectangular image or text ads that occupy a space inside the application layout. They stay on screen while the users interact with the app and can automatically refresh after a certain period of time. If you are new in mobile advertising, they are an excellent choice to start.

Integration

Banners are integrated by adding the BannerAd widget to the app’s layout. Below, you can find a simple integration example:

import 'package:wortise/wortise.dart';

/* ... */

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('Wortise Flutter Example'),
      ),
      body: ListView(
        padding: EdgeInsets.all(20),
        children: [
          /* Banner must be inside a container */
          Container(
            height: 50,
            child: BannerAd(
              adSize: AdSize.HEIGHT_50,
              adUnitId: 'Wortise Ad Unit ID',
            ),
          )
        ]
      ),
    ),
  );
}

The widget has support for the following parameters:

Parameter	Type	Required	Description
adUnitId	String	Yes	The ad unit ID to assign to the banner
adSize	AdSize	No	Maximum size (height) for the banner. The possible values for this parameter are declared in the `AdSize` class
autoRefreshTime	Integer	No	Value in seconds that represents the time that must elapse to load a new banner ad
keepAlive	Boolean	No	Indicates if the banner instance should be keep “alive” at any moment
listener	Function	No	Listener to receive the banner events (`BannerAdEvent`)
requestParameters	RequestParameters	No	Extra parameters for the ad request, such as the collapsible position

Adaptive banners

Adaptive banners are a new banner format where the size of the ads is adapted according to the device and the app user-interface, in order to maximize performance.

Currently there is support for two kind of adaptive banners:

Anchored

This kind of banner is designed to replace the traditional 320x50 banners and be positioned at the top or bottom of the screen.

To use this format, an AdSize generated in the following way must be passed to the BannerAd widget:

// You need to specify the banner width
AdSize.getAnchoredAdaptiveBannerAdSize(width);

Inline

This other kind of banner, in comparison to the anchored, is designed to have a variable height and be positioned inside a scrolling content.

In this case, an AdSize must be generated this way:

// You need to specify the banner width. The maximum height is an
// optional parameter (by passing 0 or a negative value)
AdSize.getInlineAdaptiveBannerAdSize(width, maxHeight);

Collapsible banners

Collapsible banners are anchored banners that are initially shown as a larger overlay, with a button that collapses them to their declared size. They are meant to improve the performance of anchored banners without taking up more space permanently.

To request one, pass a RequestParameters instance with the desired position to the widget:

BannerAd(
  adSize: adSize,
  adUnitId: 'Wortise Ad Unit ID',
  requestParameters: RequestParameters(
    collapsible: CollapsiblePosition.bottom,
  ),
)

The position determines where the expanded ad is anchored, and it must match the position of the banner inside the app layout:

Value	Description
`CollapsiblePosition.bottom`	The banner is placed at the bottom of the screen
`CollapsiblePosition.top`	The banner is placed at the top of the screen

Listener setup

A listener can be set to any BannerAd instance to receive the events that happen during its lifecycle. For this, you need to assign a function to the listener parameter of the widget, as shown below:

BannerAd(
  adSize: AdSize.HEIGHT_50,
  adUnitId: 'Wortise Ad Unit ID',
  listener: (event, args) {
    switch (event) {
      case BannerAdEvent.CLICKED: {
        // The ad has been clicked
      }
      break;

      case BannerAdEvent.FAILED_TO_LOAD: {
        // The ad could not be loaded
      }
      break;

      case BannerAdEvent.IMPRESSION: {
        // The ad has generated an impression
      }
      break;

      case BannerAdEvent.LOADED: {
        // The ad has been loaded
      }
      break;

      case BannerAdEvent.REVENUE_PAID: {
        // The ad has generated revenue
      }
      break;
    }
  },
)