SDK 广告集成 高级用法
前置要求
- 知道在什么地方展示广告,如果没有,请先查看 广告集成示例
- 已经获取了 BlockId,如果没有,请先查看 获取 BlockId
- 请参考 SDK 安装 了解如何安装 SDK
原生广告
如果你想在应用中展示原生广告,例如,我们可以把广告包装成任务,这样对用户体验的干扰较低,我们可以这样做
1. 获取广告
首先要先加载广告,前端调用 SDK GetMultiTonAd
函数获取广告
import { GetMultiTonAd } from 'ton-ai-sdk'
const blockId = 'your_block_id'
const limit = 5
GetMultiTonAd(blockId, limit)
.then((ads) => {
if (ads && ads.length > 0) {
// 广告加载成功,可以在适当的时机展示
} else {
// 没有可用的广告
}
})
.catch((error) => {
console.error('加载广告失败:', error)
})
提示
我们建议一次性获取多个广告,避免用户对单个广告可能不感兴趣,这样可以提高广告的点击率
ads 对象的结构如下:
{
"ads": [
{
"adId": "string", // 广告 ID
"adBlockId": "string", // 广告位 ID
"adFormat": "string", //"image" | "video",
"icon": "string", // 广告商家图标
"text": "string", // 广告文案
"buttonText": "string", // 按钮文案
"url": "string", // 广告跳转链接
"destination": {
// option: 广告跳转的具体配置
"actionType": "string",
"url": "string"
}
}
]
}
2. 包装广告
然后我们可以把 Ad 中的
- icon
- text
等参数渲染为 Earn 页面的任务,例如:
3. 展示广告
用户点击任务后,您需要调用 SDK 展示广告,传入用户点击的广告对象 ad
TonAdPopupShow({
tonAd: ad, // 用户点击的广告对象
onAdClick: (result) => {
// 用户触发了广告跳转
// 您可以在这里发放奖励
},
onAdClose: (result) => {
// 用户观看广告完成
},
onAdError: (error) => {
// 用户在播放广告时遇到错误,或者跳过了广告
// 您可以在这里什么都不做,或者做其他您想做的事情
},
})
result 对象的结构如下:
{
"adId": "string",
...
}
通过 adId 字段,您可以知道用户点击的是哪一个广告
广告展示效果