Mraid JsTag广告

最新推荐文章于 2024-04-26 17:27:24 发布

在飞

最新推荐文章于 2024-04-26 17:27:24 发布

阅读量2k

点赞数

分类专栏： ad 广告文章标签： Mraid Jstag mraid jstag

本文链接：https://blog.youkuaiyun.com/pangzaifei/article/details/81563549

版权

广告同时被 2 个专栏收录

3 篇文章

订阅专栏

1 篇文章

订阅专栏

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.youkuaiyun.com/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。