How to Change Adsense Code for Mobile Design

Google AdSense recently announced that publishers can change their Adsense code to adjust according to their Mobile Theme or the Responsive Theme for their website. This came directly because of the increased adoption of responsive theme over mobile theme which kept down the complexity of managing two different theme and multiple ad units.

So instead of publishers figuring out screen sizes and then choose what to display, AdSense code can be modified to display different size of ad units. This is a great relief for publishers who used big size ad units like 720X which resulted in horizontal scrolling. Even Theme designers use CSS Hide technique to make the ads disappear which is not a very good idea.

So How can you change the Adsense code correctly and keep it up with their policy:

Even though Adsense post on this did not mention about any example but their help center has one specifically for Responsive design.

Adsense Code with Screen Size Detection

In the above code you can clearly see that the adscript can be told to change the ad-unit itself when size of the display changes. There are three lines of code for every screen size you can think of:

  • google_ad_slot
  • google_ad_width
  • google_ad_height

Every ad unit create has a unique ID which you get while generating the advertisement code. Depending on the screen size you will have to wisely choose the right ad unit to display. So if you have more area choose wider ad unit and if there is smaller display area, choose a smaller one.

The biggest catch here is that these adverts do not change if the orientation of the mobile or the viewing device changes. So make sure you do through testing to find which unit fits well.

Do let us know if you are implementing any such technique and how it worked for you.


Please enter your comment!
Please enter your name here