SDK Ad Integration - Rewarded Ads
Prerequisites
- Know where to display ads. If not, please check Ad Integration Examples
- Have already gotten the BlockId. If not, please review Get BlockId
- For how to install the SDK, check SDK Installation
Rewarded Ads
When users click the "Watch Ad" button, they can earn rewards, such as:
Run the following code:
import { TonAdPopupShow } from 'ton-ai-sdk'
TonAdPopupShow({
blockId: 'your_block_id',
countdown: 15, // Optional, default is 10 seconds, minimum 10 seconds, maximum 30 seconds
autoClose: true, // Default is true, meaning the ad auto-closes after the countdown
onAdComplete: (ad) => {
// User watched the ad, reward can be given here
// sendReward(ad)
},
onAdClick: (ad) => {
// User clicked the ad, reward can be given here
// sendReward(ad)
},
onAdError: (error) => {
// An error occurred while playing the ad
console.error(error)
},
onAdClose: (ad) => {
// User manually closed the ad
}
})
Then, based on your product design, choose when to send the reward.
onAdComplete
: Related to CPM mode, rewards users after they finish watching the ad.onAdClick
: Related to CPC mode, more guiding for users, rewards users after they click the ad.
The ad object structure returned in various events is as follows:
{
"adId": "string", // Ad ID
"adBlockId": "string", // Ad Block ID
"adFormat": "string", // "image" | "video",
"icon": "string", // Advertiser's icon
"text": "string", // Ad text
"buttonText": "string", // Button text
"url": "string", // Ad URL
}
Tips
If you prefer not to execute the reward logic on the front end, you can refer to the reward-webhook
section in getBlockId.
Tips
Reasons for onAdError might include:
- Network errors when fetching ads
- Errors during ad playback
- No ads available currently