X

Implementing Google AdSense Asynchronous Tag and Responsive Ad Unit

For very long time Google AdSense program was not that much friendly for the publisher as it is now. Google is trying to give more control to publishers 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 of the website owners. One can make a very good amount of money with Google AdSense, but when it comes about controlling how ads will be displayed publishers had less options.

Over the 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 on ads than before.

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

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 on AdSense ads. Google also recognize this problem and has introduced asynchronous tag an AdSense ad code. Asynchronous ad code helps to improve load speed of pages containing AdSense ads.

Google AdSense Asynchronous ad code is built with modern <script async> mechanism, which helps user to load the web page even there are any problem 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 web page may render slowly or in some case JavaScript can block web page from rendering.

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

Google AdSense Asynchronous tag is in bets 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 go to My Ads, there you will find all ads you are currently using.

Click on Get Code

Choose Asynchronous (Beta) from Code Type

Copy the code and paste it or replace with old AdSense code on your web page where you want 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:

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

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

AdSense Responsive Ad Unit

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

This invented the need of responsive web design which can adjust the layout of website according to screen size from where the website is being accessed. If a website is accessed from 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 it shape to fit the screen size of that Smartphone. This gives website visitor a 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 problem, viewing the website on 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 on the mobile device it will cover up lot of screen size, which your visitor may not like.

With the growing need of 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 is equals to or greater than 800 px then display ad of 336×280 px and if the screen size is of 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 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.

<style>
.adname { width: 320px; height: 50px; }
@media(min-width: 500px) { .earningguys-336 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .earningguys-336 { width: 728px; height: 90px; } }
</style>

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 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 Beta stage, and a lot of improvements will come in the future.

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

Blog For Success

Download Free eBook and learn how to write for your blog.

You have Successfully Subscribed! Please check your mail account for confirmation.