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 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»);