Responsive design is one of the hottest trends within webdesign at the moment.
With great support from frameworks like Foundation and Twitter Bootstrap, you can easilly create a site that renders nicely in all devices regardless of the screen size.
While the responsive framewords works great, many webmasters using Google Adsense ads for monitizing their responsive sites has been very frustrated, since Adsense until now offficially hasn’t been able to show ads that automatically adapts to the users screen size.
The good news is that Google now finally allows you to apply certain modifications to the Adsense tags to support ads optimized for a responsive design.
You can see the official blog post from Google Adsense forum here
Responsive Adsense Ad code
In the blog post on the Adwords forum a small code snippet can be found that illustrates how you can insert a responsive Adsense ad.
To get the code working you should first set up a couple of ad units with the sizes that you need for your responsive site.
In the example below the following ad units has been created:
- Ad 1. Id: 1234567890, width=320px, height:50px
- Ad 2. Id: 3456789012, width=468px, height=60px
- Ad 3. Id: 2345678901, width=728px, height=90px
The script detects the screen width of the user device:
width = document.documentElement.clientWidth;
and displays Adsense ads based on the detected screen width.
The default ad is 1 (320×50 px), but if the screen width is more than 500 px, ad 2 is displayed, and if screen size is more than 800px, ad 3 is displayed.
The script looks like this:
Please notice that the script doesn’t detect screen orientation, so this script doesn’t display different ads if the user changes screen orientation.