How to Use Responsive Google AdSense Ad Units Properly?

Posted by on Mar 4, 2014 in Website ·

Responsive design is a common thing for every website these days. All these websites adapt their view and structure according to the screen size of the devices they load on. However, this caused an issue with normal Google AdSense ads.

Suppose I have placed 728×90 ad in the header of my theme. On mobiles, that ad used to hide partially, because of the lower screen resolution. This used to cause a huge design issue and one needed to disable the responsiveness of the theme or template of his website.

But now, Google AdSense has come up with a solution to this problem. They have started the responsive ad unit. This ad unit adjusts its size according to the space available to it.

This all needs some CSS decorations. Otherwise the ad unit doesn’t work. You may see a blank space instead of an ad. In this post, I am sharing all the CSS decorations required to use responsive ad unit of AdSense.

Responsive Google AdSense Ad Unit

(Image : cyberchimps.com)

Creating and using responsive ad units of Google AdSense

Creating a responsive ad unit

Before we begin further, you must have a responsive ad unit created in your AdSense account.

Step 1 : Login to Google AdSense. Go to “My Ads” section and click on “New Ad Unit” button.

Step 2 : Give your unit a good name. Now, at the Ad Size option, choose Responsive ad unit (BETA) option.

Responsive Ad Unit option in Google AdSense

Click on “Save and get code” button.

Step 3 : Copy the entire code and save it in a text file for now. The code should look like below.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- My First Responsive Ad unit -->
<ins class="adsbygoogle"
 style="display:block"
 data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
 data-ad-slot="1234567890"
 data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Note : The newly created unit takes at least 4 to 5 hours to show the ads. If you have freshly created a unit, it may not show ads. So please let 4 to 5 hours pass after the unit creation.

Showing the responsive ads on your website

Step 1 : First of all, know the space available for a particular ad on various screen sizes. Then, modify the following CSS code accordingly. The sequence of each line in the following code is very important. Note that all the screen sizes are arranged in ascending order.

.my-adbox { width:320px; height:50px }
@media (min-width:320px) { .my-adbox { width:300px; height:250px; } }
@media (min-width:480px) { .my-adbox { width:336px; height:280px; } }
@media (min-width:500px) { .my-adbox { width:468px; height:60px; } }
@media (min-width:800px) { .my-adbox { width:728px; height:90px; } }
@media (min-width:1080px) { .my-adbox { width:970px; height:90px; } }

Understanding the CSS code :

The CSS code determines the size of browser window in which the page is being loaded. Then it sets the width and height of the div with class my-adbox according to it.

The widths and heights of the div are standard ad sizes only.

Step 2 : Now, create a <div class=”my-adbox”> wherever you want to display the ad. Paste the responsive ad code inside that div.

So, the complete code will look like below.

<div class="my-adbox">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- My First Responsive Ad unit -->
<ins
 style="display:block"
 data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
 data-ad-slot="1234567890"
 data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

Do not modify the code generated in Google AdSense dashboard. It is against Google’s policies. We are just embedding the code inside a <div> of our choice, without modifying the ad code.

I hope, this guide helped you to show responsive ads on your blog or website. In case you have any doubt or query, do not hesitate to drop a comment below.

Last updated on : March 7, 2014.

One Comment on “How to Use Responsive Google AdSense Ad Units Properly?”

Leave a Reply