How To Implement Google Adsense In Responsive Website

By on March 21, 2013

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:

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 !

About Omkar Bhagat

Omkar is the owner of Codefap.com. He writes blogs, makes video tutorials and love to learn new things about computers and programming.
Subscribe To Blog Feed
  • vpntutorials

    Isn’t that also against the policies of adsense? (http://support.google.com/adsense/bin/answer.py?hl=en&answer=1354736)

    • http://codefap.com/ Omkar Bhagat

      No it isn’t. It is approved by Google. Many websites are using this code. :-)

  • http://codefap.com/ Omkar Bhagat

    Hello Luke, Sorry for the late reply.
    Since its JavaScript code, it should work fine with shortcodes or any cache plugin.
    Did you try this code in a WordPress ‘text’ widget or any place else except content area? It should work fine there.

    Also if nothing else works and you want to get this code to work in Content Area. Then just go ahead and edit single.php file of your theme and include this code somewhere near

    I hope this helps.