0

我为 iOS 的全屏广告创建了一个新模板 (creative-template-2.html)。它包括根据设备屏幕缩放图像并自动关闭广告的逻辑。

在 iOS 模拟器中可以成功获取广告，但缩放图像和关闭广告逻辑不起作用。我不知道如何在 iOS 模拟器中调试 MRAID。

所以我创建了一个本地 html 来通过删除 mraid.js 和相关函数来测试逻辑。它适用于谷歌 Chrome 浏览器。

有谁知道我在创意模板中的 js 脚本有什么问题？谢谢您的帮助。

localAdTest 结果 在此处输入图像描述

localAdTest.html 

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<head>
<style>
body{
  -moz-transition: opacity 1s ease;  /* FF3.7+ */
  -o-transition: opacity 1s ease;  /* Opera 10.5 */
  -webkit-transition: opacity 1s ease;  /* Saf3.2+, Chrome */
  transition: opacity 1s ease;
  background-color:#000000;
}

/* Portrait */
@media screen and (orientation:portrait){
  #_admPortraitImage{display:inline}  
}
/* Landscape */
@media screen and (orientation:landscape){
  #_admPortraitImage{display:none}  
}

div.adContainer {
  width:100%;
  height:100%;
}

div.sponserLabel {
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  color: white;
  padding-left: 4px;
  padding-top: 4px;
  padding-right: 4px;
  padding-bottom: 4px;
  background-color: rgba(0, 0, 0, 0.7);
  font-size: 12px;
}

div.timer {
  position: fixed;
  top: 16px;
  right: 16px;
  color: white;
  font-size: 16px;
}
</style>
<script type="text/javascript" src="https://media.admob.com/api/v1/google_mobile_app_ads.js"></script>
</head>
<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
  <div class="sponserLabel">
    Sponsored
  </div>
  <div class="adContainer">
      <a href="http://www.google.com" id="clickthrough" target="_new" onClick="admob.opener.openUrl('http://www.google.com',true); return false;">
        <img id="_admPortraitImage" src="http://wfiles.brothersoft.com/a/apple-logo-wallpaper-for-iphone-4-04_6442-320x480.jpg" style="border:0px" />
      </a>
  </div>
  <div id=_adClose class="timer" />
</body>
</html>

<script>
var _admDisplayTime = '10';
var _timerCounter = 0;

function _admScreenFitting() {
  var _admPImage = document.getElementById('_admPortraitImage');  
  var screenWidth = window.innerWidth;
  var screenHeight = window.innerHeight;
  var imageRatio = screenHeight / screenWidth;
  if (screenWidth > screenHeight) {
    //landscape mode
    var newWidth = screenWidth;
    var newHeight = screenWidth / imageRatio;
    if (newHeight > screenHeight) {
      var newWidth = screenHeight * imageRatio;
      var newHeight = screenHeight;
    }
  } else {
    //portrait mode
    var newWidth = screenHeight / imageRatio;
    var newHeight = screenHeight;
    if (newWidth > screenWidth) {
      var newHeight = screenWidth * imageRatio;
      var newWidth = screenWidth;
    }
  }

  _admPImage.style.width = newWidth;
  _admPImage.style.height = newHeight;
}

// Check whether MRAID is ready by adding event listener
// function checkIfReady() {
//   if(mraid.getState() === 'loading') {
//     mraid.addEventListener("ready", onSdkReady);
//   } else{
//     onSdkReady();
//   }
// }

// // Wait for the ad to become viewable for the first time
// function onSdkReady() {
//   mraid.removeEventListener("ready", onSdkReady); 
//   if (mraid.isViewable()) {
//     showMyAd();
//   } else {
//     mraid.addEventListener('viewableChange',function(viewable) {
//     if (viewable) {
//         mraid.removeEventListener('viewableChange', arguments.callee);
//         showMyAd();
//       }
//     });
//   }
// }

function showMyAd() {
  var _adClose = document.getElementById('_adClose');
  _adClose.addEventListener('click', _onCloseHandler);
  // mraid.useCustomClose(true);
  _admScreenFitting();
  _admStartCountDown();
}

function _admStartCountDown() {
  _timerCounter += 1;
  var _targetTime = parseInt(_admDisplayTime);
  var _adClose = document.getElementById('_adClose');
  if (_timerCounter >= _targetTime) {
    admob.opener.close();
  } else {
    _adClose.innerHTML = 'Skip ' + (_targetTime - _timerCounter);
  }
  setTimeout(_admStartCountDown, 1000);
}

function _onCloseHandler() {
  admob.opener.close();
}

// checkIfReady();

if(window.addEventListener) {
  window.addEventListener("load",showMyAd, false)
} else {  
  window.attachEvent("onload",showMyAd)
}

</script>

iOS 模拟器广告结果 在此处输入图像描述

创意模板

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<head>
<style>
body{
  -moz-transition: opacity 1s ease;  /* FF3.7+ */
  -o-transition: opacity 1s ease;  /* Opera 10.5 */
  -webkit-transition: opacity 1s ease;  /* Saf3.2+, Chrome */
  transition: opacity 1s ease;
  background-color:#000000;
}

/* Portrait */
@media screen and (orientation:portrait){
  #_admPortraitImage{display:inline}  
}
/* Landscape */
@media screen and (orientation:landscape){
  #_admPortraitImage{display:none}  
}

div.adContainer {
  width:100%;
  height:100%;
}

div.sponserLabel {
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  color: white;
  padding-left: 4px;
  padding-top: 4px;
  padding-right: 4px;
  padding-bottom: 4px;
  background-color: rgba(0, 0, 0, 0.7);
  font-size: 12px;
}

div.timer {
  position: fixed;
  top: 16px;
  right: 16px;
  color: white;
  font-size: 16px;
}
</style>
<script type="text/javascript" src="mraid.js"></script>
<script type="text/javascript" src="https://media.admob.com/api/v1/google_mobile_app_ads.js"></script>
</head>
<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
  <div class="sponserLabel">
    Sponsored
  </div>
  <div class="adContainer">
      <a href="%%CLICK_URL_UNESC%%[%ClickThroughURL%]" id="clickthrough" target="_new" onClick="admob.opener.openUrl('%%CLICK_URL_UNESC%%[%ClickThroughURL%]',true); return false;">
        <img id="_admPortraitImage" src="[%PortraitImage%]" style="border:0px" />
      </a>
  </div>
  <div id=_adClose class="timer" />
</body>
</html>

<script>
var _admDisplayTime = ''[%DisplayTime%]'';
var _timerCounter = 0;

function _admScreenFitting() {
  var _admPImage = document.getElementById('_admPortraitImage');  
  var screenWidth = window.innerWidth;
  var screenHeight = window.innerHeight;
  var imageRatio = screenHeight / screenWidth;
  if (screenWidth > screenHeight) {
    //landscape mode
    var newWidth = screenWidth;
    var newHeight = screenWidth / imageRatio;
    if (newHeight > screenHeight) {
      var newWidth = screenHeight * imageRatio;
      var newHeight = screenHeight;
    }
  } else {
    //portrait mode
    var newWidth = screenHeight / imageRatio;
    var newHeight = screenHeight;
    if (newWidth > screenWidth) {
      var newHeight = screenWidth * imageRatio;
      var newWidth = screenWidth;
    }
  }

  if ('[%AllowScaling%]' === 'yes') {    
    _admPImage.style.width = newWidth;
    _admPImage.style.height = newHeight;
  }

}

// Check whether MRAID is ready by adding event listener
function checkIfReady() {
  if(mraid.getState() === 'loading') {
    mraid.addEventListener("ready", onSdkReady);
  } else{
    onSdkReady();
  }
}

// Wait for the ad to become viewable for the first time
function onSdkReady() {
  mraid.removeEventListener("ready", onSdkReady); 
  if (mraid.isViewable()) {
    showMyAd();
  } else {
    mraid.addEventListener('viewableChange',function(viewable) {
    if (viewable) {
        mraid.removeEventListener('viewableChange', arguments.callee);
        showMyAd();
      }
    });
  }
}

function showMyAd() {
  var _adClose = document.getElementById('_adClose');
  _adClose.addEventListener('click', _onCloseHandler);
  mraid.useCustomClose(true);
  _admScreenFitting();
}

function _admStartCountDown() {
  _timerCounter += 1;
  var _targetTime = parseInt(_admDisplayTime);
  var _adClose = document.getElementById('_adClose');
  if (_timerCounter >= _targetTime) {
    mraid.close();
  } else {
    _adClose.innerHTML = 'Skip ' + (_targetTime - _timerCounter);
  }
  setTimeout(_admStartCountDown, 1000);
}

function _onCloseHandler() {
  mraid.close();
}

checkIfReady();

</script>

4

1 回答 1

0

之前的创意模板有语法错误，导致 mraid.js 无法执行。

以下 create-template 解决了这个问题。该模板可以根据设备屏幕缩放图像，自定义关闭按钮并在一段时间后关闭广告。

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<head>
<style>
<!--
body{
  -moz-transition: opacity 1s ease;  /* FF3.7+ */
  -o-transition: opacity 1s ease;  /* Opera 10.5 */
  -webkit-transition: opacity 1s ease;  /* Saf3.2+, Chrome */
  transition: opacity 1s ease;
  background-color:#000000;
}

/* Portrait */
@media screen and (orientation:portrait){
  #_admPortraitImage{display:inline}
}

/* Landscape */
@media screen and (orientation:landscape){
  #_admPortraitImage{display:none}
}

table {
   width:100%;
   height:100%;
}

td{
   vertical-align:middle;
   text-align:center;
}

div.adContainer {
  width:100%;
  height:100%;
}

div.sponserLabel {
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  color: white;
  padding: 8px 8px 8px 8px;
  background-color: rgba(0, 0, 0, 0.7);
  font-size: 14px;
}

div.timer {
  position: fixed;
  top: 16px;
  right: 16px;
  color: white;
  font-size: 16px;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 16px 16px 16px 16px;
  border-radius: 430px;
}

//-->
</style>
<script type="text/javascript" src="mraid.js"></script>
<script type="text/javascript" src="//googleads.g.doubleclick.net/mads/static/mad/sdk/native/api/v1/google_mobile_app_ads.js"></script>
<script>
<!--
var _admDisplayTime = '[%DisplayTime%]';
var _timerCounter = 0;

function _admScreenFitting() {
  var _admPImage = document.getElementById('_admPortraitImage');
  var screenWidth = window.innerWidth;
  var screenHeight = window.innerHeight;
  var imageRatio = screenHeight / screenWidth;
  if (screenWidth > screenHeight) {
    //landscape mode
    var newWidth = screenWidth;
    var newHeight = screenWidth / imageRatio;
    if (newHeight > screenHeight) {
      var newWidth = screenHeight * imageRatio;
      var newHeight = screenHeight;
    }
  } else {
    //portrait mode
    var newWidth = screenHeight / imageRatio;
    var newHeight = screenHeight;
    if (newWidth > screenWidth) {
      var newHeight = screenWidth * imageRatio;
      var newWidth = screenWidth;
    }
  }
  displayDensity = window.devicePixelRatio ? window.devicePixelRatio : 1;
  if (displayDensity != 1) {
    _admPImage.src = ('[%PortraitImageHD%]' != '') ? '[%PortraitImageHD%]' : _admPImage.src;
  }
  
  if ('[%AllowScaling%]' == 'yes') {
    _admPImage.style.width = newWidth;
    _admPImage.style.height = newHeight;
  }
}

function _admStartCountDown() {
  _timerCounter += 1;
  var _targetTime = parseInt(_admDisplayTime);
  var _adClose = document.getElementById('_adClose');
  if (_timerCounter > _targetTime) {
      admob.opener.close();
  } else {
    _adClose.innerHTML = 'Skip ' + (_targetTime - _timerCounter);
  }
  setTimeout(_admStartCountDown, 1000);
}

function _onCloseHandler() {
  admob.opener.close();
}

// Check whether MRAID is ready by adding event listener
function checkIfReady() {
  if(mraid.getState() === 'loading') {
    mraid.addEventListener('ready', mraidIsReady);
  } else{
    displayAd();
  }
}

// Once MRAID is ready, it does not need to listen to the ready event anymore
function mraidIsReady() {
  mraid.removeEventListener('ready', mraidIsReady);
  displayAd();
}

function displayAd() {
  var _adClose = document.getElementById('_adClose');
  _adClose.addEventListener('click', _onCloseHandler);
  mraid.useCustomClose(true);
  _admStartCountDown();
}

if (window.addEventListener) {
  window.addEventListener("resize", _admScreenFitting, false);
}

checkIfReady();

//-->
</script>
</head>
<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<div class="sponserLabel">
  Sponsored
</div>
<div id="_adClose" class="timer">
</div>
<table cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td>
      <a href="%%CLICK_URL_UNESC%%[%ClickThroughURL%]" id="clickthrough" target="_new" onClick="admob.opener.openUrl('%%CLICK_URL_UNESC%%[%ClickThroughURL%]',true); return false;">
      <img id="_admPortraitImage" src="[%PortraitImage%]" style="border:0px" />
    </a>
  </td>
</tr>
</table>
</body>
</html>

于 2017-04-06T03:07:33.117 回答