0
我爲iOS的全屏廣告（creative-template-2.html）創建了一個新模板。它包括根據設備屏幕縮放圖像並自動關閉廣告的邏輯。使用MRAID的DFP插頁式廣告
該廣告可以在iOS模擬器中成功抓取，但縮放圖像和解散廣告邏輯不起作用。我不知道如何在iOS模擬器中調試MRAID。
所以我創建了一個本地html來通過刪除mraid.js和相關函數來測試邏輯。它可以在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>