Go4Expert

Go4Expert (http://www.go4expert.com/)
-   JavaScript and AJAX (http://www.go4expert.com/articles/javascript-tutorials/)
-   -   How to Load Advertisements Asynchronously (http://www.go4expert.com/articles/load-advertisements-asynchronously-t22596/)

shabbir 1Jul2010 11:02

How to Load Advertisements Asynchronously
 
Web-pages can take take time to load for variety of reasons and if your page takes lot of time to load you have to identify areas where most of the time is taken. I have seen that in most cases it is always the Advertisements. At least that was the case for Go4Expert.

My next step was to load the ads asynchronously and so I started testing DFP by Google and other adservers to see if I can have ads without hindering the normal flow of page loading. Astonishingly I could not find a single yet reliable adserver that supports asynchronously loading of ads. DFP is still testing the same with select publishers. See here. So I was left with only one option to do it myself.

The Implementation



I have done this using very simple yet very effective technique of iframe and loading the frames after the complete page is done for user.

Put the ad code in an HTML file and upload it to the server.

Example : http://www.go4expert.com/ads/adauth.html - This is the same file which will be loaded in the right side of this article just above the author details.

Now add a needed div where you want to show an Ad.

HTML Code:

<div id="AdAuth"> </div>
And now the final JavaScript to load the Ad in the needed Div after the complete page loading is complete.

Code:

<script type="text/javascript">
(function(){
  function loadAds() {
    var c4 = "<iframe frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" width=\"300\" height=\"250\" src=\"http://www.go4expert.com/ads/adauth.html\"></iframe>";
        var adauth = document.getElementById('AdAuth'); if(adauth!=null) adauth.innerHTML=c4;
  }
  var oldonload = window.onload;
  window.onload = (typeof window.onload != 'function') ?
    loadAds : function() { oldonload(); loadAds(); };
})();
</script>

The important part is
Code:

  var oldonload = window.onload;
  window.onload = (typeof window.onload != 'function') ?
    loadAds : function() { oldonload(); loadAds(); };

Where you load the iframe only after the complete page is loaded. This makes user experience much faster.

Disadvantages



Remember this is not compatible with Google Adsense and you should not be using this technique with Adsense. Google Adsense clearly mentions that you cannot load Adsense in a frame different from your content frame. Do not get discourage because I have seen that Google Ads never blocks the page loading and I assume they have asynchronously loading of ads already in place.

coderzone 1Jul2010 21:12

Re: How to Load Advertisements Asynchronously
 
Is this Asynchronous?

shabbir 1Jul2010 21:21

Re: How to Load Advertisements Asynchronously
 
Quote:

Originally Posted by coderzone (Post 69819)
Is this Asynchronous?

Why Not?

shabbir 2Jul2010 00:46

Re: How to Load Advertisements Asynchronously
 
Similar techniques is mentioned in the IAB Official Document as well

http://www.iab.net/media/file/rich_m..._practices.pdf

shabbir 2Aug2010 10:56

Re: How to Load Advertisements Asynchronously
 
Nominate this article for Article of the month - Jul 2010

Mogan 12Aug2010 21:33

Re: How to Load Advertisements Asynchronously
 
:undecided can any one teach me how to hack smtp sever password and unsername and all so webmail username and password...

shabbir 21Aug2010 16:18

Re: How to Load Advertisements Asynchronously
 
Vote for this article for Article of the month - Jul 2010

Full Zip Hoody 30Sep2010 01:27

Re: How to Load Advertisements Asynchronously
 
yes, ads usually take most of the time on the page load, but widgets do to. Share, social or other embedded type or plugin type take sometimes even more because most of the times they are not compatible or bad coded.


All times are GMT +5.5. The time now is 14:31.