Rewarded ads integration for React Native
Integrate rewarded video ads in your React Native app by initializing the SDK, creating ad units, and setting up event listeners to handle ad lifecycle events.
Read time 3 minutesLast updated 4 hours ago
Note
This documentation is relevant for SDK 8.7.0+.
Prerequisites
- Ensure that you have correctly integrated the React Native Plugin into your app. Integration is outlined here.
- Ensure that you initialize the SDK using LevelPlay Initialization API.
- Find the AdUnitID in LevelPlay dashboard.
Create Rewarded and Register to Events
After you receive the onInitSuccess callback, you can create an ad unit using the relevant Ad Unit ID, as defined in the LevelPlay platform (Initializing the ironSource SDK step). Set the rewarded listener for the rewarded ad unit created, to get informed of ad delivery.const [rewardedAd, setRewardedAd] = useState < LevelPlayRewardedAd > (new LevelPlayRewardedAd([YOUR_AD_UNIT])) useEffect(() => { const listener: LevelPlayRewardedAdListener = { 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 }, onAdRewarded: (reward: LevelPlayReward, adInfo: LevelPlayInfo) => { // Provided when the ad is rewarded. Ad Unit info and the reward info are included. } }; rewardedAd.setListener([YOUR_LISTENER]); }, [rewardedAd]);
LevelPlay Rewarded Ad Callbacks
onAdLoaded – Provided when the ad is successfully loaded onAdLoadFailed – Provided when the ad fails to load. Ad Unit information is included onAdDisplayed – Provided when the ad is displayed. This is equivalent to an impression onAdDisplayFailed (optional) – Provided when the ad fails to be displayed onAdRewarded – Provided when the ad is rewarded. Ad Unit info and the reward info are included. onAdClicked (optional) – Provided when the user clicks on the ad onAdClosed – Provided when the ad is closed onAdInfoChanged (optional) – Provided when the ad info is updated. Available when another ad has loaded, and includes a higher CPM/RateLoad Rewarded Ad
After you receive the onInitSuccess callback, you are ready to load an rewarded ad. This should be done using the method:rewardedAd.loadAd();
Show Rewarded Ad
You can show an rewarded ad after you receive onAdLoaded callback, using the showAd APIs. If you are using placements, share their name as part of the API, as shown below.// Show ad without placement rewardedAd.showAd(); // Show ad with placement rewardedAd.showAd([YOUR_PLACEMENT]);
Check ad 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.After the ad was displayed successfully to the player, you can load another ad, repeating the Load Rewarded Ad step. You do not need to create a new ad entity when loading a single ad at a time.// Check that ad is ready and that the placement is not capped if(rewardedAd.isAdReady() && !LevelPlayRewardedAd.isPlacementCapped([YOUR_PLACEMENT])) { rewardedAd.showAd([YOUR_PLACEMENT]); }
Reward the User
The LevelPlay SDK will fire the onAdRewarded each time the user successfully completes a video. The onAdRewarded and onAdClosed are asynchronous. Make sure to set up your listener to grant rewards even in cases where onAdRewarded is fired after the onAdClosed.onAdRewarded: (reward: LevelPlayReward, adInfo: LevelPlayInfo) => { // Provided when the ad is rewarded. Ad Unit info and the reward info are included }
Multiple Ad Unit Rewarded APIs
Legacy | Ad Unit (new) | |
|---|---|---|
| Class | IronSource | LevelPlayRewardedAd |
| API | loadRewardedVideo | loadAd |
| showRewardedVideo | showAd | |
| isRewardedVideoPlacementCapped | isPlacementCapped | |
| isRewardedVideoAvailable | isAdReady | |
| placement.getRewardName | reward.name | |
| placement.getRewardAmount | reward.amount |
Full Implementation Example of Rewarded Ad
const [rewardedAd, setRewardedAd] = useState < LevelPlayRewardedAd > (new LevelPlayRewardedAd('YOUR_AD_UNIT_ID')) const listener: LevelPlayRewardedAdListener = { onAdLoaded: (adInfo: LevelPlayAdInfo) => { // Implement your logic here, for example showing the ad rewardedAd.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... }, onAdRewarded: (reward: LevelPlayReward, adInfo: LevelPlayAdInfo) => { // Implement your logic here... } }; useEffect(() => { rewardedAd.setListener(listener) rewardedAd.loadAd() }, []); // Rest of component ... // End of component ...