PDA

View Full Version : Integration of Yahoo APT JavaScript Ad Serving



oddz
3 Dec 2011, 2:55 PM
Has anyone tried to integrate yahoo APT (ad serving) with a Touch 1 or 2 application? It seems that this is not going all that well. Here is the application I have been developing. I should point out that the only functional links are news and sports at this time.

Site (http://apps.morrisdigitalworks.com/mobile_sms_app/editorials/index.html)

This seems to work alright on an webkit desktop browser. However, the second I start to look at it on an iphone the thing is unbelievably slow, and after so long will crash the entire site.

Now, I in no way believe this is a touch problem. Instead it is a problem with the way APT has been implemented. It does not make it *easy* to change ads out unless there is a physical page refresh. After playing around with APT for a while I did figure out a way to achieve a "virtual" page refresh, but that seems to not work so well on any mobile browser. I think part of the problem is that webkit browsers are returning a false positive for a XSS attack, due to how the yahoo APT JavaScript calls are made to display ads. This is the error in the console being received when attempting to "virtually" refresh ads.

Refused to execute a JavaScript script. Source code of script found within request.

Due to the way APT has implemented the ad call it is not possible to merely refresh their iframe containing the ad. The one thing I have considered is using my own iframes in which case I would merely refresh the iframe. However, than campaigns will not function – all ads on the "page" belonging to a single "campaign" essentially. In order to do that that there needs to be a single ad call for all ads on the "page".

All that said this is a vital function of the software that would result in redevelopment without touch. So has anyone found a way to deal with issue and way to resolve it?

Thanks

oddz
3 Dec 2011, 3:11 PM
Thinking about this a little more what may work is using a single iframe to serve all the ads than move the ads from that iframe into the parent. hmm…

oddz
4 Dec 2011, 1:38 PM
The concept of using an iframe to proxy all the ads seems to work well preventing the XSS false positive and providing a means to create virtual page refreshes.

main.html


<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

</head>
<body>

<button>Refresh Ads</button>

<iframe id="ads" name="ads" src="ads.html" width="1" height="1" style="visibility: hidden;"></iframe>

<script type="text/javascript">

function onAdsLoad() {

var

target = window.frames.ads,
ads = [{name: 'adList' , num: 3},{name: 'adSlideShow' , num: 3}],
i,j,ad,indoc;

for(i=0;i<ads.length;i++) {
for(j=0;j<ads[i].num;j++) {

// already existing ad
indoc = document.getElementById(ads[i].name + j);

// Get root level ad wrapper
ad = target.document.getElementById(ads[i].name + j);

// remove the call script
ad.removeChild(ad.firstChild);

// move to this document replacing existing ad if it exists
if(indoc) {
indoc.parentNode.replaceChild(ad,indoc);
} else {
document.getElementsByTagName('body')[0].appendChild(ad);
}

}
}


}

document.getElementsByTagName('button')[0].onclick = function() {
window.frames.ads.location = window.frames.ads.frameElement.src;
};

</script>

</body>
</html>


ads.html


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>

<script type="text/javascript">
/*
* Set-up ads (configuration)
*/
(function() {

yld_mgr = {slots: {}};
yld_mgr.pub_id="23739553914";
yld_mgr.site_name="Florida Times Union - Mobile";
yld_mgr.request_type="ac";
yld_mgr.content_topic_id_list = ['20201001'];
yld_mgr.ad_format_list = ["image"];
yld_mgr.container_type = "js";

var ads = [
{name: 'adList' , size: '300x50', num: 3}, // standard aggregated list
{name: 'adSlideShow' , size: '300x250', num: 3} // slideshow
];

for(var i=0;i<ads.length;i++) {
for(var j=0;j<ads[i].num;j++) {
yld_mgr.slots[ads[i].name + j] = {};
yld_mgr.slots[ads[i].name + j].ad_size_list = [ads[i].size];
yld_mgr.slots[ads[i].name + j].ad_delivery_mode = ['ipatf'];
yld_mgr.slots[ads[i].name + j].cstm_content_cat_list = [];
yld_mgr.slots[ads[i].name + j].content_type_list = [];
}
}

})();
</script>
<!-- apt ad serving -->
<script type="text/javascript" src="http://e.yieldmanager.net/script.js"></script>

<!-- aggregated list ad placements -->
<div id="adList0"><script type="text/javascript">yld_mgr.place_ad_here("adList0");</script></div>
<div id="adList1"><script type="text/javascript">yld_mgr.place_ad_here("adList1");</script></div>
<div id="adList2"><script type="text/javascript">yld_mgr.place_ad_here("adList2");</script></div>

<!-- slideshow ad placements -->
<div id="adSlideShow0"><script type="text/javascript">yld_mgr.place_ad_here("adSlideShow0");</script></div>
<div id="adSlideShow1"><script type="text/javascript">yld_mgr.place_ad_here("adSlideShow1");</script></div>
<div id="adSlideShow2"><script type="text/javascript">yld_mgr.place_ad_here("adSlideShow2");</script></div>

<script type="text/javascript">parent.onAdsLoad();</script>

</body>
</html>

oddz
6 Dec 2011, 10:31 PM
I was able to figure it out using the above technique in combination with an iframe and copying nodes inside the iframe to the parent dom. Seems to be working well.