Showing unlimited number of banners (coding practices)

I couldn't decide whether this is an Adsense question or a Javascript question :-/

I'm setting up my pages for infinite scroll (jScroll). My current site has:

300x250 Adsense

300x400 local stuff

300x250 Adsense

300x400 local stuff

... then at the bottom of longer pages
300x250 Adsense

But since now Adsense allows for unlimited banners, I guess I would want:

while (something) {
300x250 Adsense

300x400 local stuff
}

just repeated over and over for as long as I have room. So if a page is 20000px long, I could potentially have 30 sets of those two elements.

So the question is:

1. Do I need to set up 30+ tags and pull up a different tag for each block? Or should I just use the same tag over and over? If I should use the same tag, then is there a concern that a lower CTR on tags further down the page would negatively impact the overall value of the tag?

2. Is there a standard method to do this, or am I going to have to roll my own? Something like this (just written for this post):

<script>
var i = 0;
var column_height = document.getElementById('container').clientHeight;

while (column_height > 700) {
 document.write('<div id="container_' + i + '">');
 document.write(' <div style="margin: 10px 0; padding: 10px; width: 300px; height: 250px">');

 document.write(' <ins class="adsbygoogle"');
 document.write(' data-ad-client="ca-pub-xxxx"');
 document.write(' data-ad-slot="xxxx"></ins>');

// Somehow plug this in to the loop
//<script>(adsbygoogle = window.adsbygoogle || []).push();</script>

 document.write(' </div>');

 // Ajax link to local stuff
 document.write(' <div id="block_"' + i + '" style="margin: 10px 0; padding: 10px; width: 300px; height: 400px"></div>');
 $('#block_' + i).ajax('$link_to_local_stuff');

 document.write('</div>');

 column_height -= document.getElementById('container_' + i).clientHeight;
 i++;
}
</script>

FWIW, I've reviewed the sample on lazy loading, here:

[support.google.com...]

But (1) it's hard to follow, and (2) it doesn't really specify how to do this in a loop, and whether to use the same tag for each.

TIA!

<head> <script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script> <script> var googletag = googletag || {}; googletag.cmd = googletag.cmd || []; </script> <script> var i = 0; googletag.cmd.push(function() { // I guess pick a maximum number of banners? I'm not sure if I can get the height // of "container" here before it's created, so I picked 50 at random while (i < 50) { googletag.defineSlot('/xxxx/300x250', [300, 250], 'div-gpt-ad-xxxx-' + i).addService(googletag.pubads()); i++; } googletag.enableServices(); }); </script> </head> <body> ... <script> var i = 0; var column_height = document.getElementById('container').clientHeight; while (column_height > 700) { document.write('<div id="container_' + i + '">'); document.write(' <div id="div-gpt-ad-xxxx-' + i + '" style="margin: 10px 0; padding: 10px; width: 300px; height: 250px">'); googletag.cmd.push(function() { googletag.display('div-gpt-ad-xxxx-' + i); }); document.write(' </div>'); // Ajax link to local stuff document.write(' <div id="block_"' + i + '" style="margin: 10px 0; padding: 10px; width: 300px; height: 400px"></div>'); $('#block_' + i).ajax('$link_to_local_stuff'); document.write('</div>'); column_height -= document.getElementById('container_' + i).clientHeight; i++; }

Showing unlimited number of banners (coding practices)

csdude55

keyplyr

csdude55

csdude55

tangor

csdude55

Dimitri

LuckyD

NickMNS

tangor

csdude55

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week