广告 AD H5 接入文档

概述

本文档描述了 H5 开发者如何调用 AdSdk 展示广告。 AdSdk 提供了以下几种广告形式:RewardVideoAd(激励视频广告)、BannerAd(横幅广告)、NativeExpressAd(原生广告)、InterstitialAd(插屏广告)等。

术语介绍

UnitId:广告位 id,广告类型缩写后紧跟从1开始的编号,如 rv1、b1 等。

JS-SDK 集成

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