DoubleClick Ads (DFP) loaded with AJAX Doesn't Display Ads in Firefox
I use ads by DoubleClick For Publishers (DFP). This is the page: http://www.ifly.com
I load DFP ads via jQuery AJAX after the page load event to make my various search widgets available for user interaction as fast as possible. The process looks something like this.
Put the initial DFP header calls in the document head.
<head>
...
<script type='text/javascript'>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
(function() {
var gads = document.createElement('script');
gads.async = true;
gads.type = 'text/javascript';
var useSSL = 'https:' == document.location.protocol;
gads.src = (useSSL ? 'https:' : 'http:') +
'//www.googletagservices.com/tag/js/gpt.js';
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(gads, node);
})();
</script>
<script type='text/javascript'>
googletag.cmd.push(function() {
googletag.defineSlot('/9358962/HP-300x250', [300, 250], 'div-gpt-ad-1353002461867-0').addService(googletag.pubads());
googletag.defineSlot('/9358962/HP-460x60', [468, 60], 'div-gpt-ad-1353002461867-1').addService(googletag.pubads());
googletag.defineSlot('/9358962/HP-728x90', [728, 90], 'div-gpt-ad-1353002461867-2').addService(googletag.pubads());
googletag.defineSlot('/9358962/HP-LAF-160x600', [160, 600], 'div-gpt-ad-1353002461867-3').addService(googletag.pubads());
googletag.defineSlot('/9358962/HP-RAF-160x600', [160, 600], 'div-gpt-ad-1353002461867-4').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>
....
</head>
Create an empty div as a placeholder.
<div id='horizontalTANBanner'></div>
After the page load, insert code using jQuery AJAX to fetch the ad.
<div id='horizontalTANBanner'>
<!-- HP-728x90 -->
<div id='div-gpt-ad-1353002461867-2' style='width:728px; height:90px;'>
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1353002461867-2'); });
</script>
</div>
</div>
Google loads yet more JavaScript to actually call the ad. I see that it has been inserted using Firebug.
<div id="horizontalTANBanner">
<div id="div-gpt-ad-1353002461867-2" style="width:728px; height:90px;">
<iframe id="google_ads_iframe_/9358962/HP-728x90_0" width="728" scrolling="no" height="90" frameborder="0" name="google_ads_iframe_/9358962/HP-728x90_0" marginwidth="0" marginheight="0" style="border: 0px none;">
<html>
</iframe>
<iframe id="google_ads_iframe_/9358962/HP-728x90_0__hidden__" width="0" scrolling="no" height="0" frameborder="0" name="google_ads_iframe_/9358962/HP-728x90_0__hidden__" marginwidth="0" marginheight="0" style="border: 0px none; visibility: hidden; display: none;">
</div>
</div>
I see the ads display in every browser but Firefox (IE, Chrome, Opera, Safari). I have confirmed with other users that they cannot see the ads in Firefox. How can I make the ads display in Firefox?
I asked this question on the DFP forum, but the are not technical and their best answer was, "Stop using AJAX," but the visitor experience is so much better and I expect Google will rank my pages better for not loading so slowly, so I hate to stop using it.
Answer
I think you may be way over complicating the loading of your dfp slots.
This code block is the part that is not working I think.
/*** Populate DFP ads ***/
var _pageID=$("body").find_class("pageID-");
$.get('/common/modules/ajax-get-list.php',{pageID:_pageID},function(_data){
//alert('data='+_data);
if(_data!=''){
var _arrDFPList=_data.split(',');
for(var i=0;i<_arrDFPList.length;i++){
//alert('DFP id = '+_arrDFPList[i]);
$.get('/common/modules/ajax-get-one.php',{id:_arrDFPList[i]},function(_oneData){
var _arrDFPOne=_oneData.split('<<<>>>');
//alert('id = '+_arrDFPOne[0]+' and content = '+_arrDFPOne[1]);
$("#"+_arrDFPOne[0]).append(_arrDFPOne[1]);
//$("#"+_arrDFPOne[0]).html(_arrDFPOne[1]);
});
}
}
/*
if(_data!=''){
var arrDFPList=_data.split(',');
$.get('/common/modules/def-get-one.php',{},function(_oneData){
});
}*/
});
/*** END Populate DFP ads ***/
I think firefox is probably just appending the ad slot display code but failing to evaluate it.
I faced a similar issue a few months back where we wanted to bring ads in after load and too keep everything really fast yet simple... the solution I came up with was to create jquery.dfp.js. This plugin allows you to defer the load of DFP entirely until you want it to be loaded you also do not need to pre define all of your slots like you are currently doing...
For example here is your current homepage with just the bare essentials required to get your ads displaying using my plugin:
<html>
<head>
<title>DFP TEST</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://raw.github.com/coop182/jquery.dfp.js/master/jquery.dfp.min.js"></script>
</head>
<body>
<div class="adunit" id="HP-300x250" data-dimensions="300x250"></div>
<div class="adunit" id="HP-460x60" data-dimensions="460x60"></div>
<div class="adunit" id="HP-728x90" data-dimensions="728x90"></div>
<div class="adunit" id="HP-LAF-160x600" data-dimensions="160x600"></div>
<div class="adunit" id="HP-RAF-160x600" data-dimensions="160x600"></div>
<script>
$(function () {
$.dfp('9358962');
});
</script>
</body>
</html>
I think this is a much better way of doing things. If you have any questions let me know.