How To Create Responsive Ad Units in AdSense?


Create Responsive AdSense Ad Units
If you have spent any time surfing the internet on your mobile device, looking for information or reading a blog post, you will know how important and satisfying a mobile-optimized website is to a reader. The trend of using mobile devices to connect to the internet has sharply risen, which means webmasters should have websites that cater to the needs of varying screen sizes and varying resolutions. Having a responsive design not only means having a responsive website theme layout, but also having responsive elements, down to the small images and ad units. Speaking of which, Google AdSense has now announced support for responsive ad units, which means that now, you can even change the size of those ad units dynamically depending on the user agent!
Recommended for you: How To Serve Responsive Images On Your Site

One of the biggest challenges publishers currently face is designing websites that adapt to different screen sizes, resolutions and user experiences. People have been asking for responsive ad units to help them deliver the best possible user experience on their pages. So the Google AdSense has finally listened to the feedback, and has now made responsive ad units available as a beta feature.

The responsive ad-units use the new asynchronous ad code. This code can be used to set the size of the ad code directly via Cascading Style Sheets (CSS), which allows webmasters to dynamically specify the size of the ad that will be served. Ad sizes previously were fixed, and weren't supposed to be tampered with.

How to create responsive ad units in AdSense?

Step 1: Generating ad code

To create a responsive ad-unit, you first have to log into Google AdSense, and create an ad unit, just like you would create an ordinary (non-responsive) ad-unit. 

The only difference is, when creating an ad unit, you need to change one option. While creating an ad unit, you will see a drop-down labelled Ad Size. Select the Responsive Ad Unit (BETA) option. Only difference from this and the normal process is, you won't see the Code Type option selector, because Responsive ads already use asynchronous code.

Step 2: Place the ad unit

Now that have the code, this is the easy bit. Simply insert that code into your website source HTML, or in a widget or post/page. You can put this code anywhere you can put the normal non-responsive code.

Step 3: Adjusting the size

Now, you can change the size of the ad-units based on the user agent. This will make use of media queries in CSS to determine the screen size/resolution of the client.

For example, a normal non-responsive ad unit's CSS might look something like this;

.adslot_1 {
width: 320px;
height: 50px;
}

Whereas the CSS for the responsive ad unit would look like this;

.adslot_1 {
width: 320px;
height: 50px;
}
@media (min-width:500px) {
.adslot_1 {
width: 468px;
height: 60px;
}
}
@media (min-width:800px) {
.adslot_1 {
width: 728px;
height: 90px;
}
}

Note how @media queries are used to detect the screen-size/resolution of the client.

Things to remember


  • While changing the size of the ad-units using CSS, make sure the dimensions you enter match Google AdSense's supported ad sizes
  • Media queries might not work for older browsers, so always set a default size
  • These new ad units are responsive on the initial load only. Subsequent changes to screen orientation and screen resolution will not effect these ad units. But Google is working to improve on this, and make it fully responsive

Have you tried out the responsive ad units yet? What are you waiting for? Try them out now, and tell us what you think about them. And leave your responses/opinions in the comments section below. Cheers :)

Need Quick Help within 24 Hours? ASK NOW



If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

13 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

  1. I have not yet tried on my blog. I was waiting for the nice guide for that. Thanks for sharing Qasim bro :)
    Now i will surely use it on my blog

    Regards
    Spicy Tech Tips

    ReplyDelete
  2. Yeah!! I found for what I was searching for...!!! Thanks alot MBT for Such an Informative Post!
    I also apply it on my blog.

    Regards:
    ●●●●● Google Adsense Account Approval Tricks ●●●●●

    ReplyDelete
  3. Nice Post Buddy and should be interesting to new adsense account holders...

    ******TheWildBlogger*****

    ReplyDelete
  4. Nice post. I will apply this on my blog too... Thank u so much !!

    Best Android Smartphones of 2013

    ReplyDelete
  5. Buddy any information on why the images with WHITE colour when uploaded on Picasa using Blogger turns greyish?

    Notice this post image, wherever there is a white colour, it has turned light greyish (don't know the exact colour). Previously this problem was not their, suddenly it has arrived.

    Please help me with this. Thanks in advance.

    ReplyDelete
  6. ThnQ Dear its great article , I want to know about google that is there any new update becuase I have lost my traffic as well as adsense earning from these past 2 weeks

    Best Regards
    Tips and Tutorials

    ReplyDelete
  7. i love this post! Gonna start make money from google Adsense now!!

    ReplyDelete
  8. Thank bro my name is faizan this is what i was looking for this helps me lot to get about responsive adsense unit Regards faizan shah

    ReplyDelete
  9. Hello Qasim, I am commenting from Online MBA Programs: thanks for the tutorial, you make its implementation look very feasible.

    ReplyDelete
  10. This comment has been removed by the author.

    ReplyDelete
  11. Thanks for your helpful tutorial. I was very keen to know how to make ads responsive, you solved my problem. Thanks a lot.
    Regards Technogyd

    ReplyDelete
  12. Please guide step by step full tutorial. How to make it with other than google adsense. Please provide example with code.

    ReplyDelete
  13. Thanks man for your tutorial, i was setting bsa ads on my site then i found your post and it helped me alot.
    Regards Muhammad Ahmed

    ReplyDelete