Website developers, who use Google ad sense for monetizing their websites, are faced with the task of how to make their ad sense units respond as well to the varying dimensions of user's screen size. Fortunately, Google has recently introduced responsive ad units which, if implemented correctly, can blend well with your responsive website pages. Google's responsive ad code automatically adapts the ad unit size as per your page size and layout. Google dynamically calculates the desired ad dimensions based on the width of the ad unit's parent container, and accordingly renders the most suitable ad size.
Here is a step-by-step guide on how you can embed Google's ad code so that it becomes responsive. This implementation method also takes care of re-adjusting ad sizes, when the user changes the orientation of his device which causes a change in the layout of the web page.
To generate the ad code for a responsive ad unit, create an ad unit in the normal way, except that under the Ad Siize field, select Responsive ad unit (BETA). See image below.
When you click at Save and Get Code button, a popup opens up showing the generated Ad Code. Against field Mode, select the option Smart sizing.
Copy and paste the ad code at appropriate location in your web page's HTML source, where you would like the ad to appear. This should be pasted in one of your DIV containers. Note that you must ensure that the DIV container must have an explicit width set, so that Google can calculate the required size for the responsive ad unit. You may use media queries to set the size of the DIV container for different screen sizes. The sizes can even be a percentage of screen width. The Google ad unit will dynamically inherit the width of the parent DIV container and render the closest sized ad that matches the inherited width.
After placing your ad code, test on different devices and screens to check that the ad is indeed responding to varying screen size. You may even re-size the browser window in your PC and re-load the page to check the ad display for different screen widths.
CEO, Computer Solutions
Rajeev Kumar is the primary author of How2Lab. He is a B.Tech. from IIT Kanpur with several years of experience in IT education and Software development. He has taught a wide spectrum of people including fresh young talents, students of XLRI, industry professionals, and govt. officials.
Rajeev has founded Computer Solutions & WebServicesWorldwide.com, and has hands-on experience of building variety of web applications and portals, that include - SAAS based ERP & e-commerce systems, independent B2B, B2C, Matrimonial & Job portals, and many more.