Interstitial Integration for React Native

The ironSource Interstitial is a full-screen ad unit, usually served at natural transition points during the app lifecycle. We support both static and video interstitials. You can also serve interstitials through the ironSource Mediation platform.

Create Interstitial and Register to Events

The creation of the interstitial object should be done after receiving onInitSuccess callback.

The ironSource SDK fires several events to inform you of your Interstitial activity. To receive these events, register the listeners of the ad unit.
Make sure you set the listeners before initializing the SDK to prevent any loss of information.

const [interstitialAd, setInterstitialAd] = useState<LevelPlayInterstitialAd | null>()
useEffect(() => {
   const levelPlayInterstitialAd = new LevelPlayInterstitialAd([YOUR_AD_UNIT]);
   levelPlayInterstitialAd.setListener([YOUR_LISTENER]);
   setInterstitialAd(levelPlayInterstitialAd);
}, []);

Set Interstitial Listener

Implement the LevelPlayInterstitialAdListener in your code to get informed of ad delivery.

• It is recommended to set the listener before loading the interstitial ad.
• Please note that each interstitial ad should have its own listener implementation.
• Callbacks run on the main thread.

const listener: LevelPlayInterstitialAdListener = {
    onAdLoaded: (adInfo: LevelPlayAdInfo) => {
        // Provided when the ad is successfully loaded
    },
    onAdLoadFailed: (error: LevelPlayAdError) => {
        // Provided when the ad fails to load. Ad Unit information is included
    },
    onAdInfoChanged: (adInfo: LevelPlayAdInfo) => {
        // Provided when the ad info is updated. Available when another ad has loaded, and includes a higher CPM/Rate
    },
    onAdDisplayed: (adInfo: LevelPlayAdInfo) => {
        // Provided when the ad is displayed
    },
    onAdDisplayFailed: (error: LevelPlayAdError, adInfo: LevelPlayAdInfo) =>    {
        // Provided when the ad fails to be displayed
    },
    onAdClicked: (adInfo: LevelPlayAdInfo) => {
        // Provided when the user clicks on the ad
    },
    onAdClosed: (adInfo: LevelPlayAdInfo) => {
        // Provided when the ad is closed
    }
};

Load Interstitial Ad

To load an interstitial ad use loadAd.

interstitialAd?.loadAd();

Show Interstitial Ad

Show an interstitial ad after you receive the onAdLoaded callback, using showAd.

• If using placements, pass the placement name in the showAd API as shown in the Placements section below.
• Once the ad has been successfully displayed to the user, you can load another ad by repeating the loading step. 

// Show ad without placement
interstitialAd?.showAd();
// Show ad with placement
interstitialAd?.showAd([YOUR_PLACEMENT]);

Check Ad is Ready

To avoid show failures, and to make sure the ad could be displayed correctly, we recommend using the following API, before calling the showAd API.

isAdReady – returns true if ad was loaded successfully and ad unit is not capped, or false otherwise.

isPlacementCapped – returns true when a valid placement is capped. If the placement is not valid, or not capped, this API will return false.

// Check that ad is ready and that the placement is not capped 
if(interstitialAd?.isAdReady() && !LevelPlayInterstitialAd.isPlacementCapped([YOUR_PLACEMENT])) { 
    interstitialAd!.showAd([YOUR_PLACEMENT]);
}

Placements

We support placements pacing and capping for interstitial on the LevelPlay dashboard. 

If placements are set up for interstitial ads, call the showAd method to serve the ad for a specific placement.

// Check that ad is ready and that the placement is not capped 
if(interstitialAd?.isAdReady() && !LevelPlayInterstitialAd.isPlacementCapped([YOUR_PLACEMENT])) { 
    interstitialAd!.showAd([YOUR_PLACEMENT]); 
}

Full Implementation Example of Interstitial Ads

// Start of some component ...
const [interstitialAd, setInterstitialAd] = useState<LevelPlayInterstitialAd | null>(new LevelPlayInterstitialAd('YOUR_AD_UNIT_ID'))
const listener: LevelPlayInterstitialAdListener = {
    onAdLoaded: (adInfo: LevelPlayAdInfo) => {
        // Implement your logic here, for example showing the ad
      interstitialAd?.showAd()
    },
    onAdLoadFailed: (error: LevelPlayAdError) => {
        // Implement your logic here...
    },
    onAdInfoChanged: (adInfo: LevelPlayAdInfo) => {
       // Implement your logic here...
    },
    onAdDisplayed: (adInfo: LevelPlayAdInfo) => {
        // Implement your logic here...
    },
    onAdDisplayFailed: (error: LevelPlayAdError, adInfo: LevelPlayAdInfo) => {
        // Implement your logic here...
    },
    onAdClicked: (adInfo: LevelPlayAdInfo) => {
        // Implement your logic here...
    },
    onAdClosed: (adInfo: LevelPlayAdInfo) => {
        // Implement your logic here...
    }
};
useEffect(() => {
    interstitialAd?.setListener(listener)
    interstitialAd?.loadAd()
}, []);
  // Rest of component ...
// End of component ... 

LevelPlay Mediation Demo App

The Integration Demo application demonstrates how to integrate interstitital Ad Unit APIs in your app.

Download React Native Demo Application

Done!
You are now all set up to serve interstitial ads in your application. Verify your integration with our Integration Test Suite.