google-dfp - MRAID を使用した DFP インタースティシャル広告

Question

iOS 向け全画面広告用の新しいテンプレート (creative-template-2.html) を作成しました。デバイス画面に基づいて画像をスケーリングし、広告を自動的に閉じるロジックが含まれています。

広告は iOS シミュレーターで正常に取得できますが、画像のスケーリングと広告の却下ロジックは機能しません。iOS シミュレーターで MRAID をデバッグする方法がわかりません。

そこで、mraid.js と関連する関数を削除して、ロジックをテストするローカル html を作成しました。また、Google 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>

google-dfp - MRAID を使用した DFP インタースティシャル広告

1 に答える 1

Related

Reference