Mraid JsTag广告

1.jsTag:使用mraid扩展协议 v1和v2，来编写js脚本

2.js页面通过webview来加载广告

3.有些需要通过js桥来监控内部的方法，有些则不需要

4.监听open,playvideo,等等可以加载 banner、插屏、视频广告。

5.广告样式有很多，有些试玩广告，有些交互广告等等。

一：MRAID是什么

MRAID是IAB为移动富媒体广告定义的一套通用API规范，APP可通过支持这些API来增加广告的富媒体特性。这是一组标准化的指令集.

IAB中MRAID的地址：Mobile Rich Media Ad Interface Definitions (MRAID)

现在有Mraid v1,Mraid v2,Mraid v3，但是现在行业主流的是Mraid v2

2.如何使用MRAID广告

如果要使用 MRAID 功能，设计的网页必须先将 mraid.js 导入到相应广告素材。所以网页需要引入<script src="mraid.js">。然后，我们Dap Sdk需要兼容 MRAID广告，Dap sdk 会在该广告素材中找到此代码，并会将其替换为指向 MRAID 实施的实际网址。之后通过WebView将网页加载出来，同时按照Mraid v2规范，Sdk从Js Tag中找到需要的方法然后做相应的操作。

举个例子：

2.1下面是Mraid的Banner广告

<script src="mraid.js"></script>
<div id="adContainer" style="width:320px;margin:0px;padding:0px;background-color:#ffffff;"><div id="normal" style="display:none;width:320px;height:50px;margin:auto;position:relative;top:0px;left:0px;"><img width="320" height="50" src="http://admarvel.s3.amazonaws.com/demo/mraid/320x50_click_to_expand.png" onclick="javascript:expand();"/></div><div id="expanded" style="display:none;width:320px;height:250px;margin:auto;position:relative;top:0px;left:0px;"><img width="320" height="250" style="position:absolute;top:0px;left:0px;" src="http://admarvel.s3.amazonaws.com/demo/mraid/320x250.png" /><img width="37" height="37" style="position:absolute;top:90px;left:56px;" src="http://admarvel.s3.amazonaws.com/demo/mraid/Html_37x37.png" onclick="javascript:openSite('http://www.opera.com');" /><img width="37" height="37" style="position:absolute;top:90px;left:113px;" src="http://admarvel.s3.amazonaws.com/demo/mraid/Location_37x37.png" onclick="javascript:openSite('https://maps.google.com/maps?q=1875+S+Grant+St,+San+Mateo,+CA&hl=en&sll=46.238212,6.864936&sspn=0.135592,0.222816&oq=1875+S&hnear=1875+S+Grant+St,+San+Mateo,+California+94402&t=m&z=17&iwloc=A')" /><img width="37" height="37" style="position:absolute;top:90px;left:170px;" src="http://admarvel.s3.amazonaws.com/demo/mraid/Download_37x37.png" onclick="javascript:openSite('https://itunes.apple.com/us/app/opera-mini-web-browser/id363729560?mt=8&ign-mpt=uo%3D4');" /><img width="37" height="37" style="position:absolute;top:90px;left:227px;" src="http://admarvel.s3.amazonaws.com/demo/mraid/Video_37x37.png" onclick="javascript:playVideo('http://admarvel.s3.amazonaws.com/demo/mraid/OMW_SOUND_VIDEO_RENEW.iPhoneSmall.mp4');" /><img width="37" height="37" style="position:absolute;top:147px;left:56px;" src="http://admarvel.s3.amazonaws.com/demo/mraid/SMS_37x37.png" onclick="javascript:sendSMS('16502122336');" /><img width="37" height="37" style="position:absolute;top:147px;left:113px;" src="http://admarvel.s3.amazonaws.com/demo/mraid/Photo_37x37.png" onclick="javascript:storePicture('http://admarvel.s3.amazonaws.com/demo/mraid/320x50.png')" /><img width="37" height="37" style="position:absolute;top:147px;left:170px;" src="http://admarvel.s3.amazonaws.com/demo/mraid/Calendar_37x37.png" onclick="javascript:createCalendarEvent()" /><img width="37" height="37" style="position:absolute;top:147px;left:227px;" src="http://admarvel.s3.amazonaws.com/demo/mraid/Call_37x37.png" onclick="javascript:callNumber('16502122336');" /></div>
</div>
<style type="text/css">
body
{background-color:#FFFFFF;
}
</style>
<script>
// Expanded Click Action Functions
function openSite(url)
{mraid.open(url);
}
function sendSMS(number)
{if (!mraid.supports("sms")){alert("MRAID says SMS is not supported on this device.");}else{mraid.open("sms://" + number);}
}function callNumber(number)
{if (!mraid.supports("tel")){alert("MRAID says calling is not supported on this device.");}else{mraid.open("tel://" + number);}
}
function playVideo(url)
{mraid.playVideo(url);
}
function storePicture(url)
{if (!mraid.supports("storePicture")){alert("MRAID says storePicture is not supported on this device.");}else{mraid.storePicture(url);}
}function createCalendarEvent()
{if (!mraid.supports("calendar")){alert("MRAID says calendar is not supported on this device.");}else{var calendarObject = {description:"Mayan Apocalypse/End of World", location:"everywhere", start:"2013-12-21T00:00-05:00", end:"2013-12-22T00:00-05:00"};mraid.createCalendarEvent(calendarObject);}
}
// Core Ad Functions
function collapse()
{mraid.close();
}
function mraidIsReady()
{mraid.removeEventListener("ready", mraidIsReady);     showMyAd();
}
function showMyAd()
{var el = document.getElementById("normal");el.style.display = '';mraid.addEventListener("stateChange", updateAd);
}
function expand()
{       mraid.setOrientationProperties({"allowOrientationChange":false, "forceOrientation":"portrait"});mraid.expand();
}
function updateAd(state)
{       if (state == "expanded"){toggleLayer('normal', 'expanded');}else if (state == "default"){toggleLayer('expanded', 'normal');}
}
function toggleLayer(fromLayer, toLayer)
{var fromElem = document.getElementById(fromLayer);fromElem.style.display = 'none';var toElem = document.getElementById(toLayer);toElem.style.display = '';
}
function setupViewport(width)
{var element = document.querySelector("meta[name=viewport]");if (!element){element = document.createElement("meta");element.name = "viewport";element.content = "width=" + width + ", user-scalable=no";document.getElementsByTagName('head')[0].appendChild(element);}else{element.content = "width=" + width + ", user-scalable=no";}
}
setupViewport(320);
function doReadyCheck()
{       if (mraid.getState() == 'loading'){       mraid.addEventListener("ready", mraidIsReady); }else{       showMyAd();     }
}
doReadyCheck();
</script>

1.里面引用了mraid.js

文章出处:https://blog.csdn.net/pangzaifei/article/details/70213731

2.定义了一些function和event，例如：

Methods Used

expand
close
addEventListener
removeEventListner
open//打开手机浏览器
getState
playVideo //播放视频
supports
storePicture
createCalendarEvent

Events Used

ready
stateChange
sizeChange

效果图：

2.2：Banenr二级联动广告，不需要重新加载页面

js Tag：http://admarvel.s3.amazonaws.com/demo/mraid/MRAID_v2_simple_resize.txt

效果：

点击banner-> 点击video播放视频->

3.插屏类广告，类似Banner，只贴几张效果图

插屏+视频: 插屏+图片：

4.用下面的Js Tag可以帮你来快速验证你的Js Brige是否有效

Js Tag:http://admarvel.s3.amazonaws.com/demo/mraid/MRAID_v2_diagnostics.txt

ps:点击open:打开浏览器点击play video:播放视频等等

4.试玩类广告

5.Mraid提供的部分方法解释：

mraid.getVersion()

mraid.getVersion() 在加载广告素材之前不会返回 2.0。在 mraid.getState() 返回 loading 的过程中，不要检查 MRAID 版本。

mraid.resize()

调用 mraid.resize() 时，原始横幅广告将被替换为横幅的屏幕截图。如果调整尺寸后的广告未覆盖原始广告空间，则会很明显。

调整尺寸后的广告也不会跟随原始横幅广告框架。如果横幅广告投放到滚动视图中，调整尺寸后的广告将不会随横幅一起滚动。

mraid.setResizeProperties()

所有对 mraid.setResizeProperties() 的调用都应包含所需属性的完整列表。如果调整大小属性无效，则它们将被设置回其默认值，并且所有对 mraid.resize() 的后续调用将失败，直到再次使用有效参数调用 mraid.setResizeProperties()。

mraid.getMaxSize()

mraid.getMaxSize() 只应用于确定调整尺寸后的广告的最大尺寸。要确定展开式广告的尺寸，请使用 mraid.getScreenSize()。

mraid.setOrientationProperties()

如果在将 allowOrientationChange 属性设置为 true 时调用 mraid.setOrientationProperties()，设置 forceOrientation 属性将不会执行任何操作。想要强制屏幕方向的广告素材应将 allowOrientationChange 设置为 false。

mraid.isViewable()

如果某个视图覆盖了原本可见的广告，mraid.isViewable() 仍会返回 true。应用内容不应覆盖可见的广告。

mraid.getCurrentPosition()

当两片式展开式广告处于展开状态时，对第一片广告调用 mraid.getCurrentPosition() 将返回屏幕的大小。