Forum Moderators: open
I just signed up with an advertising agency that does vertical CPM campaigns (Only topic oriented sites qualify).
But their JS ad serving code is so much slower then f.i. adsense.
So I looked for solutions to load the content and then the ad jscript.
the best solution I found was to do :
[top of html where ad goes]
<div id="topleft"></div>
[bottom of html just before </body>]
<div id="topleftloader" style="display:none;">[ad jscript goes here]</div>
<script type="text/javascript">
document.getElementById("topleft").innerHTML = document.getElementById("topleftloader").innerHTML;
</script>
This approach works great, the page loads very fast and then the ad follows afterwards like an image.
problem is that due to the display:none the ad gets served twice per pageview. So for instance my adsense backup tags are reporting 2x the pageviews.
I tried to insert the adcode directly
i.e. document.getElementById("topleft").innerHTML = [adcode]
But that doesn't work, unterminated string erros and blanks showing up, too complex a jscript to copy/paste in a javascript text even if I threw in a bunch of replaces (returns for \n, slash for \/ and such.
Can anyone help me send the code to the div tag without having the browser load the ad twice for each single show?
Regards
Rufal
[edited by: Rufal at 2:59 am (utc) on April 11, 2009]
var topleftloader = document.getElementById('topleftloader');
document.getElementById("topleft").appendChild(topleftloader);
Then set the style to display: block.
You had display:none, which hides the element. display:block makes it visible as a block item (which is what a <div> element has by default).
<html>
<body>
<div id="topleft"></div>
</body>
<div id="topleftloader" style="display:none;">[ad jscript goes here]</div>
<script type="text/javascript">
var topleftloader = document.getElementById('topleftloader');
document.getElementById("topleft").appendChild(topleftloader);
</script>
</html>
<html>
<body>
<div id="topleft">Loading</div>
</body>
<div id="topleftloader" style="display:block;">[ad jscript goes here]</div>
<script type="text/javascript">
var topleftloader = document.getElementById('topleftloader');
document.getElementById("topleft").appendChild(topleftloader);
</script>
</html>
<CENTER>
<div id="partnerbox"></div>
</CENTER>
Then towards the bottom content (before </body> ) I have:
<div id="partnerboxloader" style="display:block;">{Lots of script text stuff here, unchanged from ad vendor}</div>
<script type="text/javascript">
var loader = document.getElementById('partnerboxloader');
document.getElementById("partnerbox").appendChild(loader);
</script>
I actually have separate script snippets for each ad/script location, since I found that if I did it all in one large javascript nothing would render until the last one finished. By doing them separate I can make sure that my first ad location will start showing as soon as possible, then the next location, et cetera.