Rewarded Video Integration for React Native

Before you start

Make sure you have correctly integrated the ironSource React Native Plugin as well as any additional Ad Network Adapters into your application. The integration is outlined here.

Step 1. Implement the Rewarded Video Event Listeners

The ironSource React Native Plugin fires several events to inform you of ad availability and completions so you’ll know when to reward your users.

 Import the following event class from the IronSource mediation:

import {
  IronSource,
  LevelPlayRewardedVideoEvents,
  IronSourceRVPlacement,
  IronSourceAdInfo,
  IronSourceError,
} from 'ironsource-mediation'

Set the rewarded video event listeners. The Plugin will notify the Listener of all possible events listed below:

/**
 * Invoked when the RewardedVideo ad view has opened.
 */
LevelPlayRewardedVideoEvents.onAdOpened.setListener((adInfo: IronSourceAdInfo) => {});
/**
 * Invoked when the RewardedVideo ad view is about to be closed.
 */
LevelPlayRewardedVideoEvents.onAdClosed.setListener((adInfo: IronSourceAdInfo) => {});
/**
 * Invoked when there is a change in the ad availability status.
 * isAvailable reflects the availability of Rewarded Video. 
 * You can show the video by calling showRewardedVideo when isAvailable is true.
 * isAvailable would be false when no videos are available.
 */
LevelPlayRewardedVideoEvents.onAdAvailable.setListener((adInfo: IronSourceAdInfo) => {});
LevelPlayRewardedVideoEvents.onAdUnavailable.setListener(() => {});
/**
 * Invoked when the user completed the video and should be rewarded.
 * placement contains the reward data.
 * If you are using server-to-server reward callbacks,
 * you may ignore this event and wait for a callback from the ironSource server.
 */
LevelPlayRewardedVideoEvents.onAdRewarded.setListener((placement: IronSourceRVPlacement, adInfo: IronSourceAdInfo) => {});
/**
 * Invoked when Rewarded Video failed to show.
 * You can learn about the reason by examining error
 */
LevelPlayRewardedVideoEvents.onAdShowFailed.setListener((ironSourceError: IronSourceError, adInfo: IronSourceAdInfo) => {});
/** ------------------------------------------------------------------------
 * Note: the event below are not available for all the supported Rewarded Video ad networks.
 * Check which events are available per ad network you included in your build.
 * We recommend using only events that are supported by ALL the ad networks you selected.
 * -------------------------------------------------------------------------*/
/**
 * Invoked when the video ad is clicked.
 * The reward data of the clicked ad is passed as placement.
 */
LevelPlayRewardedVideoEvents.onAdClicked.setListener((placement: IronSourceRVPlacement, adInfo: IronSourceAdInfo) =>{});

Error Codes

ironSource provides an error code mechanism to help you understand any error you may encounter during integration or in live production. See the complete guide here.

Network Connectivity Status

You can determine and monitor the internet connection on the user’s device through the ironSource Network Change Status function.  This enables the SDK to change its ad availability according to network modifications, i.e., in the case of no network connection, the availability will turn into “false”. The default of this function is “false”; if you’d like to listen to changes in the connectivity, activate it in the SDK initialization with the following API:

await IronSource.shouldTrackNetworkState(true);

Step 2. Show a Video Ad to Your Users

Ad Availability

You will receive the availability status of a Rewarded Video ad through the onAdAvailable / onAdUnavailable event callback. 

LevelPlayRewardedVideoEvents.onAdAvailable.setListener((adInfo: IronSourceAdInfo)  => {});
LevelPlayRewardedVideoEvents.onAdUnavailable.setListener(() => {});

In addition, you have the possibility to ask for ad availability directly by calling:

const isAvailable: boolean = await IronSource.isRewardedVideoAvailable();

Note: ironSource SDK automatically caches Rewarded Videos for you, to ensure you have ad availability throughout the entire session.

Serve a Video Ad

Once an ad network has a video available, you are ready to show the video to your users. Before you display the ad, make sure to pause any game actions including audio to ensure the best experience for your users. Call showRewardedVideo to show the loaded video ad to your users:

IronSource.showRewardedVideo();

Ad Placements

With the ironSource Ad Placements tool, you can customize and optimize the Rewarded Video experience. This tool enables you to present videos to your users from different placements depending on the reward. You can use the function below to define the exact Placement you’d like to show an ad from. Navigate to the Ad Placement document for more details.

IronSource.showRewardedVideo('YOUR_PLACEMENT_NAME');

To get the details of a specific reward associated with each ad placement, you can call the following:

const placement: IronSourceRVPlacement = await IronSource.getRewardedVideoPlacementInfo('YOUR_PLACEMENT_NAME');
// Placement would fallback to the default placement if placementName is invalid.
const rewardName: string = placement.rewardName;
const rewardAmount: number = placement.rewardAmount;

Note: Make sure you use the placement name as written in the platform when using it as a parameter.

Capping & Pacing

In addition to ironSource’s Ad Placements, you can now configure capping and pacing settings for selected placements. Capping and pacing improve the user experience in your app by limiting the number of ads served within a defined timeframe. Read more about capping and pacing here.

If you choose to use the capping and pacing tool for Rewarded Video, we recommend calling the function below to verify if a specific placement has reached its limit. This is to ensure not to display a Rewarded Video button when the placement has been capped or paced, and thus the video ad will not be served.

isRewardedVideoPlacementCapped(placementName: string): Promise<boolean>

Dynamic User ID

The Dynamic UserID is a parameter to verify AdRewarded transactions and can be changed throughout a session. To receive this parameter through server-to-server callbacks, it must be set before calling showRewardedVideo. You will receive a dynamicUserId parameter in a callback URL with reward details.

setDynamicUserId(userId: string): Promise<void>

Make sure you’ve set the userID before initializing the ironSource SDK in order to successfully reward your users.

Step 3. Reward the User

The ironSource SDK will fire the onAdRewarded event each time the user successfully completes a video.

The onAdRewarded and onAdClosed events are asynchronous. Make sure to set up your listener to grant rewards even in cases where onAdRewarded is fired after the onAdClosed event.

LevelPlayRewardedVideoEvents.onAdRewarded.setListener(
  (placement: IronSourceRVPlacement, adInfo: IronSourceAdInfo) => {
    const rewardName: string = placement.rewardName;
    const rewardAmount: string = placement.rewardAmount;
  }
);

Note: The default setting in your ironSource account is to notify you of user completions/rewards via the onAdRewarded callback within the client of your app. Additionally,  you can turn on server-to-server callbacks if you would also like to receive notifications to your back-end server.

Server-to-server callbacks

If you turn on server-to-server callbacks, make sure you’ve set the userID before you initialize the ironSource SDK so your users can get rewarded, and make sure to reward your user only once for the same completion.

ironSource LevelPlay will be firing both the client-side callback and the server-to-server callback. So, you will get two notifications in total for each completion.

To utilize server-to-server callbacks, see here.

Done!

You are now all set to deliver Rewarded Video in your application.