Bloom AD React-Native SDK 接入文档

概述

本文档描述了 react-native 开发者如何集成 Bloom AD SDK（后面简称为 AdSdk），通过集成 AdSdk 展示广告创造收益。 AdSdk 提供了以下几种广告形式：SplashAd（开屏广告）、RewardVideoAd（激励视频广告）、BannerAd（横幅广告）、NativeExpressAd（原生广告）、InterstitialAd（插屏广告）、DrawVideoAd（Draw 视频广告）等。暂时只支持 Android 客户端，ios 开发中。

术语介绍

AppId：应用程序 id，以 ba 开头的 18 位 hex 字符串，如 ba0063bfbc1a5ad878；

SDK 集成

1、添加 NPM

$ npm install react-native-bloom-ad --save

或

$ yarn add react-native-bloom-ad --save

react native 版本号为 0.60 以下的需要手动 link

$ react-native link react-native-bloom-ad

2、添加 Maven 仓库地址

allprojects {
    repositories {
        maven {
            credentials {
                username 'iqLuKm'
                password 'pomH01oYcR'
            }
            url 'https://repo.rdc.aliyun.com/repository/117933-release-sPkE7F/'
        }
    }
}

SDK 使用

import BloomAd, {
  BannerView,
  NativeExpress,
  DrawVideo,
  VideoStreaming,
  NewsPortal,
} from "react-native-bloom-ad";

SDK 初始化

开发者需要初始化 AppId 后才能使用相关功能。例如：

BloomAd.init("ba0063bfbc1a5ad878")
  .then((appId) => {
    // 初始化成功
    BloomAd.showSplash(); // 加载开屏
  })
  .catch((error) => {
    // 初始化失败
    console.log(error);
  });

登录时请设置 userId：

BloomAd.setUserId("uid");

退出登录请重置 userId：

BloomAd.setUserId();

SDK 返回参数说明

params 参数说明：

| 参数 | 说明 | 类型 | 说明 | | ------- | -------------- | ------ | ------------------ | | type | 广告状态 | string | - | | id | 广告 Id | int | - | | code | 返回的错误代码 | int | type 为 onError 时 | | message | 返回的错误消息 | string | type 为 onError 时 |

开屏广告接入

开屏广告以 App 启动作为曝光时机，提供 5s 的可感知广告展示。用户可以点击广告跳转到目标页面；或者点击右上角的“跳过”按钮，跳转到 app 主页。

使用接口调用，调用示例如下：

const interval = 1000 * 60 * 3; // 设置时间间隔，单位是毫秒，切到后台后超过间隔返回时重新加载开屏
BloomAd.showSplash({
  unitId: "s1", // 广告位 id
  time: interval,
  onAdDismiss(params) {
    // 广告被关闭
    console.log(params);
  },
  onError(params) {
    // 广告出错
    console.log(params);
  },
});

强烈建议：App 切到后台超过三分钟返回时加载开屏，以提升开屏广告的曝光量.

激励视频广告接入

激励视频广告是指将短视频融入到 app 场景当中，用户观看完激励视频广告后可以得到一些应用内奖励。使用场景包括但不限于： 1、游戏等应用内观看视频广告获得游戏内金币等：用户必须观看完整视频才能获取奖励； 2、积分类应用接入。

使用接口调用，调用示例如下：

BloomAd.rewardVideo({
  unitId: "rv1", // 广告位 id
  // showWhenCached: false, // 是否完全加载后才开始播放
  onAdLoad(params) {
    // 广告加载成功
    console.log(params);
  },
  onVideoCached(params) {
    // 视频素材缓存成功
    console.log(params);
  },
  onAdShow(params) {
    // 广告页面展示
    console.log(params);
  },
  onReward(params) {
    // 广告激励发放
    console.log(params);
  },
  onAdClick(params) {
    // 广告被点击
    console.log(params);
  },
  onVideoComplete(params) {
    // 广告播放完毕
    console.log(params);
  },
  onAdClose(params) {
    // 广告被关闭
    console.log(params);
  },
  onError(params) {
    // 广告出错
    console.log(params);
  },
});

横幅广告接入

Banner 广告（横幅广告）位于 app 顶部、中部、底部任意一处，横向贯穿整个 app 页面；当用户与 app 互动时，Banner 广告会停留在屏幕上，并可在一段时间后自动刷新。需要设置组件的 width 和 height。

使用组件方式调试，调用示例如下：

const unitId = "b1"; // 广告位 id
<BannerView
  style={{
    width: 332,
    height: 52,
  }}
  unitId={unitId}
  onChange={(params) => {
    console.log(params);
  }}
/>;

params.type 说明：

| type | 说明 | | --------- | ------------ | | onAdLoad | 广告加载成功 | | onAdShow | 广告页面展示 | | onAdClose | 广告被关闭 | | onAdClick | 广告被点击 | | onError | 广告出错 |

原生广告接入

原生模板广告，支持图文和视频样式，开发者不用自行对广告样式进行编辑和渲染，可直接调用相关接口获取广告 view。需要设置组件的 width 和 height。由于原生广告高度不确定，可适当设置大一点。

使用组件方式调试，调用示例如下：

const unitId = "n1"; // 广告位 id
<NativeExpress
  style={{
    width: 332,
    height: 200,
  }}
  unitId={unitId}
  count={1} // 请求广告数量
  onChange={(params) => {
    console.log(params);
  }}
/>;

params.type 说明：

| type | 说明 | | --------- | ------------ | | onAdLoad | 广告加载成功 | | onAdShow | 广告页面展示 | | onAdClose | 广告被关闭 | | onAdClick | 广告被点击 | | onError | 广告出错 |

插屏广告接入

插屏广告是移动广告的一种常见形式，在应用开流程中弹出，当应用展示插页式广告时，用户可以选择点击广告，访问其目标网址，也可以将其关闭，返回应用。

使用接口调用，调用示例如下：

BloomAd.interstitial({
  unitId: "i1", // 广告位 id
  width: 300, // 插屏广告广告宽度
  onAdLoad(params) {
    // 广告加载成功
    console.log(params);
  },
  onAdShow(params) {
    // 广告页面展示
    console.log(params);
  },
  onAdClick(params) {
    // 广告被点击
    console.log(params);
  },
  onAdClose(params) {
    // 广告被关闭
    console.log(params);
  },
  onError(params) {
    // 广告出错
    console.log(params);
  },
});

Draw 视频广告接入

竖版视频信息流广告，该广告适合在竖版全屏视频流中使用，接入方可以控制视频暂停或继续播放，默认视频播放不可干预。需要设置组件的 width 和 height。

使用组件方式调试，调用示例如下：

const unitId = "dv1"; // 广告位 id
<DrawVideo
  style={{
    width: "100%",
    height: "100%",
    position: "absolute",
  }}
  unitId={unitId}
  count={1} // 请求广告数量
  onChange={(params) => {
    console.log(params);
  }}
/>;

params.type 说明：

| type | 说明 | | --------------- | ------------ | | onAdLoad | 广告加载成功 | | onAdShow | 广告页面展示 | | onAdClick | 广告被点击 | | onVideoStart | 广告播放开始 | | onVideoPause | 广告播放暂停 | | onVideoResume | 广告播放恢复 | | onVideoComplete | 广告播放完毕 | | onError | 广告出错 |

视频流接入

开发者需要初始化 AppId 后才能使用相关功能。例如：

<VideoStreaming
  appId="ba0063bfbc1a5ad878"
  style={{
    width: width,
    height: height,
    backgroundColor: "blue",
  }}
  play={true}
  onChange={(params) => {
    console.log("params", params);
  }}
/>

params 参数说明：

| 参数 | 说明 | 类型 | 说明 | | --------- | -------------- | ------ | ------------------ | | type | 广告状态 | string | - | | id | 视频 Id | string | - | | videoType | 视频类型 | string | 1:视频，2:广告 | | code | 返回的错误代码 | int | type 为 onError 时 | | message | 返回的错误消息 | string | type 为 onError 时 |

params.type 说明：

| type | 说明 | | --------------- | -------------- | | onVideoShow | 视频切换展示 | | onVideoStart | 播放开始 | | onVideoPause | 播放暂停 | | onVideoResume | 播放恢复 | | onVideoComplete | 播放完成 | | onVideoError | 播放出错 | | onLikeClick | 点赞或取消点赞 |

资讯接入

开发者需要初始化 AppId 后才能使用相关功能。例如：

<NewsPortal
  appId="ba0063bfbc1a5ad878"
  style={{
    width: width,
    height: height,
  }}
  onChange={(params, event) => {
    // 资讯状态
    if (params.type === "onReadingStart") {
      event.showNews({
        // 开始倒计时
        countdownSeconds: 10, // 倒计时长
        scrollEffectSeconds: 3, // 滚动有效时间
      });
    } else if (params.type === "onReward") {
      event.rewardNews({
        // 倒计时结束 发送奖励
        reward: true, // 是否奖励
        rewardData: 5, // 奖励数据 int
      });
    }
  }}
/>