“responsive” ads with adsense




****UPDATE****

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.

8 thoughts on ““responsive” ads with adsense

  1. I’m coding a responsive site and this is exactly what I was looking for but, isn’t modifying the ad code against AdSense’s rules?

  2. This seems to make total sense to me, but when I tried to implement it the adsense ads weren’t rendering. I modified my codes with all of my own IDs, so I’m not really sure what I’m doing wrong.

    Should I wrap the js in a custom div or something?

    You’re my hero if you can help me crack this, as I think having a responsive design is extremely important.

  3. Thanks for sharing Ryan, however I have a question regarding how to prevent a block from loading.
    For instance, I have a desktop page with 3 ad blocks, but I want to show just one block – for screen and performance reasons – on mobile. Yet, I don’t want it to load any JS of that block, which is what happens if you use blank code for screen <768, ie.

    Thanks and great post.

  4. You can not rely on window width as it is unstable. For example, on some Androids you can not rely on it at all, as it takes up to 500ms for browser to have its width.

    A better solution is to have two 320px ad units one by another on wide resolution or one below the other on mobile version.

  5. Why use a jquery code ? You could do better with a native javascript code, without any framework.

    You are using an elephant when a mouse could do the job !

Leave a Reply

Your email address will not be published. Required fields are marked *