DFP Interstitial Ad using MRAID

Question

I have created a new template for the full screen ad for iOS (creative-template-2.html). It includes the logic to scale the image based on device screen and dismiss ad automatically.

The ad can be fetched successful in iOS simulator, but the scale image and dismiss ad logic don't work. I don't know how to debug MRAID in iOS simulator.

So I created a local html to test the logic by removing mraid.js and related functions. And it works in Google Chrome browser.

Does anyone know what's wrong with my js script in the creative template? Thanks for the help.

localAdTest result

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 simulator ad result

creative-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}  
}

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>

You should use custom not 3rd when create Creative. – sorry.chou Oct 16 '18 at 17:04 — sorry.chou, Oct 16 '18 at 17:04

score 0 · Answer 1 · answered Apr 06 '17 at 03:07

Previous creative template has syntax error and it causes mraid.js fail to execute.

Following create-template fix the problem. The template enable to scale the image based on device screen, custom close button and dismiss the ad after period of time.

<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>

DFP Interstitial Ad using MRAID

1 Answers1