移动端网页广告引入 mraid.js 使用指南

beileixinqing

已于 2022-12-28 16:04:39 修改

阅读量1.5k

点赞数 7

分类专栏：移动广告文章标签：移动广告移动网页版广告 mraid 广告

于 2019-04-17 00:33:25 首次发布

本文链接：https://blog.csdn.net/beileixinqing/article/details/89345414

版权

移动广告专栏收录该内容

1 篇文章

订阅专栏

在网上找mraid相关资料，相对比较少，大多都是API介绍，概念介绍等，没有一份详细的移动端网页广告使用教程，经过自己两天的摸索，完成了开发的移动端网页版的广告加入mraid功能。

背景

我主要负责开发移动端展示的广告页面，包括 banner、落地页、激励视频、插屏视频、开屏页等等，由于产品的要求，要实现广告中的视频在用户看到的时候才会继续播放，不看的时候不会播放，而默认设置的video 的autoplay自动播放会在用户打开的情况下，即使看不到也一直播放，既会影响用户体验，又会影响页面性能，从而影响广告效果。

如果使用原生 js，可以通过监听 visibilitichange 事件，来判断页面是否在前台。

而mraid作为通用广告协议，具有天然的优势，mraid可以通过 sdk，来精确识别页面是否在前台，可以通过 mraid.open 来实现 native 体验的点击跳转，可以设置关闭按钮的样式、展示隐藏，可以缩放广告等，详细 api 推荐浏览 mriad 中文版教程：

https://github.com/graypants/mraid_cn/blob/master/mraid_cn.md

开始

1、在网页中首先引入mraid.js【直接引入即可，不需要在本地放mraid.js，页面在支持mraid的app中会自动注入】

<script src="mraid.js"></script>

2、在PC端开发完成之后，不方便测试mraid效果，推荐这个网站：http://webtester.mraid.org/

（最新更新：目前这个网站好像打不开了）

可以在线设置广告位的宽高，粘贴代码，render之后查看效果。

3、使用 mraid 实现自定义逻辑

示例

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事件之后。

5、注意

mraid 最新版本为 3.0，常用版本为 2.0，不同版本，有个别 API 使用方法不同，注意关注文档，不同广告 sdk 下引入的 mraid.js 文件不一定是官方文档自带的，可能 sdk 会自定义一些逻辑，重写一些 mraid 方法，从而导致在某些 sdk 下使用某些 api 获取不到，或者行为不一致的问题。