Google AdSense has added a new ad unit for responsive websites and named it the Responsive ad unit. This is the second major addition by AdSense after introducing Asynchronous AdSense ads.

The traditional AdSense ads are not compatible with the responsive design and a feature like this is one of the most awaited ones for publishers who use responsive layouts on their sites.

Adding a Responsive AdSense ad unit to your site

It’s a little bit tricky for those who are not aware of responsive web design, but this guide will help you to figure out how to implement the new AdSense responsive ad units on your site or blog.

Starting off, you just have to click that New ad unit button under My Ads section in your AdSense account, give it a name and select Responsive Ad unit (BETA) from the Ad Size drop-down list.

Creating Responsive AdSense ad unit

Next, proceed like you generally do when creating normal ad units, and click the Save and Get code button in the end. You’ll get similar code like below:

<style>
.test-ad { width: 320px; height: 50px; }
@media(min-width: 500px) { .test-ad { width: 468px; height: 60px; } }
@media(min-width: 800px) { .test-ad { width: 728px; height: 90px; } }
</style>
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Test Ad -->
<ins class="adsbygoogle test-ad"
    style="display:inline-block"
    data-ad-client="ca-pub-1581655830066906"
    data-ad-slot="4151769254"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Now, how to customize this default AdSense ad unit for your website? You just need to focus on the CSS portion of the ad. See the min-width thing in the 2nd and 3rd lines in above code – it’s the minimum width of the screen, and the information next to it is the responsive width and height of the ad.

Say, if the screen width is 500 pixels wide, the 468×60 unit will be served on the site. In the next line, if the screen width is of 800 pixels, the bigger ad, i.e. 728×90 unit will be shown. You may add more min-width lines and customize it’s values according to your need.

Quick tips

  • Always specify fixed pixel values when setting the width and height of the ad to be served (the very first line under the <style> tag).
  • Avoid using link unit sizes in the responsive ad units, ad they aren’t supported currently. Other than link units, you may any of the supported ad sizes.
  • The reponsive AdSense ad unit will not adapt when your resize or change the orientation of the screen. It will show the ad of relevant size only when the page is loaded in that particular screen width. AdSense team is working on this to make available the typical responsive web screen adaptation soon.
  • Always set a default ad size in case some media queries aren’t supported.

It’s currently in Beta but if your website has a responsive layout, it’s time to try it right away!