“responsive” ads with adsense


Google recently implemented a responsive ad block that essentially performs some media queries and returns the appropriate ad unit depending on screen size. My sample code block looks like:

Previous Post

I recently switched to a “responsive” web design and couldn’t find a good way to dynamically show the proper adwords ad format depending on the viewport of the visitor’s device. This snippet uses jquery to determine viewport width and then sets the appropriate ad channel variables for show_ads.js:

UPDATE: Today (May 23 2013) Google announced its now ok to modify the adsense code like I mentioned above (Woops! didn’t know I was breaking TOS)

You can read their post announcing the changes here. The relevant code snippets they provide for sites using responsive web designs looks pretty much identical to mine (minus the pointless reliance on jquery):

More details can be found on the help pages for adsense advertisers located here.