SDK 广告集成 高级用法
前置要求
- 已经获取了 ExchangeId,如果没有,请先查看 创建 Exchange 任务
安装 SDK
请参考 SDK 安装 了解如何安装 SDK
原生广告
如果你想在应用中展示原生广告,例如把广告包装成任务,这样对用户体验的干扰较低,我们可以这样做
1. 获取广告
首先要先加载广告,前端调用 SDK GetMultiTonExchangeAd
函数获取广告
import { GetMultiTonExchangeAd } from 'ton-ai-sdk'
const exchangeId = 'your_exchange_id'
const limit = 5
GetMultiTonExchangeAd(exchangeId, limit)
.then((ads) => {
if (ads && ads.length > 0) {
// 广告加载成功,可以在适当的时机展示
} else {
// 没有可用的广告
}
})
.catch((error) => {
console.error('加载广告失败:', error)
})
提示
我们建议一次性获取多个广告,避免用户对单个广告可能不感兴趣,这样可以提高广告的点击率
ads 对象的结构如下:
{
"ads": [
{
"inExchangeCampaignId": "string", // 目标广告 ID
"outExchangeCampaignId": "string", // 你当前的广告 ID
"adFormat": "string", //"image" | "video",
"icon": "string", // 广告商家图标
"text": "string", // 广告文案
"image": "string", // 广告banner图片
"popupImage": "string", // 广告弹窗图片
"brandName": "string", // 广告商家名称
"buttonText": "string", // 按钮文案
"url": "string", // 广告跳转链接
"destination": {
// option: 广告跳转的具体配置
"actionType": "string",
"url": "string"
}
}
]
}
2. 展示广告
然后我们可以把 Ad 中的
- icon
- text
- destination.url
等参数渲染为 Earn 页面的任务,例如:
用户点击任务,您需要调用 SDK OnExchangeAdClick
来处理点击事件 OnExchangeAdClick 将会处理:
- 广告 url 跳转
- click 事件上报
- 广告验证
- 任务完成
import { OnExchangeAdClick } from 'ton-ai-sdk'
// ad 是 ads 中的一个对象
OnExchangeAdClick(ad, onVerifySuccess=({success:boolean, ad:TonExchangeAdProps,message:string})=>{
if(success){
// 验证成功,可以设置任务为完成状态,并且发送任务奖励
// sendReward()
}else{
// 验证失败,可以提示用户重试
}
})
提示
onVerifySuccess 后,用户不会继续看到该广告