How to Use Google AdSense Ads on your Responsive Website
Responsive web design is a simple technique that makes your website look good across all screen sizes – be it the mobile phone, tablets, desktop computer or even the large-screen TV.
Google has also officially recommended that website owners use the responsive design approach instead of maintaining separate mobile and desktop website as responsive design “keeps your desktop and mobile content on a single URL.
Responsive Google AdSense Ads
If you been using Google AdSense Ads on your responsive website, you may have noticed that, unlike your content, Google AdSense ads have a fixed width and they will not shrink or expand based on the screen size of the visitor.
For instance, if you are using the standard 728×90 leaderboard unit on your website, the ad unit may extend well beyond the screen if someone is viewing your website on a mobile phone that can only accomodate 320 pixels.
Before we dive into the code, please take a look at this demo page.
The demo has exactly one AdSense unit above the fold but the size of the unit will vary depening on visitor’s screen. If you are viewing the demo on a widescreen, you’ll see a leaderboard ad while a mobile user will see a medium rectangle or even a 180×90 link unit depending on the screen resolution.
To get started, create multiple ad units (say 768×90, 468×60 and 300×250) inside your AdSense dashbaord and replace the relevant google_ad_client (ca-pub-1234) and google_ad_slot (AAA, BBB, etc.) identifiers in the code with your own values.
Next, copy-paste the above snippet anywhere on your web page and, based on the size (resolution) of the user’s device, the most appropriate AdSense Ad format will get served automatically. If you wish to include multiple AdSense ad units on the same responsive website, just use the same snippet of code but increment the ID (line #4 & line #8) such that they read google-ads-1, google-ads-2 and so on.
I wrote the first version in August 2012 and the updated code includes several enhancements:
- The previous version used window.innerWidth and window.clientWidth properites to calculate the screen width but there were compatibility issues with older browsers. We are now using offsetWidth to compute the available width for ads which is even more reliable.
- It is now easier to include multiple responsive ad units on single web page.
AdSense publishers routinely perform split A/B testing to determine which colors schemes and banners sizes perform the best on their website – this is a similar technique.
Also see: Google AdSense Sandbox