Banner & MREC Ads

The following sections show you how to load and then show and hide a banner or MREC ad.

See also

“Why mobile banners ads persist in a video and playable world” from AppLovin’s Blog.

Loading a Banner or MREC

The following code shows you how to load a banner or MREC by using your Ad Unit ID, desired position, and (for banners) desired background color. MAX will size the ad for you automatically:

Banners

final String _banner_ad_unit_ID = Platform.isAndroid ? "«Android-banner-ad-unit-ID»" : "«iOS-banner-ad-unit-ID»";

function initializeBannerAds()
{
  // MAX automatically sizes banners to 320×50 on phones and 728×90 on tablets
  AppLovinMAX.createBanner(_banner_ad_unit_ID, AdViewPosition.bottomCenter);
}

MRECs

final String _mrec_ad_unit_ID = Platform.isAndroid ? "«Android-MREC-ad-unit-ID»" : "«iOS-MREC-ad-unit-ID»";

public void initializeMRecAds()
{
  // MAX sizes MRECs to 300×250 on phones and tablets
  AppLovinMAX.createMRec(_mrec_ad_unit_ID, AdViewPosition.bottomCenter);
}

Displaying a Banner

To show a banner, call showBanner():

AppLovinMAX.showBanner(_banner_ad_unit_ID);

To hide a banner, call hideBanner():

AppLovinMAX.hideBanner(_banner_ad_unit_ID);

Widget Method

You can also render a banner or MREC directly in your widget tree:

Banners

final String _ad_unit_ID = Platform.isAndroid ? "«Android-ad-unit-ID»" : "«iOS-ad-unit-ID»";
MaxAdView(
  adUnitId: _ad_unit_ID,
  adFormat: AdFormat.banner,
  listener: AdViewAdListener(onAdLoadedCallback: (ad) {
    ⋮
  }, onAdLoadFailedCallback: (adUnitId, error) {
    ⋮
  }, onAdClickedCallback: (ad) {
    ⋮
  }, onAdExpandedCallback: (ad) {
    ⋮
  }, onAdCollapsedCallback: (ad) {
    ⋮
  })
)

MRECs

final String _ad_unit_ID = Platform.isAndroid ? "«Android-ad-unit-ID»" : "«iOS-ad-unit-ID»";
MaxAdView(
  adUnitId: _ad_unit_ID,
  adFormat: AdFormat.mrec,
  listener: AdViewAdListener(onAdLoadedCallback: (ad) {
    ⋮
  }, onAdLoadFailedCallback: (adUnitId, error) {
    ⋮
  }, onAdClickedCallback: (ad) {
    ⋮
  }, onAdExpandedCallback: (ad) {
    ⋮
  }, onAdCollapsedCallback: (ad) {
    ⋮
  })
)

Ad Preloading

You can preload ads for platform widgets before you mount MaxAdView. When you mount MaxAdView with the Ad Unit ID you preloaded, MaxAdView is constructed with the preloaded platform widget. This allows the ads to display quickly.

Banners

AppLovinMAX.preloadWidgetAdView(«ad-unit-ID», AdFormat.banner)
  .then((_) {
    print('Started preloading a banner ad for ${«ad-unit-ID»}');
  });

MRECs

AppLovinMAX.preloadWidgetAdView(«ad-unit-ID», AdFormat.mrec)
  .then((_) => {
    print('Started preloading a MREC ad for ${«ad-unit-ID»}');
  });

When you unmount MaxAdView, the preloaded platform widget is not destroyed. Instead, it is reused for the next mount. You must manually destroy it when it is no longer needed:

Banners

AppLovinMAX.destroyWidgetAdView(«ad-unit-ID»)
  .then((_) {
    print('Destroyed the preloaded banner ad');
  });

MRECs

AppLovinMAX.destroyWidgetAdView(«ad-unit-ID»)
  .then((_) {
    print('Destroyed the preloaded MREC ad');
  });

See the example app at the AppLovin-MAX-Flutter GitHub project for a complete working example.

Adaptive Banners

Note

Only Google bidding and Google AdMob, and Google Ad Manager support adaptive banners. MAX sizes banners from other networks normally.

Google recommends that developers include a 50px padding between the banner placement and the app content. This makes it less likely that users will accidentally click on the banner. Refer to Google’s “About Confirmed Click” policy for more information and best practices.

Adaptive banners are responsive banners with heights that derive from the device type and the width of the banner. To disable adaptive banners, set the adaptive_banner flag like this:

AppLovinMAX.setBannerExtraParameter(«banner-ad-unit-ID», "adaptive_banner", "false")

Call AppLovinMAX.getAdaptiveBannerHeightForWidth(«width») to get the banner height, and then adjust your content accordingly.

Stopping and Starting Auto-Refresh

You may want to stop auto-refresh for an ad. This may be the case when you hide an ad or when you want to manually refresh. Stop auto-refresh with the following code:

Banners (Programmatic)

AppLovinMAX.showBanner(«ad-unit-ID»);
AppLovinMAX.stopBannerAutoRefresh(«ad-unit-ID»);

Banners (Widget)

MaxAdView(
  adUnitId: «ad-unit-ID»,
  adFormat: AdFormat.banner,
  isAutoRefreshEnabled: false,
  ⋮

MRECs (Programmatic)

AppLovinMAX.showMRec(«ad-unit-ID»);
AppLovinMAX.stopMRecAutoRefresh(«ad-unit-ID»);

MRECs (Widget)

MaxAdView(
  adUnitId: «ad-unit-ID»,
  adFormat: AdFormat.mrec,
  isAutoRefreshEnabled: false,
  ⋮

Start auto-refresh for an ad with the following code:

Banners (Programmatic)

AppLovinMAX.startBannerAutoRefresh(«ad-unit-ID»);

Banners (Widget)

MaxAdView(
  adUnitId: «ad-unit-ID»,
  adFormat: AdFormat.banner,
  isAutoRefreshEnabled: true,
  ⋮

MRECs (Programmatic)

AppLovinMAX.startMRecAutoRefresh(«ad-unit-ID»);

MRECs (Widget)

MaxAdView(
  adUnitId: «ad-unit-ID»,
  adFormat: AdFormat.mrec,
  isAutoRefreshEnabled: true,
  ⋮