# Rewarded Video Ads

The rewarded video ad component is composed of the client’s native image, text, and video controls. It has the highest level and will overwrite the general components.

Developers can call wx.createRewardedVideoAd to create a rewarded video ad component. The method returns a single instance. The instance is only valid for the current page, and is not allowed to be used across pages.

# Creation of Advertisement

The rewarded video ad component is hidden by default. Therefore, it can be created in advance for the component to be initialized ahead of time. Developers can create advertisement instances in the onLoad event callback of the Mini Program page, and call the advertisement instances repeatedly throughout the lifecycle of the page.

let rewardedVideoAd = null
Page({
  onLoad() {
    if(wx.createRewardedVideoAd){
      rewardedVideoAd = wx.createRewardedVideoAd({ adUnitId: 'xxxx' })
      rewardedVideoAd.onLoad(() => {
        console.log('onLoad event emit')
      })
      rewardedVideoAd.onError((err) => {
        console.log('onError event emit', err)
      })
      rewardedVideoAd.onClose((res) => {
        console.log('onClose event emit', res)
      })
    }
  }
})

In order to avoid abusing advertisement resources, currently the number of rewarded video ads every user can watch per day is limited. It is recommended that you should determine whether the ads are pulled successfully before displaying the ads button.

# Show/Hide

The rewarded video ad component is hidden by default. The developer needs to call RewardedVideoAd.show() to display it after the user actively triggers the ad.

rewardedVideoAd.show() 

The ad will only be closed when the user clicks the Close Ad button on the rewarded video ad component. Developers cannot control the hiding of the rewarded video ad component.

# Success and Failure of Advertisement Pulls

The rewarded video ad component automatically pulls the ads and updates them. After the component is created, an ad will be pulled. After the users clicks the Close Ad button, the next ad will be pulled.

If the pull is successful, the callback function registered via RewardedVideoAd.onLoad() will be executed, and the RewardedVideoAd.show() returned Promise will also be a resolved Promise. There are no parameters to pass in both callback functions.

rewardedVideoAd.onLoad(() => {
  console.log('Rewarded video  ad loaded successfully')
})

rewardedVideoAd.show()
.then(() => console.log('Rewarded video  ad display'))

If the pull fails, the callback function registered via RewardedVideoAd.onError() will be executed and the parameter of the callback function is an object containing the error message. Common unusual errors reference documentation

rewardedVideoAd.onError(err => {
  console.log(err)
})

RewardedVideoAd.show() The returned Promise will also be a resolved Promise.

rewardedVideoAd.show()
.catch(err => console.log(err))

# Pull failed, pull again

If one of the component's automatic pulls fails, the subsequent show() calls will be rejected. You can call RewardedVideoAd.load() to manually re-pull the ad.

rewardedVideoAd.show()
.catch(() => {
    rewardedVideoAd.load()
    .then(() => rewardedVideoAd.show())
    .catch(err => {
      console.log('Rewarded video  ad display failed')
    })
})

If a component’s automatic pull is successful, then calling the load() method will return a resolved Promise directly without pulling the ad.

rewardedVideoAd.load()
.then(() => rewardedVideoAd.show())

# Listen Users Closing Advertisements

The ad will only be closed when the user clicks the Close Ad button on the rewarded video ad component. This event can be listened via RewardedVideoAd.onClose().

The callback function of RewardedVideoAd.onClose() will pass in a parameter res with res.isEnded describing the state when the ad was closed.

Property Type Description
isEnded boolean Whether the video is closed when the user completes the viewing. True indicates that the user closes the video after it is done playing. False indicates that the user closes the video during playback

The developer needs to determine whether the video is done playing and can issue a reward to the user according to res.isEnded,

rewardedVideoAd.onClose(res => {
    // The user has clicked the **Close Ad** button
    if (res && res.isEnded) {
      // After the normal playback ends, game reward can be issued
    } else {
      // Exit before playback ends, no game reward is issued.
    }
})

# Notes

Multiple calls to methods such as RewardedVideoAd.onLoad(), RewardedVideoAd.onError(), and RewardedVideoAd.onClose() to listen to an ad event will result in multiple event callbacks. It is recommended that you listen once after creating an ad, or cancel the original listening event before re-listening.