This objective of this post is to explain how to add Google Adsense to a responsive website without violating Adsense policies.

First of all, what is a Responsive design?

Let me take a minute to explain this. Previously, Internet was only accessible using a proper Computer (i.e PC or a Laptop). But today, with the outburst of Smart phones and Tablets, Internet can be accessed and is accessed using different screen sizes and different resolutions.

But the question is, Is the web ready to adapt to these new screen sizes? The answer to this is Responsive website design.

A responsive design of a website is one which can adapt to different screen resolutions depending on what device you are using.

Getting back to the subject of this thread –

Without implementing a responsive code for adsense, My website would look as shown below (if i load the site by re sizing the browser window).

adsense-cropping-violation

Case 1 – Non Responsive: You can see that the leaderboard ad unit (728 x 90) is getting cropped on the right side. The ad is about 728 pixels wide but only about 500 pixels are being displayed on screen. This kinda looks untidy.

Case 2 – Responsive: If my website was responsive, It would resize the advertisement on its own. But that would violate Adsense policies as stated below –

5. Prohibited Uses. You shall not, and shall not authorize or encourage any third party to: (i) […] (ii)edit, modify, filter, truncate or change the order of the information contained in any Ad, Link, Ad Unit, Search Result, or Referral Button, or remove, obscure or minimize any Ad, Link, Ad Unit, Search Result, or Referral Button in any way without authorization from Google[…]

So instead of re sizing or minimizing any advertisement, We have another option !

We can put if else clause and determine the screen size of the device which is trying to open the website. And accordingly display a proper advertisement.

Adsense Approved Code –

If the width of the device is greater than 800 then serve a leaderboad ( 728 x 90 ) ad, if its less than 400 then serve 300 x 250 ad. Else just serve 468 x 60 ad. The code for the same is given below:

<script type="text/javascript">

    var width = window.innerWidth || document.documentElement.clientWidth;
    google_ad_client = "ca-publisher-id";

    if (width >= 800) {
       google_ad_slot = "ad-unit-1";
       google_ad_width = 728;
       google_ad_height = 90;
    } else if ((width < 800) && (width < 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>

Where you have to replace ca-publisher-id, ad-unit-1, ad-unit-2, and ad-unit-3 with the proper code from your adsense account.

And that’s it, you’re done !