OK to only load banner when it's visible?

Forum Moderators: martinibuster

Message Too Old, No Replies

OK to only load banner when it's visible?

csdude55

1:09 am on Dec 29, 2016 (gmt 0)

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

5:25 pm on Dec 29, 2016 (gmt 0)

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

I think this will answer your question

Dimitri

7:26 pm on Dec 29, 2016 (gmt 0)

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

8:16 pm on Dec 29, 2016 (gmt 0)

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

11:54 pm on Dec 30, 2016 (gmt 0)

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.