How to embed Google Ads in a responsive website?

Due to the variety of devices and screen sizes that net surfers use now-a-days, website designers are now using the latest CSS, html and javascript techniques to make their websites responsive. A responsive website is essentially a website designed in a manner that it adjusts its layout and sizes of objects in the page so as to accommodate within the screen dimensions of the user's viewing device.

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.

Step 1 - Create the responsive ad unit

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.

Step 2 - Generate the ad unit

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.

Step 3 - Place the Ad code in your web page

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.