App Open Ads

AppLovin React Native Plugin 4.1.0 introduces App Open Ad format. App Open Ads are similar to interstitial ads but show when the user soft launches or cold starts the app:

Cold start

creating new session of the app on device

• the app is not in device memory
• splash/loading screen required

Soft launch

bringing the app from background to foreground, turning the phone on when the app is in foreground mode

• the app is suspended in memory
• splash/loading screen required

FireOS Applications are not supported.

Best Practices

• Use a splash/loading screen before the “app open” ad shows, regardless of the placement with the app.
  • Include a call-out to the user that they will see an ad within the Splash/Loading screen.
    • Example: “Watch an ad from their sponsor while the app loads.”
  • The key is to ensure the user is not exposed to actual app content before the ad is shown. The sequence should be splash/loading screen ⇒ app open ad ⇒ app content.
• Ensure that AppLovin’s SDK is initialized before you load an app open ad.
• When an app open ad is not loaded (i.e. on cold start), load all other ad formats later to avoid parallel loading with the app open ad.
  • Loading multiple ad formats in parallel is not good for the device’s resources or ad demand SDKs.
• To avoid over-exposure to App Open Ads, AppLovin suggests that you consider the following strategies:
  • Use a frequency cap that you manage outside of AppLovin so that you have full control over when the ads will serve.
  • Implement a cool down period (i.e. don’t show an ad on soft launch for some period of time before you show one again, or show on every other soft launch) based on app user behavior.
  • Wait until new users open the app and use it a few times before you show the first App Open Ad.

Using an App Open Ad

To ensure your app open ad is ready when your application is brought to the foreground, you need to preload an app open ad. Implement a utility class to make ad requests before your ad needs to be shown. Create a method that shows an ad if ready, and call it when the app is brought to the foreground. Your app then attempts to show an ad on app open, or loads an ad if one is not not preloaded. If you have a loading screen under the app open ad, and your loading screen completes loading before the ad is dismissed, you may want to dismiss your loading screen in AppOpenAd.addAdHiddenEventListener.

Cold Starts and Loading Screens

The delay between when you request an ad and receive an ad to show can cause the user to briefly see your app before being surprised by an out-of-context ad. You should avoid this, as it is a bad user experience. The preferred way to handle cold starts is to use a loading screen to precede any initial app content, and to show the ad from the loading screen. If the app shows any of your app content after the loading screen, do not show the ad. If you have a loading screen under the app open ad, and your loading screen completes loading before the ad is dismissed, you may want to dismiss your loading screen in AppOpenAd.addAdHiddenEventListener.

Example

These code examples assume that app open ads are only shown on “soft lauch” when your app is suspended in memory, and do not include the splash/loading screen. The App Developer must handle the splash/loading screen—see Best Practices.

import AppLovinMAX, { AppOpenAd } from 'react-native-applovin-max';

const App = () => {

  const appState = useRef(AppState.currentState);

  useEffect(() = {
    AppLovinMAX.initialize(SDK_key, (conf: Configuration) => {
      AppOpenAd.addAdLoadedEventListener((adInfo: AdInfo) => {
        console.log('AppOpen ad loaded from ' + adInfo.networkName);
      });
      AppOpenAd.addAdLoadFailedEventListener((errorInfo: AdLoadFailedInfo) => {
        console.log('AppOpen ad failed to load with code ' + errorInfo.code);
      });
      AppOpenAd.addAdFailedToDisplayEventListener((adInfo: AdDisplayFailedInfo) => {
        AppOpenAd.loadAd(app_open_ad_unit_ID);
      });
      AppOpenAd.addAdHiddenEventListener((adInfo: AdInfo) => {
        AppOpenAd.loadAd(app_open_ad_unit_ID);
      });

      AppOpenAd.loadAd(app_open_ad_unit_ID);
    });

    AppState.addEventListener("change", nextAppState => {
      if (appState.current.match(/inactive|background/) && nextAppState === "active") {
        showAdIfReady();
      }
      appState.current = nextAppState;
    });
  }, []);

  const showAdIfReady = async () => {
    const isAppOpenAdReady = await AppOpenAd.isAdReady(app_open_ad_unit_ID);
    if (isAppOpenAdReady) {
      AppOpenAd.showAd(app_open_ad_unit_ID);
    } else {
      AppOpenAd.loadAd(app_open_ad_unit_ID);
    }
  }
  ⋮
}

Supported Adapter Versions