How to Use Asynchronous Adsense Ads With Responsive Design

by admin Date: 15-07-2013 javascript asynchronous adSense ads responsive design


We know that JavaScript affects the loading time of our web pages.

That’s because when we include JavaScript code in our HTML web page, the browser will download and execute the script first before it can render the other HTML tags that come after the script.

Steve Souders, the Head Performance Engineer at Google where he works on web performance and open source initiatives, said that synchronously JavaScripts is the “weakest link” and, in some cases, JavaScript can even block your web pages from rendering.

Fluent 2012: Steve Souders, "Your Script Just Killed My Site"

Services like Google Analytics, Google DFP, Twitter and Facebook have therefore switched to asynchronous JavaScript for serving advertisements and widgets.

This is a more efficient method as the scripts load in parallel and don't block the web page from rendering. Moreover, if the web server hosting the JavaScript file has become slow or offline, the other HTML elements of your web page would still render in the browser.

Google offers publishers the option of using non-blocking asynchronous ad tags for serving AdSense ads on their websites.

If you want to offer a better experience to your visitors, and improve your site’s page speed, it may be a good idea to migrate your old AdSense ad code to the new asynchronous JavaScript tags.

We can be noticed that the default async AdSense tags aren’t compatible with Responsive Design therefore we have to use some JavaScript to make our async Google ads responsive:

1. First of all, open your AdSense dashboard and created ad units for all the different sizes (leader board, rectangles, square, buttons, etc.)

2. Replace AAA, BBB, etc. in the code with the corresponding IDs of the generated ad units. (remember to replace ca-pub-XXX in line #9 with your real AdSense publisher ID)

3. Here the code:

 <div id="google-ads-1"></div>

 <script type="text/javascript">

  /* Calculate the width of available ad space */

  adWidth = document.getElementById("google-ads-1").offsetWidth;

  /* Replace ca-pub-XXX with your AdSense Publisher ID */

  google_ad_client = "ca-pub-XXX";

  /* Replace AAA, BBB, etc. with the respective Ad Slot IDs */

  if ( adWidth >= 728 )

  google_ad_slot = ["AAA", "728", "90"];  /* Leaderboard 728x90 */

  else if ( adWidth >= 468 )

  google_ad_slot = ["BBB", "468", "60"];  /* Banner (468 x 60) */

  else if ( adWidth >= 336 )

  google_ad_slot = ["CCC", "336", "280"]; /* Large Rectangle (336 x 280) */

  else if ( adWidth >= 300 )

  google_ad_slot = ["DDD", "300", "250"]; /* Medium Rectangle (300 x 250) */

  else if ( adWidth >= 250 )

  google_ad_slot = ["EEE", "250", "250"]; /* Square (250 x 250) */

  else if ( adWidth >= 200 )

  google_ad_slot = ["FFF", "200", "200"]; /* Small Square (200 x 200) */

  else if ( adWidth >= 180 )

  google_ad_slot = ["GGG", "180", "150"]; /* Small Rectangle (180 x 150) */

  else

  google_ad_slot = ["HHH", "125", "125"]; /* Button (125 x 125) */

  document.write (

  '<ins class="adsbygoogle" style="display:inline-block;width:' + google_ad_slot[1] + 

  'px;height:' + google_ad_slot[2] + 'px" data-ad-client="' + google_ad_client + 

  '" data-ad-slot="' + google_ad_slot[0] + '"></ins>'

  );

  (adsbygoogle = window.adsbygoogle || []).push({});

 </script>

 /* If you have multiple Ad Units, include this line only once */

 <script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">

 </script>

IMPORTANT:

If you want to have multiple AdSense ad units on the same page you have to replace google-ads-1 with google-ads-2 in line # 1 and 6.

You have to include the adsbygoogle.js script in line #40 only once in your web page.

 
by admin Date: 15-07-2013 javascript asynchronous adSense ads responsive design hits : 4743  
 
 
 
 

Related Posts