广告 AD React Native 原生模块接入文档

概述

本文档描述了 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

SDK 初始化

开发者需要在 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

Draw 视频广告接入

竖版视频信息流广告,该广告适合在竖版全屏视频流中使用,接入方可以控制视频暂停或继续播放,默认视频播放不可干预。

使用 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