Banner & MREC Ads

Banner and MREC ads are rectangular ad formats that occupy a portion of an app’s layout—often positioned at the top or bottom of the screen or placed inline within scrollable content. They remain visible as users interact with the app, allowing for uninterrupted gameplay or usage, and can be refreshed automatically after a set period.

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 an MREC by using your Ad Unit ID, desired banner position, and (for banners) desired background color. MAX sizes the ad for you automatically:

Banners

var BANNER_AD_UNIT_ID;
if ('IOS' === window.cordova.platformId.toUpperCase()) {
  BANNER_AD_UNIT_ID = '«iOS-banner-ad-unit-ID»';
} else {
  // Assume Android
  BANNER_AD_UNIT_ID = '«Android-banner-ad-unit-ID»';
}

function initializeBannerAds()
{
  AppLovinMAX.createBanner(BANNER_AD_UNIT_ID, AppLovinMAX.AdViewPosition.BOTTOM_CENTER);

  // Set background color for banners to be fully functional
  // The following call sets it to black - USE HEX STRINGS ONLY
  AppLovinMAX.setBannerBackgroundColor(BANNER_AD_UNIT_ID, '#000000');
}

MRECs

var MREC_AD_UNIT_ID;
if (window.cordova.platformId.toUpperCase() === 'IOS') {
  MREC_AD_UNIT_ID = '«iOS-MREC-ad-unit-ID»';
} else {
  // Assume Android
  MREC_AD_UNIT_ID = '«Android-MREC-ad-unit-ID»';
}

public void initializeMRecAds()
{
  AppLovinMAX.createMRec(MREC_AD_UNIT_ID, AppLovinMAX.AdViewPosition.CENTERED);
}

MAX automatically sizes banners to 320×50 on phones and 728×90 on tablets. It sizes MRECs to 300×250 on both phones and tablets. Use the utility method AppLovinMAX.isTablet() to help with view-sizing adjustments.

Displaying a Banner

To show a banner, call showBanner():

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

Hiding a Banner

To hide a banner, call hideBanner():

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