• Updated

Programmatic Method

The following code shows you how to load an MREC by using your ad unit ID and desired position (MAX will size the MREC automatically):

const MREC_AD_UNIT_ID ={
  android: 'android_mrec_ad_unit_ID',
  ios: 'ios_mrec_ad_unit_ID',

public void initializeMRecAds()
  // MRECs are sized to 300×250 on phones and tablets
  AppLovinMAX.createMRec(MREC_AD_UNIT_ID, AppLovinMAX.AdViewPosition.CENTERED);

Native UI Component Method

You can also render an MREC directly in your DOM as a native UI component:

<AppLovinMAX.AdView adUnitId={mrec_ad_unit_ID}
                    onAdLoaded={(adInfo) => {
                      console.log('MREC ad loaded from ' + adInfo.networkName);
                    onAdLoadFailed={(errorInfo) => {
                      console.log('MREC ad failed to load with error code ' + errorInfo.code + ' and message: ' + errorInfo.message);
                    onAdClicked={(adInfo) => {
                      console.log('MREC ad clicked');
                    onAdExpanded={(adInfo) => {
                      console.log('MREC ad expanded')
                    onAdCollapsed={(adInfo) => {
                      console.log('MREC ad collapsed')
                    onAdRevenuePaid={(adInfo) => {
                      console.log('MREC ad revenue paid: ' + adInfo.revenue);

Stopping and Starting Auto-Refresh

There may be cases when you would like to stop auto-refresh, for instance, when you hide an MREC ad or want to manually refresh. Stop auto-refresh for an MREC ad with the following code:

  • AppLovinMAX.showMRec(mrec_ad_unit_ID);
  • <AppLovinMAX.AdView adUnitId={mrec_ad_unit_ID}
                        autoRefresh={false} />

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

  • AppLovinMAX.startMRecAutoRefresh(mrec_ad_unit_ID);
  • <AppLovinMAX.AdView adUnitId={mrec_ad_unit_ID}
                        autoRefresh={true} />