Mraid(Mobile Rich Media Ad Interface Definitions)移动端富媒体广告接口标准，是移动应用中普遍使用的富媒体广告接口。提供了众多标准化的接口(展开，缩放，访问设备功能等)，开发者可以基于此开发各种形式的广告。
Mraid(https://www.iab.com/guidelines/mobile-rich-media-ad-interface-definitions-mraid/)最大的贡献就是统一了一套广告创意的开发标准。以前需要为各个APP定制创意(如果需要和APP交流)，借助Mraid只需要一套代码就能在所有内嵌了Mraid SDK的APP上运行，而且保证展示效果一致。其次，它提供了众多标准方法，简化了开发工作量。尤其是能够访问一些设备的信息，这在以前依靠JavaScript是完全不可能实现的。
基本概念
1.Ad View/Container
展示创意的区域。containers一般由SDK提供，一个SDK可能提供多个container。
2.Close Event Region
关闭时间区域，点击这个区域就会返回默认状态。比如扩展创意关闭后返回小图状态，插屏广告关闭后消失。
3.Close Indicator
关闭标识。一般是一个叉号的图片，告诉用户点击这里可以关闭创意。
4.Controller
创意通过控制器来完成相关的交互任务。
5.Density-Independent Pixels
目标独立像素。我认为这是mraid的一个伟大成就。由于各个设备的分辨率不同，像素点的大小也不一样。因此相同的设置会在不同的设备上显示各异。mraid的解决办法就是不计算真实的像素大小，计算目标独立像素（个人翻译）然后应用到不同设备上，保证了不同设备显示的一致性。
6.InLine Ad
行内广告，eg: banner广告。
7.Interstitial Ad
插入广告, eg:插屏广告。
8.Physical Pixels
物理像素，mraid不计算物理像素。
9.SDK
不解释。
10.WebView
展示创意的组件，可以执行HTML的渲染和JavaScript脚本。
各个组件关系
开发要求
需要一个实现了mraid标准的SDK。要求SDK实现两个功能。
- 定义一个原生的container来展示创意。
- 定义一个JavaScript控制器来和创意进行交互。
初始化
引入mraid.js脚本，实现的方式有很多：
- 使用script标签直接引入
<script src="mraid.js"></script>
- js脚本写入
- SDK支持的其他方式
Mraid 2.0支持的方法和事件
Mraid 2.0支持的方法和事件
1.ready事件
表明mraid的JavaScript库可用。
例子：
mraid.addEventListener('ready',function(){
//put your code here
})
2.getVersion方法
返回mraid的版本。
console.log(mraid.getVersion()); //2.0
3.addEventListener方法
可以监听事件。多个监听器可以监听同一个事件，一个监听器可以监听多个事件。（文档原文，有点不理解一个监听器如何监听多个事件）
mraid.addEventListener(event,listener)
event//事件
listener//执行函数
4.removeEventListener方法
用法与addEventListener类似，移除事件监听。
mraid.removeEventListener(event,listener)
event//事件
listener//需要移除的函数
5.error 事件
mraid.addEventListener(error,function(message,action){
//message 错误类型描述
//action 引起错误的
})
添加照片至相册，日历添加事件，重置窗口大小等操作最有可能引发错误，所以建议在使用这些方法时添加error监听。
6.getState方法和 stateChange事件
getState返回container当前的状态。
stateChange会在状态改变时触发。一个mraid广告一个时刻只能拥有一个状态。
状态列表
7.getPlacementType方法
返回创意类型是bannner广告还是插入式广告。
8.isViewable方法和viewableChange事件
判断创意是否在屏幕上显示。
9.open()
最常用的方法之一。
- 打开一个新的URL，一般新页面会在APP内部打开，也可能会调用本地浏览器打开。
- 全屏显示
- 没有附加参数
10.expand
- 全屏显示
- 有少量参数（可设置展开的宽高等）
- 支持单个或者两段式创意
11.resize
- 没有默认值可以放大或者缩小尺寸
- 需要其他参数和函数
- 值适用于单部分创意（不适用于两段式创意）
注意点
1.尽可能早的引入mraid.js
HTML
<html> <head> <script src="mraid.js"></script>
Script
<script type="text/javascript">
var head = document.getElementsByTagName('head').item(0),
js = document.createElement('script'),
s = 'mraid.js';
js.setAttribute('type', 'text/javascript');
js.setAttribute('src', s);
head.appendChild(js);
</script>
2.执行初始化函数之前检测页面状态
function init() {
var success = false;
if (document.readyState === 'complete') {
if (typeof mraid !== 'undefined') {
if (mraid.getState() === 'loading') {
mraid.addEventListener('ready', displayAd);
} else if (mraid.getState() === 'default') {
displayAd();
}
success = true;
}
}
return success;
3.两段式展开广告
- 创建两段式展开广告时，第二段必须是一个完整的HTML，不能是一个HTML片段。
- 在第二段中必须使用script标签引入mraid.js。
- 尽管mraid.expand()可以接受URL参数，但是不能用来记录点击。建议使用mraid.open()来监测点击。
4.插页广告
插页广告需要一个关闭标志，可以通过usecustomclose(true)来隐藏默认的关闭标志。
常见错误
1.添加 ready 事件监听不生效
可能因为创意在容器（页面）加载MRAID库完成之前就调用了MRAID。这可能导致创意展示错误。
2.没有为移动设备做页面优化
添加下面的HTML片段能让创意自动缩放至设备宽度。
<meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1'>
3.点击创意没有调用 mraid.open()
可能是页面中使用了超链接<a>。超链接在Mraid中无法被准确的识别，所以无法一致性的执行。超链接有时候会被完全忽略，有时候会使用设备原生浏览器打开。为了保证效果的一致性，不要使用超链接或者window.open，统一使用mraid.open()。
4.引用第三方库，但没有使用第三方库的ready方法
比如JQuery库中也有ready方法，如果你在元素中绑定了方法，请确保在执行jQuery函数之前所有的元素都已经加载完了。
5.初始化失败
即使没有使用jQuery，也需要判断两个ready状态。window.ready 和 mraid.ready，这两个状态是相互独立的。一个完成了，另一个可能还没有完成，所以两个都需要判断，都ready之后才能进行初始化操作。甚至需要判断 isViewable。
6.检验isViewable失败
有可能因为设备或网络原因页面加载太慢，或者用户已经切换到了其他界面。每次开始执行方法或者动画之前都要进行isViewable的判断。
7.isViewable的理解错误
isViewable是为了让创意知道什么时候开始进行初始化操作。之后不再监控isViewable，及时用户将APP至于后台运行，isViewable的值也不会改变。所以不能通过isViewable的值判断页面是否可见，也不能用来统计曝光次数。
8.缩放插屏广告
在MRAID中禁止对插屏广告进行resize和expand操作。使用至两个函数会导致错误。
9.多次展开广告
expand函数只能调用一次，之后的调用都会被忽略。如果需要多次改变大小，可以使用resize函数。
个人总结
经过一段时间的了解和使用，感觉mraid并不是必须的。它的主要贡献就是将HTML5的一些功能进行了封装，保证了一致性。如果生产中并没有要求，完全可以使用HTML5实现mraid的所有功能。学习和开发成本会低很多。
网友评论