# Android接入

# 接入前准备

Android 开发工具: Android Studio 4.0+
广告SDK见下载页
demo见下载页,demo为Android工程,前端代码在demo项目中的app/src/main/assets目录下

注意

代码示例中的广告位为测试广告位

测试广告位不产生收益!!!只可用作开发调试使用,生产环境请在管理后台中申请广告位

为了兼容ES5,以下示例皆采用ES5语法

# 1.导入资源包

# (1) Android项目导入SDK

将下载的SDK包解压,将解压包中的aar复制到Android工程的libs目录下并导入

depedencies {
    //导入libs文件夹内所有aar包,请根据项目情况更改此处内容(请确保广告SDK aar包已复制到libs目录)
    implementation fileTree(dir: "libs", include: ["*.aar"])

    // 其他依赖包
    //Androidx项目需导入,否则某些组件将无法正常运行
    implementation "androidx.appcompat:appcompat:1.2.0"
    implementation "androidx.localbroadcastmanager:localbroadcastmanager:1.0.0"
    implementation "androidx.recyclerview:recyclerview:1.1.0"
    implementation "androidx.legacy:legacy-support-core-ui:1.0.0"
    
    //Android Support项目必须导入以下两个包,否则某些组件将无法正常运行
    implementation "com.android.support:appcompat-v7:28.0.0"
    implementation "com.android.support:recyclerview-v7:28.0.0"
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# (2) 在Android工程中初始化SDK

在Application或者调用广告之前初始化广告即可,代码如下:

import java.util.concurrent.locks.ReentrantLock;

public class MainActivity extends Activity {
    @Override
    public void onCreate() {
        super.onCreate();
        //初识化广告,参数依次为Context,appId,appKey,此处为测试广告位,请勿在生产环境使用
        Ads.init(this, "a5f4a25e35daa3", "52009c8cc00bf67d328d68ecb7c76adf");
    }
}

1
2
3
4
5
6
7
8
9
10

注意

广告只需初始化一次,请勿重复初始化,如果有多个进程,需要在每个进程中都初始化

# (3) 在Android WebView中注入广告桥接方法

import com.nn.ad.webview.bridge.WebAds;

public class WebviewActivity extends FragmentActivity {
    private WebView webView;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_webview);
        webView = findViewById(R.id.webview);
        //注入广告桥接方法,请在加载网页前注入,否则有可能导致广告调用不成功
        WebAds.injectAdJs(webView, this);
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# (4) web项目中导入js

现代ES6+项目在使用时请导入nnad.es6.js,此文件在SDK包中(使用React、Vue、AngularJs等项ES6+目可使用)

//导入js桥接包
import nnad from '../js/nnad.es6.js'
// 下面调用广告方法

1
2
3

传统ES5项目请导入nnad.es5.js,此文件在SDK包中(采用jQuery、自定义ES5框架等直接运行在浏览器端的项目可使用)

例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>广告导入示例</title>
    <!--导入js桥接包-->
    <script type="javascript" src="./js/nnad.es5.js"></script>
</head>
<body>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12

# 2.开屏广告

开屏广告采用原生接入才能获得较好体验,请参考原生开屏广告接入文档 ,如果确实需要在Webview中调用开屏,请使用nnad.loadSplashAd方法,可参考demo,例:

/**
 * 加载并显示开屏广告
 * @param {string} positionId 广告位ID,此处为测试广告位,生产环境中请勿使用测试广告位
 * @param {number} x 横坐标
 * @param {number} y 纵坐标
 * @param {number} width 宽度,-1表示屏幕宽度
 * @param {number} height 高度,-1表示屏幕宽度
 * @param {Object} callback 广告回调
 * @returns
 */
nnad.loadSplashAd('b5f4a25f971cd3', 0, 0, -1, -1, {
    onLoadError(code, msg) {
        nnad.showToast('加载错误,错误码:' + code + ',错误信息:' + msg);
    },
    onLoadSuccess() {
        nnad.showToast('开屏加载成功');
    },
    onLoadTimeout() {
        nnad.showToast('开屏加载超时');
    },
    onAdShow() {
        nnad.showToast('显示开屏');
    },
    onAdClicked() {
        nnad.showToast('开屏被点击');
    },
    onAdDismiss() {
        nnad.showToast('开屏关闭');
    }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# 3.激励视频

nnad.loadRewardAd("b5f4a261182671", {  //第一个参数为广告位,第二个参数为回调,此处广告位为测试广告位
    onLoadError: function (code, msg) {
        nnad.showToast('加载错误,错误码:' + code + ',错误信息:' + msg);
    },
    onVideoError: function (code, msg) {
        nnad.showToast('视频播放错误,错误码:' + code + ',错误信息:' + msg);
    },
    onAdShow: function () {
        nnad.showToast('显示激励视频');
    },
    onAdBarClick: function () {
        nnad.showToast('激励视频被点击');
    },
    onAdClose: function () {
        nnad.showToast('激励视频关闭');
    },
    onVideoComplete: function () {
        nnad.showToast('激励视频播放完毕');
    },
    onSkippedVideo: function () {
        nnad.showToast('跳过激励视频');
    },
    onLoadSuccess: function () {
        nnad.showToast('激励视频加载成功');
    },
    onVideoCached: function () {
        nnad.showToast('激励视频已缓存');
    },
    onReward: function () {
        //请在此处下发奖励,请勿在onAdClose回调中下发奖励
        nnad.showToast('激励视频下发奖励');
    }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

# 4.插屏广告

nnad.loadInterstitialAd("b5f8d5e0815c1e", {  //第一个参数为广告位,第二个参数为回调,此处广告位为测试广告位
    onLoadSuccess: function () {
        nnad.showToast('插屏加载成功');
    },
    onLoadError: function (code, msg) {
        nnad.showToast('加载错误,错误码:' + code + ',错误信息:' + msg);
    },
    onVideoError: function (code, msg) {
        nnad.showToast('视频播放错误,错误码:' + code + ',错误信息:' + msg);
    },
    onAdClicked: function () {
        nnad.showToast('插屏被点击');
    },
    onAdShow: function () {
        nnad.showToast('插屏显示');
    },
    onAdClose: function () {
        nnad.showToast('插屏关闭');
    },
    onVideoComplete: function () {
        nnad.showToast('插屏视频播放完毕');
    }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

提示

Banner广告在不使用时请移除,避免内存泄漏造成app崩溃

**Banner加载时,会自动销毁同一广告位已加载的Banner,若之前未加载,会直接加载Banner,如果你需要一个页面同时显示多个Banner,请申请多个广告位 **

# 加载并显示

var x = 0;//banner显示的横坐标
var y = 0;//banner显示的纵坐标
var width = -1;//banner宽度,-1为填满屏幕
var height = 300;//banner高度,-1为填满屏幕
nnad.loadBanerAd("b5f4a262254c6e", x, y, width, height, {//第一个参数为广告位,最后一个参数为回调,此处广告位为测试广告位
    onLoadError: function (code, msg) {
        nnad.showToast('加载错误,错误码:' + code + ',错误信息:' + msg);
    },
    onLoadSuccess: function () {
        nnad.showToast('banner加载成功');
    },
    onAdShow: function () {
        nnad.showToast('banner显示');
    },
    onAdClicked: function () {
        nnad.showToast('banner点击');
    },
    onCancel: function () {
        nnad.showToast('banner取消');
    }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 移除广告

nnad.removeBannerAd("b5f4a262254c6e");//第一个参数为广告位

# 6.短视频

提示

短视频需要webview所在的Activity为FragmentActivity,请确保Webview所在的Activity为FragmentActivity

短视频在不使用时请移除,避免内存泄漏造成app崩溃

短视频加载时,会自动销毁同一广告位已加载的短视频,若之前未加载,会直接加载短视频

# 加载

var x = 0;//短视频显示的横坐标
var y = 0;//短视频显示的纵坐标
var width = -1;//短视频宽度,-1为填满屏幕
var height = 1700;//短视频高度,-1为填满屏幕
nnad.loadVlog("15f99fn55d6dad", x, y, width, height);//第一个参数为广告位

1
2
3
4
5

# 显示短视频

nnad.showVlog("15f99fn55d6dad");//参数为广告位

# 移除短视频

nnad.removeVlog("15f99fn55d6dad");//参数为广告位

# 隐藏短视频

nnad.hideVlog("15f99fn55d6dad");//参数为广告位

← Webview文档 iOS接入 →