Egret社区
Egret Native可以通过原生扩展能力接入第三方原生SDK,本文将为开发者介绍如何接入广告系统。穿山甲是字节跳动提供的广告接入SDK,提供了多种广告样式,具体信息可以参见其官方文档。

穿山甲广告.png


穿山甲平台准备

进入穿山甲平台官网,完成注册登录,并按照平台要求完成应用和代码位的创建,具体操作可参照平台帮助中心的说明。

Android
下载示例 Demo

白鹭引擎已经为开发者提供了示例Demo,开发者可以直接基于该Demo 学习如何接入穿山甲广告SDK。demo项目包含一个egret工程,一个android工程,一个debug安装包。
  1. |-- openadsdk               # 这是白鹭项目
  2. |-- openadsdk-android       # 这是白鹭发布的 EgretNative项目
  3. |-- openadsdk_demo.apk      # 这是生成的APK文件,开发者可以直接安装预览效果
复制代码

工程配置
参考穿山甲官方接入文档,或直接修改使用提供的android工程,并在Adcode.java文件中对应设置好应用id和代码位code。

使用方法

步骤1:导入egret示例项目中的src/openadsdk;
步骤2:在您的egret项目中恰当的位置直接调用相关静态方法。

目前包含五种广告接入

1、SplashAd: 开屏广告

设置您安卓工程中的AndroidManifest.xml文件,将SplashActivity作为启动,并在需要的情况下修改该文件的goToMainActivity()方法跳转到您指定的活动。值得注意的是,虽然sdk中提供了调起开屏广告的api,但不应该这样做,它并不像其他广告类型那样需要主动唤起。

  1. <activity
复制代码

2、RewardVideoAd:激励视频广告激励广告需要设置如下参数,当回调事件参数的event属性值为"onRewardVerify"时,会返回您需要的数据,如"verify",它表示奖励是否有效。

  1. //激励广告
复制代码

3、FullScreenVideoAd: 全屏视频广告设置参数:是否为横屏。
  1. //全屏广告
  2.         const data = {
  3.             is_horizontal: false,//是否为横屏广告
  4.         }
  5.         openadsdk.FullScreenVideoAd((json) => {
  6.             console.log("全屏广告事件:" + json)
  7.         }, this, JSON.stringify(data))
复制代码

4、BannerExpressAd: banner广告参数包括是否在屏幕顶部,宽度,高度,【尺寸请和平台设置保持一致】。


  1.        //banner广告
  2.         const data = {
  3.             is_top:false,
  4.             width:600,
  5.             height:90
  6.         }
  7.         openadsdk.BannerExpressAd((json) => {
  8.             console.log("banner广告事件:" + json)
  9.         }, this, JSON.stringify(data))
复制代码

5、InteractionAd: 插屏广告参数包括宽度,高度,【尺寸请和平台设置保持一致】。

  1. //插屏广告
  2.         const data = {
  3.             width:900,
  4.             height:900
  5.         }
  6.         openadsdk.InteractionAd((json) => {
  7.             console.log("插屏广告事件:" + json)
  8.         }, this, JSON.stringify(data))
复制代码

步骤3:发布到对应android工程中

关于返回事件
在egret项目中,广告回调的参数为json格式的字符串,其中event属性说明了该事件的类型,类型说明如下,这边只是转发了穿山甲sdk原生的协议回调,并不是所有类型广告都包含如下事件类型,如:激励广告无法跳过,banner广告没有视频类消息,ios和android也不尽相同,提供的原生工程对广告的封装实现也是直接复制了穿山甲提供的工程源码,所以,请严格测试,参考原生代码,合理使用回调事件。

  1. onAdClicked                       //广告点击
  2. onAdShow                          //广告出现
  3. onAdDismiss                       //插屏广告关闭
  4. onError                           //错误
  5. onSelected                        //banner关闭按钮
  6. onCancel                          //点击取消
  7. onAdVideoBarClick                 //视频类bar点击
  8. onAdClose                         //广告关闭
  9. onVideoComplete                   //视频类播放完成
  10. onVideoError                      //视频类错误
  11. onRewardVerify                    //激励确认
  12. onSkippedVideo                    //视频类跳过
复制代码

iOS
下载示例Demo
白鹭引擎已经为开发者提供了示例Demo,开发者可以直接基于该Demo 学习如何接入穿山甲广告SDK。demo项目包含一个egret工程,一个ios工程。
  1. |-- openadsdk               # 这是白鹭项目
  2. |-- openadsdk-ios           # 这是白鹭发布的 EgretNative项目
复制代码

工程配置
参考穿山甲官方接入文档,或直接修改使用提供的ios工程,这里详细走一遍官方提供的CocoaPods流程。

步骤1:安装cocoapods
  1. gem install cocoapods
复制代码

步骤2:下载Git LFS ,解压,安装

  1. sudo sh install.sh
复制代码

步骤3:cd到你的xcode工程中创建Podfile文件写入如下,这里的'openadsdk'是xcode工程的项目target,也就是egret发布中填写的应用名称。
  1. source 'https://github.com/CocoaPods/Specs.git'
  2. platform :ios, '8.0'

  3. target 'openadsdk' do
  4.     pod 'Bytedance-UnionAD'
  5. end
复制代码


步骤4:pod install
  1. pod install
复制代码

注:不同网络环境下pod的安装速度会有较大差异,首次安装会有大概2G左右的文件下载,请耐心等待,并通过活动监视器查看下载速度,若速度过慢,请考虑设置git代理,或自行clone可用仓库到本地。

步骤5:打开ios-template.xcworkspace

步骤6:参照官方接入中心IOS-SDK接入文档中的《Xcode编译选项设置》完成剩余工程配置

步骤7:文件修改

1:将示例ios工程中的ios-template/sdk文件夹导入到您的ios工程中;
2:参照示例ios工程中的AppDelegate.h修改您ios工程的对应文件;
3:为AppDelegate.mm添加如下两个方法;
  1. -(void)initJSEvent:(EgretNativeIOS*)native{
  2.     NSLog(@"InitJSEvent");
  3. }
  4. -(void)InitAD:(UIViewController*)root{
  5.     NSLog(@"InitAD");
  6. }
复制代码

并在didFinishLaunchingWithOptions中调用

  1. //init
  2. [self initJSEvent:_native];
  3. [self InitAD:viewController];
  4. return true;
复制代码

4:在sdk/AdManager.h文件中设置您的广告信息,如appKey,XXX_ID。

使用方法
目前包含五种广告接入SplashAd: 开屏广告开屏广告的入口函数调用位于:
  1. AppDelegate-Category.m                              //文件
  2.     -(void)setupBUAdSDK{}                           //方法
  3.         [self addSplashAD];                         //语句
复制代码

请根据需要注释或保留,值得注意的是,虽然sdk中提供了调起开屏广告的api,但不应该这样做,它并不像其他广告类型那样需要主动唤起。

其他请参考安卓文档中使用方法关于其他类型广告的说明;

注:代理会影响广告的下载,请在测试时关闭代理。

我们新做的文档中心:http://docs.egret.com/native/,我们后续也会持续更新,欢迎大家关注了解。


分享到 :
3 人收藏

6 个回复

倒序浏览
不会飞的猪  登堂入室 | 2020-3-15 17:01:02
学习 测试了下,banner广告有问题,无法展示提示错误如下:
媒体在平台上申请的代码位“是否原生”属性与代码中使用的接口不匹配。例如:1. 媒体在平台上选择的是个性化模板banner广告的话,Android代码中请参考BannerExpressActivity进行调用;iOS代码中请参考BUDExpressBannerViewController进行调用。2. 媒体在平台上选择的是个性化模板插屏广告的话,代码中请参考InteractionExpressActivity进行调用;iOS代码位中请参考BUDExpressInterstitialViewController进行调用。PS:模板广告会带有express字样标识。 40022
不会飞的猪  登堂入室 | 2020-3-15 17:02:06
1
不会飞的猪  登堂入室 | 2020-3-16 15:27:52
不会飞的猪 发表于 2020-3-15 17:01
学习 测试了下,banner广告有问题,无法展示提示错误如下:
媒体在平台上申请的代码位“是否原生”属性与代 ...

问题已经找到解决了,随后发一篇文章吧,本篇不适合小白,需要自己先去官网看下穿山甲的对接,然后再过来,就会发现写的狠好。banner不好使的原因是因为模板渲染,此篇文章支持的是2019年12月30号之前创建的广告位,包括插屏,望周知
app小王子  社区管理员 | 2020-3-16 17:00:09
不会飞的猪 发表于 2020-3-16 15:27
问题已经找到解决了,随后发一篇文章吧,本篇不适合小白,需要自己先去官网看下穿山甲的对接,然后再过来 ...

非常感谢你的读贴反馈,同时期待你的适用于小白的文章。
h1116  登堂入室 | 2020-3-16 20:26:03
是的,我今天也发现这个问题,浪费好长时间
h1116  登堂入室 | 2020-3-16 20:27:30
不会飞的猪 发表于 2020-3-16 15:27
问题已经找到解决了,随后发一篇文章吧,本篇不适合小白,需要自己先去官网看下穿山甲的对接,然后再过来 ...

怎么处理的?
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|京网文[2014]0791-191号|京ICP证150115号|Egret社区 ( 京ICP备14025619号 )

Powered by Discuz! X3.4 © 2001-2019 Comsenz Inc.

返回顶部