本文档描述了 H5 开发者如何调用 AdSdk 展示广告。 AdSdk 提供了以下几种广告形式:RewardVideoAd(激励视频广告)、BannerAd(横幅广告)、NativeExpressAd(原生广告)、InterstitialAd(插屏广告)等。
UnitId:广告位 id,广告类型缩写后紧跟从1开始的编号,如 rv1、b1 等。
AdSdk 原生代码通过 DSBridge 和 js 代码的交互,需要引入 dsbridge 和原生交互的相关实用函数。
<script>
//cdn
//<script src="https://unpkg.com/dsbridge@3.1.3/dist/dsbridge.js"></script>
//npm
//npm install dsbridge@3.1.3
var dsBridge=require("dsbridge")
function showRewardVideoAd(args) {
dsBridge.call("adSdk.showRewardVideoAd", {unitId: args.unitId || "rv1"}, function(result) {
if (args && args[result.event]) {
args[result.event](result)
}
})
}
function showNativeAd(args) {
dsBridge.call("adSdk.showNativeAd", {
unitId: args.unitId || "n1",
layout: args.layout,
margins: args.margins
}, function(result) {
if (args && args[result.event]) {
args[result.event](result)
}
})
}
function destroyNativeAd(args) {
dsBridge.call("adSdk.destroyNativeAd", {unitId: args.unitIdd || "n1"})
}
function showBannerAd(args) {
dsBridge.call("adSdk.showBannerAd", {
unitId: args.unitId || "b1",
layout: args.layout,
margins: args.margins
}, function(result) {
if (args && args[result.event]) {
args[result.event](result)
}
})
}
function destroyBannerAd(args) {
dsBridge.call("adSdk.destroyBannerAd", {unitId: args.unitId || "b1"})
}
function showInterstitialAd(args) {
dsBridge.call("adSdk.showInterstitialAd", {unitId: args.unitId || "i1"}, function(result) {
if (args && args[result.event]) {
args[result.event](result)
}
})
}
</script>
激励视频广告是指将短视频融入到 app 场景当中,用户观看完激励视频广告后可以得到一些应用内奖励。使用场景包括但不限于: 1、游戏等应用内观看视频广告获得游戏内金币等:用户必须观看完整视频才能获取奖励; 2、积分类应用接入。
调用以下代码展示激励视频广告:
showRewardVideoAd({
unitId: "rv1",
onAdLoad({id}) {
console.log(`RewardVideoAd onAdLoad id=${id}`)
},
onVideoCached({id}) {
console.log(`RewardVideoAd onVideoCached id=${id}`)
},
onAdShow({id}) {
console.log(`RewardVideoAd onAdShow id=${id}`)
},
onReward({id}) {
console.log(`RewardVideoAd onReward id=${id}`)
},
onAdClick({id}) {
console.log(`RewardVideoAd onAdClick id=${id}`)
},
onVideoComplete({id}) {
console.log(`RewardVideoAd onVideoComplete id=${id}`)
},
onAdClose({id}) {
console.log(`RewardVideoAd onAdClose id=${id}`)
},
onError({id, code, message}) {
console.log(`RewardVideoAd onError id=${id} code=${code} message=${message}`)
},
})
回调事件:
event | desc |
---|---|
onAdLoad | 广告加载成功 |
onVideoCached | 视频素材缓存成功 |
onAdShow | 广告页面展示 |
onReward | 广告激励发放 |
onAdClick | 广告被点击 |
onVideoComplete | 广告播放完毕 |
onAdClose | 广告被关闭 |
onError | 广告出错,错误详情请查看 code 和 message |
Banner 广告(横幅广告)位于 app 顶部、中部、底部任意一处,横向贯穿整个app页面;当用户与 app 互动时,Banner 广告会停留在屏幕上,并可在一段时间后自动刷新。
调用以下代码展示 Banner 广告:
showBannerAd({
unitId: "b1",
layout: "bottom",
margins: [0, 0, 0, 10], // [left, top, right, bottom]
onAdLoad({id}) {
console.log(`BannerAd onAdLoad id=${id}`)
},
onAdShow({id}) {
console.log(`BannerAd onAdShow id=${id}`)
},
onAdClick({id}) {
console.log(`BannerAd onAdClick id=${id}`)
},
onAdClose({id}) {
console.log(`BannerAd onAdClose id=${id}`)
},
onError({id, code, message}) {
console.log(`BannerAd onError id=${id} code=${code} message=${message}`)
},
})
回调事件:
event | desc |
---|---|
onAdLoad | 广告加载成功 |
onAdShow | 广告页面展示 |
onAdClose | 广告被关闭 |
onAdClick | 广告被点击 |
onError | 广告出错,错误详情请查看 code 和 message |
调用以下代码销毁 Banner 广告:
destroyBannerAd({unitId: "b1"})
插屏广告是移动广告的一种常见形式,在应用开流程中弹出,当应用展示插页式广告时,用户可以选择点击广告,访问其目标网址,也可以将其关闭,返回应用。
调用以下代码展示插屏广告:
showInterstitialAd({
unitId: "i1",
onAdLoad({id}) {
console.log(`InterstitialAd onAdLoad id=${id}`)
},
onAdShow({id}) {
console.log(`InterstitialAd onAdShow id=${id}`)
},
onAdClick({id}) {
console.log(`InterstitialAd onAdClick id=${id}`)
},
onAdClose({id}) {
console.log(`InterstitialAd onAdClose id=${id}`)
},
onError({id, code, message}) {
console.log(`InterstitialAd onError id=${id} code=${code} message=${message}`)
},
})
回调事件:
event | desc |
---|---|
onAdLoad | 广告加载成功 |
onAdShow | 广告页面展示 |
onAdClose | 广告被关闭 |
onAdClick | 广告被点击 |
onError | 广告出错,错误详情请查看 code 和 message |