本文档描述了 React Native 开发者如何集成 AD 原生模块(后面简称为模块),通过集成模块展示广告创造收益。 模块提供了以下几种广告形式:SplashAd(开屏广告)、RewardVideoAd(激励视频广告)、BannerAd(横幅广告)、NativeAd(原生广告)、InterstitialAd(插屏广告)、DrawVideoAd(Draw 视频广告)、DrawFeed(快手短视频)等。
AppId:应用 id,18位 hex 字符串。【注意】调试时请使用测试 appId:ba024a013ae9de665d;外发版本请替换成正式 appId,否则不会产生收益。
UnitId:广告位 id,广告类型缩写后紧跟从1开始的编号,如开屏广告位 s1,激励视频广告位 rv1。一般情况下使用默认的广告位 id 即可,需要分配额外的广告位时,请联系客户经理。
AdId:广告 id,全局唯一,相同素材的广告每次请求也不会重复。所有广告回调返回的参数都包含广告 id。
UserId:用户 id,接入方定义的用户唯一标识,传入时可以哈希脱敏,主要用于排查问题。
$ npm install react-native-mobad --save
或者
$ yarn add react-native-mobad --save
react native 版本号为 0.60 以下的需要手动 link
$ react-native link react-native-mobad
【iOS】需在 Podfile 文件顶部添加 CocoaPods 源:
source 'https://gitee.com/mobad/Specs.git'
source 'https://github.com/CocoaPods/Specs.git'
然后命令行运行:
$ pod install --repo-update
开发者需要在 App 入口处调用以下代码进行初始化:
import AdSdk from 'react-native-mobad';
AdSdk.init({
appId: APP_ID,
userId: userId, // 未登录可不设置 userId,登录时再设置
debug: false, // 是否调试模式,默认 false,请至少运行一次调试模式
});
登录时请设置 userId:
AdSdk.setUserId(userId);
退出登录请重置 userId:
AdSdk.setUserId(null);
开屏广告以 App 启动作为曝光时机,提供 5s 的可感知广告展示。用户可以点击广告跳转到目标页面;或者点击右上角的“跳过”按钮,跳转到 app 主页。
开发者可在 App 入口处调用以下代码展示开屏广告:
AdSdk.showSplashAd({
onAdDismiss({id}) {},
onError({id, code, message}) {},
});
回调事件:
event | desc |
---|---|
onAdDismiss | 广告结束 |
onError | 广告出错,错误详情请查看 code 和 message |
推荐开发者在初始化时设置最短开屏间隔时间。如果超出此间隔时间,从后台切回 App 任意页面都会显示开屏,以提升开屏广告的曝光量:
AdSdk.setMinSplashInterval(3 * 60 * 1000); // 单位 ms
激励视频广告是指将短视频融入到 app 场景当中,用户观看完激励视频广告后可以得到一些应用内奖励。使用场景包括但不限于: 1、游戏等应用内观看视频广告获得游戏内金币等:用户必须观看完整视频才能获取奖励; 2、积分类应用接入。
调用以下代码展示激励视频广告:
AdSdk.showRewardVideoAd({
unitId: 'rv1',
onAdLoad({id}) {},
onVideoCached({id}) {},
onAdShow({id}) {},
onReward({id}) {},
onAdClick({id}) {},
onVideoComplete({id}) {},
onAdClose({id}) {},
onError({id, code, message}) {},
});
回调事件:
event | desc |
---|---|
onAdLoad | 广告加载成功 |
onVideoCached | 视频素材缓存成功 |
onAdShow | 广告页面展示 |
onReward | 广告激励发放 |
onAdClick | 广告被点击 |
onVideoComplete | 广告播放完毕 |
onAdClose | 广告被关闭 |
onError | 广告出错,错误详情请查看 code 和 message |
Banner 广告(横幅广告)位于 app 顶部、中部、底部任意一处,横向贯穿整个app页面;当用户与 app 互动时,Banner 广告会停留在屏幕上,并可在一段时间后自动刷新。
使用 BannerAd 组件展示 Banner 广告:
<BannerAd
unitId="b1"
style={{width: 332, height: 332 / 6.4}}
onAdLoad={({id}) => {}}
onAdShow={({id}) => {}}
onAdClose={({id}) => {}}
onAdClick={({id}) => {}}
onError={({id, code, message}) => {}}
/>
回调事件:
event | desc |
---|---|
onAdLoad | 广告加载成功 |
onAdShow | 广告页面展示 |
onAdClose | 广告被关闭 |
onAdClick | 广告被点击 |
onError | 广告出错,错误详情请查看 code 和 message |
原生模板广告,支持图文和视频样式,开发者不用自行对广告样式进行编辑和渲染,可直接调用相关接口获取广告 view。
使用 NativeAd 组件展示原生广告:
<NativeAd
unitId="n1"
style={{width: 332, height: 332 / 1.78}}
onAdLoad={({id}) => {}}
onAdShow={({id}) => {}}
onAdClose={({id}) => {}}
onAdClick={({id}) => {}}
onError={({id, code, message}) => {}}
/>
回调事件:
event | desc |
---|---|
onAdLoad | 广告加载成功 |
onAdShow | 广告页面展示 |
onAdClose | 广告被关闭 |
onAdClick | 广告被点击 |
onError | 广告出错,错误详情请查看 code 和 message |
插屏广告是移动广告的一种常见形式,在应用开流程中弹出,当应用展示插页式广告时,用户可以选择点击广告,访问其目标网址,也可以将其关闭,返回应用。
调用以下代码展示插屏广告:
AdSdk.showInterstitialAd({
unitId: 'i1',
onAdLoad({id}) {},
onAdShow({id}) {},
onAdClick({id}) {},
onAdClose({id}) {},
onError({id, code, message}) {},
});
回调事件:
event | desc |
---|---|
onAdLoad | 广告加载成功 |
onAdShow | 广告页面展示 |
onAdClick | 广告被点击 |
onAdClose | 广告被关闭 |
onError | 广告出错,错误详情请查看 code 和 message |
竖版视频信息流广告,该广告适合在竖版全屏视频流中使用,接入方可以控制视频暂停或继续播放,默认视频播放不可干预。
使用 DrawVideoAd 组件展示 Draw 视频广告:
<DrawVideoAd
unitId="dv1"
style={{width: '100%', height: '100%'}}
onAdLoad={({id}) => {}}
onAdShow={({id}) => {}}
onAdClick={({id}) => {}}
onVideoStart={({id}) => {}}
onVideoPause={({id}) => {}}
onVideoResume={({id}) => {}}
onVideoComplete={({id}) => {}}
onError={({id, code, message}) => {}}
/>
回调事件:
event | desc |
---|---|
onAdLoad | 广告加载成功 |
onAdShow | 广告页面展示 |
onAdClick | 广告被点击 |
onVideoStart | 广告播放开始 |
onVideoPause | 广告播放暂停 |
onVideoResume | 广告播放恢复 |
onVideoComplete | 广告播放完毕 |
onError | 广告出错,错误详情请查看 code 和 message |
使用 DrawFeed 组件展示快手短视频:
<DrawFeed
unitId="df1"
style={{width: '100%', height: '100%'}}
onVideoShow={({id, videoType}) => {}}
onVideoStart={({id, videoType}) => {}}
onVideoPause={({id, videoType}) => {}}
onVideoResume={({id, videoType}) => {}}
onVideoComplete={({id, videoType}) => {}}
onVideoError={({id, videoType, code}) => {}}
onError={({id, code, message}) => {}}
/>
回调事件:
event | desc |
---|---|
onVideoShow | 视频切换展示 |
onVideoStart | 视频播放开始 |
onVideoPause | 视频播放暂停 |
onVideoResume | 视频播放恢复 |
onVideoComplete | 视频播放完成 |
onVideoError | 视频播放出错 |
onError | 出错,错误详情请查看 code 和 message |