网站导航栏下面的文章,公司网站生成二维码,腾讯推广一次广告多少钱,wordpress 翻译插件目录 接入厂商广告oppo广商接入广告banner广告信息流广告[1] 组件封装[2] 渲染数据[3] 测试[4] 样式调整[5] 加载失败[6] 预加载[7] 应用要素信息 接入厂商广告
广告接口 [1] 接口声明 {name:service.ad}[2] 导入模块 import ad from service.ad 或 c… 目录 接入厂商广告oppo广商接入广告banner广告信息流广告[1] 组件封装[2] 渲染数据[3] 测试[4] 样式调整[5] 加载失败[6] 预加载[7] 应用要素信息 接入厂商广告
广告接口 [1] 接口声明 {name:service.ad}[2] 导入模块 import ad from service.ad 或 const ad require(service.ad)[3] 获取服务提供商 由于各厂商的尺寸不同开发的时候需要进行区分所以先获取厂商 ad.getProvider() // OPPO vivo ....tips: 根据规范快应用一个页面中只能添加最多2个广告。 oppo广商接入广告
广告接入流程
banner广告
banner广告
信息流广告
信息流广告 信息流广告相较banner广告的优势是 广告使用组件的方式进行展示开发者可以自定义广告内容的排版与样式。
[1] 组件封装
直接使用“使用实例”进行组件封装。
templatedivtext classbtn onclickreload重新加载广告/textadif{{ showAd }}adunitid{{ adunitid }}classad-nativeonloadadLoad(evt)onerroradError(err, evt)onadclickadClickonadshowadShowtypenativead-clickable-area classad-contentslot!-- 广告可以按照UI样式进行编写 --/slot/ad-clickable-areadiv classad-close onclickonclosetext关闭/text/div/ad/div
/template
script
import prompt from system.prompt
// JS部分请尽量按照广告示例demo编写
export default {data: {showAd: true,adunitid: , // 等待快应用上线之后创建广告位的idadData: { // 此处广告的初始值需严格按照文档来imgUrlList: [],title: ,desc: ,clickBtnTxt: },},// 信息流广告展示成功adLoad(evt) {if (evt evt.adData) {const adData JSON.parse(evt.adData)this.adData adData}},// 广告展示回调事件成功触发adShow(evt){},// 广告点击回调事件成功触发adClick(evt) {},// 信息流广告展示失败adError(err, evt) {if(err) {console.log(adError 信息流广告加载出错, err)} else if(evt) {prompt.showToast({message: 信息流广告展示失败: evt.errCode , errMsg evt.errMsg})}},// 信息流广告重新加载reload() {// 可通过 if 先销毁原广告组件再重新创建广告组件达到重新加载的效果this.showAd falsesetTimeout(() {this.adData {imgUrlList: [],title: ,desc: ,clickBtnTxt: }this.showAd true}, 500)},// 关闭广告onclose() {this.showAd false}
}
/script
style langless
.btn {height: 86px;border: 1px solid #333;padding: 20px;
}.ad-native {background-color: lightgray;width: 100%;height: 100%;position: relative;.ad-content {width: 100%;height: 100%;}.ad-close {width: 50px;height: 30px;background-color: gray;opacity: 0.5;position: absolute;margin-left: 700px;text {font-size: 20px;padding: 5px;color: #ffffff;}}
}
/style[2] 渲染数据
在信息流加载(adLoad方法中)时返回的adData对象中的数据格式如下 开发者可以根据返回值进行排版与样式编写。
[3] 测试
模拟器不支持广告在模拟器中是看不到真实广告返回值以及数据渲染的。
需要在真机上进行测试。我在真机上进行测试报错
java.lang.IllegalArgumentException: Unsupported element: ad-clickable-area难道ad组件不能用还是版本太低不合适? (我是在1070版本上进行测试的)
事实是因为oppo的包名是com.nearme.instant.platform因此在测试之前需要将快应用预览版切换为oppo快应用。 需使用oppo引擎进行调试使用联盟预览版是无法调试oppo广告的 [4] 样式调整
ad组件必须设置宽高否则可能会导致布局异常。
[5] 加载失败
广告存在加载失败的情况失败状态码如下
[6] 预加载
1、由于ad组件显示时才会去请求广告素材因此当页面渲染完成后需要一定的时间才会显示广告若希望即时显示广告可以使用广告预加载接口(文档后面有相关描述)提前请求广告素材。 tips: 使用预加载 加载广告成功的概率高些! import ad from service.ad
export default{onInit() {this.adPreloaded()},// 广告预加载5.2以后就不需要提前使用了adPreloaded() {ad.preloadAd({adUnitId: this.adunitid,type: native,success: (data) {console.log(data, 预加载成功)},fail: function (err, code) {console.log(err, code, 预加载失败)}})}
}[7] 应用要素信息
发现在请求的广告中 某些广告存在下图所示的应用要素信息 而且开发无法修改文本和按钮的内容以及样式。
此时可以联系oppo快应用的技术他可以去掉这些信息的展示。
若是想展示这些信息(同时可以修改这些信息的样式)可以使用应用要素信息组件
div classad-content-footer if{{ adData.hasPrivacy }}text classad-content-footer-version{{adData.appInfo.appVersion}}/textdiv classad-content-footer-line/divtext classad-content-footer-company{{adData.appInfo.developer}}/textdiv classad-content-footer-line/divad-clickable-areaclassad-content-footer-privatetypeprivacyfont-size11dpcolorrgb(245, 34, 34)/ad-clickable-area
/divtips: 只有adLoad加载广告返回信息中的hasPrivacy为true时type为privacy才有效果否则不显示。
