Google Adsense Ads for Classifieds site with Responsive Theme

Responsive design is website design that adapts to viewer’s device and viewable area. Mobile internet usage trend is growing fast. If you look at your website stats then you will notice grows of mobile visitors in percentage. Especially if it is classifieds site then users always search for things to buy, rent, sell. Responsive design makes it possible to deliver same content if you visit site from desktop computer or mobile phone or tablet. Every element on web page will restyled according to mobile device by hiding some unnecessary fields, resizing images and repositioning some elements.

Update 07.01.2014: Google added responsive ad units you can view more info about it here.

When it comes to adsense ads they are not responsive. So if your site is viewed by mobile device with screen size 320x480 pixel and you are displaying google adsense ad 768x90 then yor website will have horizontal scroll and mobile site design will break. To prevent this you can detect device with with javascript and load appropriate adsense ad to fit visitor’s mobile device.

responsive-adsense-classifieds

Amit Agarwal provided a google approved solution for responsive websites using adsense ads. In our case we want to Leaderboard (728 x 90) ad to be replaced with Mobile Leaderboard (320x50) ad. This solution will work on page load which is how it should work for mobile device, ad will not change if you are resizing page after it is loaded on your desktop computer.

<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 {
  google_ad_slot = "ad-unit-2";
  google_ad_width = 320;
  google_ad_height = 50;
}
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

Please keep in mind that you can use only one mobile leaderboard ad per page.

For all mobile ad units with the exception of the mobile leaderboard, one or more text ads are eligible to show.

To implement this in ClassiBase using base theme or any other theme with wide widget area go to Appearance > Widgets and add your adsense code formatted like above example to widget area above or below content. Use text widget and remember to select "Text is HTML / javascript format." checkbox.

classibase-adsense-text-widget

In same manner you can replace wide link units with compact ones if you are using google adsense link units.

If you want to disable adsense ads for moble users then it is not permitted to do in javascript because Google is not allowing to modify javascript code. So you have to do it in PHP on server.

On ClassiBase if you run multiple languages you can disable adsense per language by not putting javascript code for that language or putting other advertiser instead of adsense. For example for Russian language you can put yandex ads, for English language google ads.