Without Google Ads, my HTTPS webpage loads in about 500ms. With Google Ads, the same webpage takes 2-5 seconds to load. I have two banner ads (one at the top and one at the bottom). Yes, it renders the entire page before the ads, but I still think it's clunky to have the browser spinning while it waits for the ads to finish.
Is there any way with Javascript to finish page loading before the ads, and then just load the ads in the background? Basically, trick it into thinking the entire page is already loaded?
Current code:
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- My Ad Banner -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="myid"
data-ad-slot="myid"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Looking at the waterfall for my site, it doesn't look like the adsbygoogle.js is causing the load indicator. Instead, it's the actual ad content itself. For example, this object (the banner ad) doesn't even start loading until 1.8 seconds (long after my entire page has already loaded): tpc.googlesyndication.com/simgad/AdID
Thanks!
Try this article.
The trick is to put your ad initializing and loading logic in window's onload event:
<script>
window.onload = function(){
...
};
</script>
This is my ultimate Vanilla JS solution:
<script async defer src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).onload = function () {
[].forEach.call(document.getElementsByClassName('adsbygoogle'), function () {
adsbygoogle.push({})
})
}
</script>
A Vanilla solution is to leave all your ad code as is, except to remove the script tag, and then add to your javascript
function loadGoogleAds() {
var scriptTag = document.createElement('script');
scriptTag.setAttribute('src', '//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js');
scriptTag.setAttribute('type', 'text/javascript');
scriptTag.setAttribute('async', 'async');
document.body.appendChild(scriptTag);
}
window.addEventListener("load", loadGoogleAds);
Disclaimer: as with the other answers to this question it is assumed that Google does not disapprove of methods to improve page performance
Ads_onscroll_event
Naturally, this is how an original ad unit code look.
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- leaderboard -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
First of all, remove below script from all existing ad units.
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
And
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Now it will appear like this
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="1234567890"></ins>
This approach will load ad unit once user scroll your web page add this on page that has ads:
<script type="text/javascript">
//<![CDATA[
var la=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===la||0!=document.body.scrollTop&&!1===la)&& (!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),la=!0)},!0);//]]>
</script>
And
<script>
(adsbygoogle = window.adsbygoogle || []).onload = function () {
[].forEach.call(document.getElementsByClassName('adsbygoogle'), function () {
adsbygoogle.push({})
})
}
</script>
No matter how many google ads you have on the page, put ONE copy of the external js within the head of your page ... it's OK at the top since it's async.
Put the ins supplied by google where the ad is to appear.
At the bottom of your page, just before the end body tag, put the script to push the ad.
Now the ad will load after your page is complete !
If you want to add a second adsense ad on the page, do not repeat the adsbygoogle.js (one copy is enough) ... put the second where it is to be displayed ... add another push at the bottom of your page so it looks like this:
(adsbygoogle = window.adsbygoogle || []).push({});
(adsbygoogle = window.adsbygoogle || []).push({});
Place the code for initiating the ad's at the bottom of the page just before the closing /body> tag
This topic has been already answered here under lazy load topic, But this is actually defer loading.
How to lazy load new Google Adsense code using JS
<script>
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX";
element.async = true;
element.setAttribute('crossorigin', 'anonymous');
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>
This JavaScript is cross-browser compatible and works with old browsers too.
If you are looking for Lazy Loading Adsense Ads, Check this answer
How to Lazy Load Adsense Ads?
(This solution requires jQuery)
Remove the <script> tag from your code and add this to your javascript:
$(function() {
$.getScript("//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js");
});
This will do an AJAX call to get the script, rather than using the async browser method. This should result in not having the loading indicator.
ref: http://api.jquery.com/jquery.getscript/
This is what I did, after noticing adsense slows down page loading/rendering:
first of all add this code to your <Body> tag:
<body onLoad="initialize_page();">
Now, put only one adsense script code, above the <HEAD> tag:
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
Remove adsense <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> from all of your adsense code(one copy at the header is enough).
Remove all (adsbygoogle = window.adsbygoogle || []).push({}); from your adsense code from your page. We will be using them over our initialize function.
To our initialize_page() function, add this code:
function initialize_page()
{
(adsbygoogle = window.adsbygoogle || []).push({});//this is for the first adsense
(adsbygoogle = window.adsbygoogle || []).push({});//this is for the second
(adsbygoogle = window.adsbygoogle || []).push({});//this is for the third
}
This code is suitable for 3 adsense on your page. if you use only 2 or 1 adesnes, just remove (adsbygoogle = window.adsbygoogle || []).push({}); from the function respectively.
I put
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
just before closing the body tag and removed it from every adsense ad.
Ads show fine and the page loads very fast.
After many tests I found that sometimes ads don't show in safari.
I am inserting a shopify store into my website. They have a widget they use that pulls up a collection and you can add to cart and check out. The embedded code they gave me is below and should be inserted between .
<script type="text/javascript">
var ShopifyStoreConfig = {shop:"glow-station-shop.myshopify.com", collections:[14849869]};
(function() {
var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true;
s.src = "//widgets.shopifyapps.com/assets/shopifystore.js";
var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
})();
</script>
I then have to place the following code where I want them to click in my actual site.
<a href='#shopify-store'>View my Store</a>
My question is what do I need to change to that I can have multiple instances of this connecting to different products. An example would be a "view my store" and a "view my store2" button both connecting to different collections.
The "View my store2" code is the same as the 1st but the collections:[14849869] changes to a different number.
You could create a index.html with several iframes. Each iframe would have the code for its store and <base target="_parent" />
I keep getting
Unsafe JavaScript attempt to access frame with URL http://lolfantasy.net/ from frame with URL http://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-874208342468282…535&u_cd=24&u_nplug=8&u_nmime=81&biw=1520&bih=454&fu=0&js=uds&eid=37464000. Domains, protocols and ports must match.
when using adsense with Turbolinks.
I'm using the code from this page. It still doesn't work. The ad shows for a split second sometimes but disappears afterwards.
Try this solution using Turbolinks 5
Head
<script src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" data-turbolinks-eval="false"></script>
Body
Adsense code
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-XXXXX"
data-ad-slot="XXX"
data-ad-format="auto"></ins>
Javascript
function adsenseAds() {
var ads = document.querySelectorAll('.adsbygoogle');
ads.forEach(function(ad) {
(adsbygoogle = window.adsbygoogle || []).push({});
});
}
document.addEventListener('turbolinks:load', adsenseAds);
Take a look at this article and see if that can help you.
http://reed.github.io/turbolinks-compatibility/google_adsense.html
The key part is on page:fetch they are clearing the ads (Example in CoffeeScript)
clearAds: ->
#ads = {}
window.google_prev_ad_slotnames_by_region[''] = '' if window.google_prev_ad_slotnames_by_region
window.google_num_ad_slots = 0
I would like to place a javascript (adsense) code inside the post (not above or after the post). It will be a HTML page.
Is there any way i can put my adsense code in external Js file and i will use one function to display it.
adsense code looks something like
<script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxxxxxxxxx";
google_ad_host = "pub-xxxxxxxxxxxxxxxx";
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
So if i call a function CallMe() which will start showing ad wherever i have used the function. In future if i would like to replace ad code with another code then i dont want to go to each post and replace it. I will just replace the adcode from js file.
I am a newbie and have just started learning JavaScript so i am really not aware if it can be done or not.
Any suggestion ?
Create file called AdSense.js with the following code:
google_ad_client = "pub-xxxxxxxxxxxxxxxx";
google_ad_host = "pub-xxxxxxxxxxxxxxxx";
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 336;
google_ad_height = 280;
function ApplyAdSense() {
var oScript = document.createElement("script");
oScript.type = "text/javascript";
oScript.src = "http://pagead2.googlesyndication.com/pagead/show_ads.js";
document.getElementsByTagName("head")[0].appendChild(oScript);
}
Now whenever you want adsense in your code, first include the file:
<script type="text/javascript" src="AdSense.js"></script>
Then call the function:
<script type="text/javascript">
ApplyAdSense();
</script>
This way, until you call the function nothing happens.. and you can also comment the code inside the function to disable adsense throughout all your site.
Wherever you want the ad to show up, place this code (assuming you have a function called CallMe).
<some html>
<script type="text/javascript">CallMe();</script>
</some html>
If your concern is about the page loading time, Adsense released the asynchronous version of their Adsense code. Please see https://support.google.com/adsense/answer/3221666?hl=en
I'm playing around with the new Google +1 button and I've attempted to set up a simple demo of it.
This is my code:
<html>
<head>
<title>Plus One</title>
</head>
<body>
<!-- Place this tag where you want the +1 button to render -->
<g:plusone callback="plus_one_callback" href="http://www.testurl.com/"></g:plusone>
<!-- Place this tag after the last plusone tag -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
function plus_one_callback(){
alert('callback');
}
</script>
</body>
</html>
However it does not render the button and there is no error message in my console.
Here is a screengrab of my firebug net panel:
Anyone know why this happens?
It won't work because as of Firefox 3 you can't run external JS scripts locally. Or to be more exact, you'll run into problems when firefox sees "file://" in the url. This question was also answered here. It probably would work if you used another browser.
If you really need this kind of stuff to work locally, however, there is a solution. You can install WAMP or XAMPP to run a local server.