Using Asynchronous AdSense Ads with Responsive Design

JavaScript affects the loading time of your web pages. That’s because when you include any JavaScript code in your HTML web page synchronously, the browser will download and execute the script first before it can render the other HTML tags that com

e after the script.

Steve Souders, web performance engineer at Google, says that JavaScript loaded synchronously is the “weakest link” and, in some cases, JavaScript can even block your web pages from rendering.

Asynchronous AdSense Ad Tags

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 do not block the web page from rendering.

Also, if the web server hosting the JavaScript file has become slow or offline, the other HTML elements of your web page would still render just fine in the browser.

Google too offers publishers the option of using non-blocking asynchronous ad tags for serving AdSense ads on their websites. If you wish to offer a better experience to your visitors, and also 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.The default async AdSense tags aren’t however compatible with Responsive Design so here’s a little bit of JavaScript you can use to make your async Google ads responsive.

To get started, open your AdSense dashboard and created ad units for all the different sizes (leader board, rectangles, square, buttons, etc.) Now replace AAA, BBB, etc. in the code with the corresponding IDs of the generated ad units. Also remember to replace ca-pub-XXX in line #9 with your real AdSense publisher ID.

The script calculates the width of the available ad space and then serves the largest ad unit that will fit into that space.

<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>

Asynchronous AdSense Ads with Responsive Design

If you are planning to have multiple AdSense ad units on the same page, the same code will work except that you need to replace google-ads-1 with google-ads-2 in line # 1 and 6. The adsbygoogle.js script in line #40 only needs to included once in your web page. You may as well place it at the bottom on your page just before the the closing </body> tag.

An important disclaimer though. I had official approval for the previous AdSense Responsive script but not for this one yet so you may want to check with your AdSense account manager before making the JavaScript live on your website.

How to Use Google AdSense Ads on your Responsive Website

Google has also officially recommended that website owners use the responsive design approach instead of maintaining separate mobile and desktop website as responsive design “keeps your desktop and mobile content on a single URL.”

Responsive Google AdSense Ads

If you been using Google AdSense Ads on your responsive website, you may have noticed that, unlike your content, Google AdSense ads have a fixed width and they will not shrink or expand based on the screen size of the visitor.
For instance, if you are using the standard 728×90 leaderboard unit on your website, the ad unit may extend well beyond the screen if someone is viewing your website on a mobile phone that can only accomodate 320 pixels.
Google AdSense Ads aren’t responsive by default but there’s a simple JavaScript based workaround that will make your Google Ads respond to the screen size. Best of all, the Google AdSense team has officially approved our Responsive Ads technique.
Before we dive into the code, please take a look at this demo page.

Ads by Google Dash Designs www.dash-to.com
Website and Mobile App Design Quality, Speed and within budget

The demo has exactly one AdSense unit above the fold but the size of the unit will vary depening on visitor’s screen. If you are viewing the demo on a widescreen, you’ll see a leaderboard ad while a mobile user will see a medium rectangle or even a 180×90 link unit depending on the screen resolution.

Making Google AdSense Ads Responsive with JavaScript 

1.             <!-- You can add multiple Adsense Ad units -->

2.             <!-- Just change the ad on Line #4 and Line #7 -->

3.              

4.             <div id="google-ads-1">

5.              <script type="text/javascript">

6.              

7.                       adUnit   = document.getElementById("google-ads-1");

8.                       adWidth  = adUnit.offsetWidth;

9.              

10.                    /* Replace this with your AdSense Publisher ID */

11.                    google_ad_client = "ca-pub-1234567890";

12.           

13.                    if ( adWidth >= 768 ) {

14.                      /* Leaderboard 728x90 */

15.                      google_ad_slot    = "AAA";

16.                      google_ad_width   = 768;

17.                      google_ad_height  = 90;

18.                    } else if ( adWidth >= 468 ) {

19.                      /* Banner (468 x 60) */

20.                      google_ad_slot    = "BBB";

21.                      google_ad_width   = 468;

22.                      google_ad_height  = 60;

23.                    } else if ( adWidth >= 336 ) {

24.                      /* Large Rectangle (336 x 280) */

25.                      google_ad_slot    = "CCC";

26.                      google_ad_width   = 336;

27.                      google_ad_height  = 280;

28.                    } else if ( adWidth >= 300 ) {

29.                      /* Medium Rectangle (300 x 250) */

30.                      google_ad_slot    = "DDD";

31.                      google_ad_width   = 300;

32.                      google_ad_height  = 250;

33.                    } else if ( adWidth >= 250 ) {

34.                      /* Square (250 x 250) */

35.                      google_ad_slot    = "EEE";

36.                      google_ad_width   = 250;

37.                      google_ad_height  = 250;

38.                    } else {

39.                      /* Ad Link Unit (200 x 90) */

40.                      google_ad_slot    = "FFF";

41.                      google_ad_width   = 200;

42.                      google_ad_height  = 90;

43.                    } 

44.           </script>

45.           

46.           <script type="text/javascript"    

47.             src="http://pagead2.googlesyndication.com/pagead/show_ads.js">

48.           </script>

49.          </div>

To get started, create multiple ad units (say 768×90, 468×60 and 300×250) inside your AdSense dashbaord and replace the relevant google_ad_client (ca-pub-1234) and google_ad_slot (AAA, BBB, etc.) identifiers in the code with your own values.

Next, copy-paste the above snippet anywhere on your web page and, based on the size (resolution) of the user’s device, the most appropriate AdSense Ad format will get served automatically. If you wish to include multiple AdSense ad units on the same responsive website, just use the same snippet of code but increment the ID (line #4 & line #8) such that they read google-ads-1, google-ads-2 and so on.