adsenseLoader.js
adsenseLoader.js copied to clipboard
osvaldasvalutis
I have tried adsense lazloading
But if i have ads in sidebar they are becoming visible only after scrolling to footer
adsbygoogle doesnt push in order
I have this issue too!
Using bootstrap, the code is like that:
<div class="row">
<div id="MainColumn" class="col-xs-12 col-sm-8">
<div class="adsense"><ins>.....</ins></div>
<p>Lorem ipsum....</p><!-- It's a bigger content -->
</div>
<div id="Sidebar" class="col-xs-12 col-sm-4">
<div class="adsense"><ins>.....</ins></div>
</div>
</div>
In the viewport, the div#Sidebar is side by side with div#MainColumn. In other words, both banners are visible in the viewport, but in the code, the div#Sidebar is almost in the footer. When the page is loaded, the adsense banner inside div#Sidebar doesn't load, only the banner in the div#MainColumn.
If I scroll the page to the bottom (the real code position for the div#Sidebar), finally the banner inside div#Sidebar is loaded.
How to solve this? Tks!
I have more information about this issue. In my layout, I have 2 columns:
COL 1: 66% float left A - 1 ad slot visible in viewport; B - Many blocks, images and texts (only the top content visible in viewport); C - 1 adslot not visible in viewport; D - Some texts and images not visible in viewport; E - 2 adslots not visible in viewport;
COL 2: 33% float left F - 2 ad slots visible in viewport; G - Some images not visible in viewport;
With this, the 2 ad slots (item F) should be loaded, because is visible in viewport, like the item A. But doesn't load.
Then I have removed the 3 "invisible" ad slots (items C and E). After that, the 2 ad slots in the COL 2 (item F) was loaded correctly.
The 3 invisible ad slots in the COL 1 causes the problem (items C and E). And have more... If i remove the last 2 invisible ad slots (item E), 1 ad slot in COL 2 (item F) was loaded.
In other words, the number of invisible ad slots breaks the load.
PS.: I'm brazilian, sorry my bad english.
I create an image to show more what happens.
When I load the site, the adslots 1, 2 and 3 should be loaded, because this banners are in viewport area. But only the adslot 1 loads.
I scroll the site to adslot 6 position (bottom of the column 1), and now the adslots 2 and 3 are loaded.
Curiosly, if I remove the adslots 4, 5 and 6, the adslots 2 and 3 loads correctly! In other words, the "invisible" adslots 4,5,6 causes the problem to load the adslots 2 and 3 (which are visible in viewport).
Curiosly too, if I remove only adslots 5 and 6, the adslot 2 loads!
Then I thought that exists a problem with the number of adslots that are invisible.
I don't know if is a problem with the plugin, or with my HTML/CSS or with de Adsense settings.
Your issue cannot be fixed (at least with) adsenseLoader.js because
When an element gets visible adsenseLoader.js do one job
execute the following code (adsbygoogle = window.adsbygoogle || []).push({});
but adsbygoogle.js loads ads in the order of which it is assigned in HTML
For example in your case
<html>
<head>
<scrip src="adsbygoogle.js"></script>
<head>
<body>
<!--Ad code 1 -->
<!--Ad code 4 -->
<!-- some blah blah stuff -->
<!--Ad code 5 -->
<!--Ad code 6 -->
<!--Ad code 7 -->
<div id="right side bar">
<!--Ad code 2 -->
<!--Ad code 3 -->
</div>
</body>
<style>
.right .side .bar {float: right;}
</style>
</html
So the real ad loading order is 1,4,5,6,7,2,3
When adcode 2 gets visible (adsbygoogle = window.adsbygoogle || []).push({}); is being executed but the adsbygoogle.js pushes ad into the container of adcode 4
Hope you understand what I said
Hey @Niresh12495 , I appreciate your response. I understood what you wrote. Then, when we are using sidebars, is much better to ignore the lazy load banners. Load adsense async already helps a lot.
With this plugin, do you know how to load ALL adsense (asunc) with the page load?
Now, I am doing only this: $( '.adsense' ).adsenseLoader();
Maybe I have to use a higher value for the laziness option.
Thanks!
This could do it, what im suggesting here is to defer load adsense javascript so ads will be load after content
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
With this plugin, do you know how to load ALL adsense (asunc) with the page load?
While reading this yesterday i realized my answer was wrong
function loadalladsatonce() {
[].forEach.call(document.querySelectorAll('.adsbygoogle'), function(){
(adsbygoogle = window.adsbygoogle || []).push({});
});
}
// Then call this function when you want to load all ads, with if condition or something
loadalladsatonce();
@diegosomar OK if you want to try LazyLoading Ads, Here you go use LazyHTML or LazyAdsense Both of These works flawlessly.
Here are more explanation about Lazy Loading Adsense Ads