OK to only load banner when it's visible?

[csdude55]

Is there an issue with waiting until the user is at a certain scrollTop before starting to load an Adsense banner?

Something along the lines of:

<script>
// just typed up for this example, not tested
var st;
var placement = 1000; // vertical placement of the banner

if (document.body && document.body.scrollTop)
 st = document.body.scrollTop;

else if (document.documentElement && document.documentElement.scrollTop)
 st = document.documentElement.scrollTop;
</script>

// Then at the banner location
<script>
if (!st || st >= placement) {
 // Adsense ad unit code
 // if !st then scrollTop isn't recognized, so just show it anyway
}
</script>

The theory is to only show the banner when it would be viewable on the screen, which should be better for advertisers, and should (in theory) increase the overall value of the banner.

[LuckyD]

Here, check out Google's guide on lazy loading ads: [support.google.com...]

I think this will answer your question

[Dimitri]

It's slightly off-topic, but I would be interested to know how you display the ad ? I mean, I can easily imagine how you can determine when the ad will be visible, but how do you load/display the adsense code ?

[csdude55]

Thanks, LuckyD, that helps a lot!

Dimitri, the link that LuckyD gave has sample code that's better than mine. But this is what I had originally written:

var st, ins;
var placement = 1000; // vertical placement of the banner

if (document.body && document.body.scrollTop)
 st = document.body.scrollTop;

else if (document.documentElement && document.documentElement.scrollTop)
 st = document.documentElement.scrollTop;
</script>

// Then at the banner location
<script>
if (!st || st >= placement) {
 ins = '<ins class="adsbygoogle rect" data-ad-client="ca-pub-xxxx" data-ad-slot="xxxx"></ins>';

 document.write('<div style="blah blah blah">');
 document.write(ins);
}
</script>

<script>(adsbygoogle = window.adsbygoogle || []).push();</script>

<script type="text/javascript">
 if (ins) document.write('</div>');
</script>

[Dimitri]

Hello csdude55,

In fact, I mean that I was wondering how you were succeeding to inject into the page, the adsense code. Because if you listen at the onscroll event, to determine when to populate your ad slot, then it means you are injecting the adsense code after the page has been loaded. You can't do that with a document.write for example.