How to use Google AdSense Ads on Responsive Websites

Responsive web design makes your website fluid and look good across all screen sizes be it desktop, tablets phones or even the Television. Don’t be confused with Responsive and Adaptive designs, both are different. We’re not going to discuss about the differences, let’s concentrate on how to use Google Adsense Ads on Responsive Websites.

If you’re thinking that you may get banned for changing or altering Google Ads, no no …even Google also recommends the responsive design approach for improved indexing since “it keeps your desktop and mobile content on a single URL.”

Responsive Google Ads

If you’re using any responsive web design and you have Google Adsense ads on it, then you will notice that the Ads don’t change their width or adjust as the content does.This is because the Google ads have a fixed width and they will not shrink or expand based on the device size.

For example, if you are using the leader-board 728×90 unit on your website, the ad unit may extend well beyond the screen if someone visits your website on a (320 pixels wide) mobile phone or one of the lower resolution tablets.

Google AdSense Ads aren’t responsive by default but you can use a bit of JavaScript code to make them respond to the screen size. You create multiple ad units (say 768×90, 468×60 and 300×250) and based on the size (width) of the visitor’s device, the most appropriate format get  served.

Here’s the relevant JavaScript code:

<script type="text/javascript">
    google_ad_client = "ca-publisher-id";
    if (window.innerWidth >= 800) {
        google_ad_slot = "ad-unit-1";
        google_ad_width = 728;
        google_ad_height = 60;
    } else if (window.innerWidth < 400) {
        google_ad_slot = "ad-unit-2";
        google_ad_width = 300;
        google_ad_height = 250;
    } else {
        google_ad_slot = "ad-unit-3";
        google_ad_width = 468;
        google_ad_height = 60;
    }
</script>
<script type="text/javascript" 
 src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Remember to replace the google_ad_client and google_ad_slot identifiers with your own values (you can easily find them in your AdSense JavaScript code).

It is the window.innerWidth property that is doing all the magic. This property contains the width (in pixels) of the user’s browser window and once you know that value, you can accordingly serve the larger or smaller AdSense ad units. Responsive designs usually use the media screen properties so that the site’s width, content, etc respond to the visitor’s device’s screen. Same logic is applied here.

This isn’t against AdSense TOS since we aren’t re-sizing the ads or modifying the JavaScript code that Google Adsense provides  – we are just serving a different ad unit based on the visitor’s browser size. We’re using this technique since a very long time.

Liked it? Y U No Share then?

About the Author: Epic Editorial Staff

Epic Editorial Staff is a team of people who manages every bit of Epic Magazine's content. The team is led by Harikrishna Nair, who is also responsible for the design and social attention of the site.