Implementing Google AdSense Asynchronous Tag & Responsive Ad

For a very long time, the Google AdSense program was not that much friendly for the publisher as it is now. Google is trying to give publishers more control, like how publishers can display AdSense ads on their website or blog, which type of ads they don’t want to display, etc.

From the launch of Google AdSense, this is the favorite earning program for most website owners. One can make a very good amount of money with Google AdSense, but publishers had fewer options when it comes to controlling how ads will be displayed.

Over time, Google understood these problems and started giving publishers more power and control. Google rolled many new ad sizes, allowing and blocking ads and now Responsive and Asynchronous Ad Code.

Now, one can display responsive ads or Asynchronous Ad, which loads fast. AdSense publishers are getting more control over ads than before.

The new ad units Responsive ads and Asynchronous Ad can give more power to AdSense Publishers. Please have a look at these new ad units and how to implement them.

Table of Contents

Google AdSense Asynchronous Ad Code

Internet is getting fast day by day, and website load speed is also improving due to faster server, high-speed bandwidth, Content Delivery Networks (CDN), etc. Search engine like Google also understands the importance of fast website speed, and because of that, they have included an algorithm which gives preference to sites which loads fast.

Your site is fast, but your AdSense ads are not loading as fast as your website, and you don’t have any control over AdSense ads. Google also recognizes this problem and has introduced asynchronous tag and AdSense ad code. Asynchronous ad code helps to improve the load speed of pages containing AdSense ads.

Google AdSense Asynchronous ad code is built with a modern <script async> mechanism, which helps users load the web page even if there are any problems loading ads. Normally while requesting a web page, JavaScript code is downloaded first (If JavaScript code is on the web page) by the browser, and after that browser renders the page. If there is any problem, a web page may render slowly, or in some cases, JavaScript can block the web page from rendering.

Using the new Google AdSense Asynchronous ad code, AdSense ads will not disturb another part of web pages from rendering; thus, web page loads fast.

Google AdSense Asynchronous tag is in the beta stage, and one can expect some more improvements in Asynchronous ad code.

Meanwhile, anyone can use Asynchronous ad code on their web page to speed up web page load time.

Implementing Google AdSense Asynchronous Ad Code

Implementing Google AdSense Asynchronous Ad Code is extremely simple. Login to AdSense goes to My Ads; you will find all ads you are currently using.

Click on Get Code

Choose Asynchronous (Beta) from Code Type

Please copy the code and paste it or replace it with old AdSense code on your web page to display AdSense ads.

If you are using more than one AdSense ad unit, you can add adsbygoogle.js ad code once on the header of the web page and the rest of the code where you want to show your ads like:

This code on the header of the page:

And code from <!—ad1_300x250 –> on the place where you want to show ads. In this way, you will add less code to your page.

AdSense Responsive Ad Unit

These days market is filled with various gadgets from smartphones to Tablets; one can be online, and access websites from any of these devices, and they are not limited to use the computer to access websites.

This invented the need for responsive web design, which can adjust the layout of a website according to screen size from where the website is being accessed. If a website is accessed from a PC, it can be run in normal size, and if the site is accessed from Smartphone where screen size and resolution are different from PC web page will resize its shape to fit the screen size of that Smartphone. This gives website visitors great comfort to view website without any trouble, and they can comfortably read content of the website.

One can create a responsive website, but what about AdSense ads they have placed on their website, which are not responsive. This creates a problem; viewing the website on a Computer may look great even with ads, but on mobile devices where screen size is different, ads may annoy visitors, and they can accidently click on ads, which they never wanted to do.

Think like this you placed 336×280 size ads on your web page, which looks great on the computer, but the mobile device will cover up lot of screen size, which your visitor may not like.

With the growing need for responsive ad units; finally Google AdSense introduced responsive ad units which can display different size ads on different sized screen resolution. For example, if the screen resolution equals to or greater than 800 px, then display ad of 336×280 px and if the screen size is 500 px or less, then show the ad of 200×200 px ad.

This will help mobile device visitors to show small ad, which will not annoy them, and they can view the site as they view on a computer.

Implementing Responsive AdSense Ad Units

Implement Responsive Ad Units are also extremely simple. Login to AdSense account go to My Ads and create a new Ad unit.

Choose Responsive Ad Units from AdSize

Choose custom channel and ad style

Click save and get code

Now you may need to customize this ad code a little bit. Look at the ad code, you will find CSS section at the starting of the code; you may just need to edit this section.

In this style code, you can see if minimum screen width is 500px then 468×60 ads will be shown. If screens minimum width is 800px, then 728x90px ad will be shown. Now you can change ad size according to your need, you may want to display 336×280 ad on screen size of 800px and 200x200px ad on 500px screen size.

Please make sure you choose the ad size, which is available on AdSense. You can’t create a custom ad size only AdSense supported ad size is allowed in responsive ad units.

AdSense Responsive Ad Unit is also in the Beta stage, and many improvements will come in the future.

Hope you find this post useful and don’t forget to share your views and expertise.