移动网页广告引入mraid.js使用指南
程序员文章站
2022-04-09 19:00:57
在网上找mraid相关资料,相对比较少,大多都是API介绍,概念介绍等,没有一份详细的移动端网页广告使用教程,经过自己两天的摸索,完成了开发的移动端网页版的广告加入mraid功能。 背景: 我开发了移动端网页展示的广告,由于产品的要求,要实现广告中的视频在用户看到的时候才会继续播放,不看的时候不会播 ......
在网上找mraid相关资料,相对比较少,大多都是api介绍,概念介绍等,没有一份详细的移动端网页广告使用教程,经过自己两天的摸索,完成了开发的移动端网页版的广告加入mraid功能。
背景:
我开发了移动端网页展示的广告,由于产品的要求,要实现广告中的视频在用户看到的时候才会继续播放,不看的时候不会播放,而默认设置的video 的autoplay自动播放会在用户打开的情况下,即使看不到也是种播着,影响了用户看到的广告效果,即可能会降低点击率和转化率。
而mraid具有天然的优势,mraid可以识别用户是否在看着广告,可以识别用户的点击跳转,可以出现关闭按钮点击关闭,可以缩放广告等,推荐mriad中文版教程:
开始
1、在网页中首先引入mraid.js【直接引入即可,不需要在本地放mraid.js,页面在支持mraid的app中会自动注入】
<script src="mraid.js"></script>
2、在pc端开发完成之后,不方便测试mraid效果,推荐这个网站:
可以在线设置广告位的宽高,粘贴代码,render之后查看效果。
3、mraid实现视频用户浏览时播放,并且点击下载mraid跳转完整代码:
let v = document.getelementsbytagname("video")[0];//获取video元素 let ad_pic = document.getelementsbyclassname("ad_pic")[0];//视频暂停时的图片 // 视频播放 function videoplay() { let videoisplay = v.play(); if (videoisplay !== undefined) { videoisplay.then(() => {//通过异步的方式避免报错 ad_pic.style.display = "none"; }).catch((err) => { console.log(err); ad_pic.style.display = "none";//默认暂停时的图片隐藏 //视频元素可以选择静音后再播放,提示用户打开声音 v.muted = true; v.play(); }); } } //图片点击播放 function cardclick(event) { "use strict"; ad_pic.addeventlistener(event, function () { videoplay(); v.classname = ''; }, true); } function adpic() { cardclick('tap'); cardclick('click'); } // mraid判断 function mraidplay() { "use strict"; if (mraid.getstate() === 'loading') { mraid.addeventlistener('ready', onsdkready); } else { onsdkready(); } function onsdkready() { if (mraid.isviewable()) { videoplay(); } else { mraid.addeventlistener('viewablechange', function (viewable) { if (viewable) { mraid.removeeventlistener('viewablechange'); videoplay(); } }); } } }
在使用video.play()方法的时候,有时候会出现报错:
uncaught (in promise) domexception
4、mraid代码实现的流程:
先判断mraid状态是否为loading,如果为loading要给mraid注册ready事件,在ready事件中进行相应mraid代码执行,比如判断用户是否在浏览广告,如果不是loading状态,则说明是ready状态,直接执行mraid操作的代码。
mraid.js,所有事件发生都要在ready之后,mraid.open也需要ready之后,只要引入了mraid.js,就可以识别mraid对应的方法存在,但是事件的执行要在ready事件之后。