How to Modify Adsense Code for Responsive Design

By Posted 2013 Updated   AdvertisingTutorials

Google Adsense now allows you to modify Adsense ad code to meet responsive design requirements. A lot of websites like us have switched to responsive design, which allows the same site design to adjust to varying screens size resolutions (as on mobile device browsers) using CSS. Now even Google recommends you use a responsive design instead of creating a separate mobile site to meet specifications of mobile browsers.

So how will 728px  wide banner ads look  when the screen size is 500px –  it will cause horizontal scrolling and will ruin your responsive mobile design experience. Webmasters long wanted an easier way to switch large ads sizes to smaller ad sizes seamlessly on small screen resolutions. Many site owners tried javascripts to detect screen size and change the ad code or use display:none to hide Adsense units at different screens sizes. Even we tried this.  The Adsense team was listening … and they advise that using CSS to hide the ad is not a good idea. So now what…

Adsense Code for Responsive Design

Lets say you have a wide 1000px wide single column design and display a large 728px wide banner below the article. Normally your Adsense code looks like this when inserted in html code

<script type="text/javascript">
google_ad_client = "ca-publisher-id";
google_ad_slot = "1212121212";
google_ad_width = 728;
google_ad_height = 90;
}
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

The Adsense team officially suggests you use this code to meet the requirements of responsive design, you can modify Adsense code like this.

<script type="text/javascript">
google_ad_client = "ca-publisher-id";
width = document.documentElement.clientWidth;
google_ad_slot = "1212121212";
google_ad_width = 728;
google_ad_height = 90;
if (width < 750) {
google_ad_slot = "3434343434";
google_ad_width = 468;
google_ad_height = 60;
}
if (width < 500) {
google_ad_slot = "2323232323";
google_ad_width = 300;
google_ad_height = 250;
}
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

What this code will do is that when the screen is <750 px, it will switch this to a 468px wide smaller banner, and when the screen size is less than 500px, it displays a mobile 300px wide ad. Amazing!

No CSS tweaks and no extra javascript. You can choose different ad sizes to fit different  screen resolutions per your site design.

Remember earlier Google Adsense had helped Adsense publishers modify code for A/B testing to find which ads have higher CTR. I think it was a very essential move that Google Adsense officially allowed this code change, as many possible Adsense modification codes were appearing online to fix responsive design issues and webmasters were confused which code to use, just in case it violates Adsense terms of service.  Try this now and improve your responsive web design.


88 comments on “How to Modify Adsense Code for Responsive Design

  1. Suhas says:

    Hi Chandra, I remember of having read about modifying the AdSense code for responsive we designing but did not go in depth but you article has come at right time for me as I am going to use different ads for various screen sizes. Thanks for this useful info.

  2. Mathew says:

    Thanks for sharing these details which will be work for those people who all are involve in online marketing.

  3. John Demmon says:

    Thanks, I’ve been trying to find advertising that works on my site. I’m fairly fussy about making sure the user experience is good across all devices. It’s good to see that responsive can work for adds too!

  4. P. Chandra says:

    It is very essential to get the right ad sizes for great responsive designs.

  5. Web Designing Amritsar says:

    I have not known this fact, and this information will prove to be very useful for me. Thanks for this helpful information, I have really liked this blog as I get more information in simple and brief content. Keep writing.

  6. chitra says:

    Thanks for sharing this post its very for doing responsive web design

  7. Web Development says:

    I do not know about it, You have explained the things in a simple way. It is good that ads work in any screen size.

  8. Pramod says:

    Wont my adsense account get banned after i modify the adsense code?

    • P. Chandra says:

      Adsense officially allows you to modify ad code for responsive design only. And this is the only acceptable way it can be done.

  9. robert kiyosaki says:

    wow this is very very useful. Thanks for the insight!

  10. Rahul Chalana says:

    Thanks for this!
    i was already suffering from the same problem!!
    i will try these codes now

  11. Bitts says:

    The tutorial was nice and it is indeed a great news that now we do have the options to modify the ads as per to our theme requirements.
    To credit of Google, it has finally started to be flexible in issues when it comes to their Adsense Program.

  12. Bilal Akbar says:

    Clearly explained. Thanks for this simple solution. Will try it soon.

    • Sanjay Patel says:

      Nice sharing Thanks for this!
      i was already suffering from the same problem!!
      i will try these codes now, Keep sharing

  13. Hilary Yates says:

    About 40% of my website viewers are mobile (about half). I just resentfully made my site responsive with adsense thanks to this article. thanks!

  14. Prakash says:

    Well, now using Responsive adsense ads is really important as it makes users really happy!

  15. Joe says:

    Great tutorial! The responsive ads are awesome in use with the responsive theme as well. Sometimes you can set the code width at 100% using a responsive theme and the ad will set back correctly as well.

    • Joy says:

      Really an awesome tutorial!! Have been all over the internet but never such an detailed guide on Adsense and its small techniques. Wonderful !!

  16. Madhu says:

    This is really wonderful. This absolutely suits for any Flexible theme in wordpress blog. I appreciate it. Thank you

  17. whatspapp says:

    Thats very nice and informative The tutorial was nice and it is indeed a great news that now we do have the options to modify the ads as per to our theme requirements.
    To credit of Google, it has finally started to be flexible in issues when it comes to their Adsense Program.

  18. whatsapp pc says:

    Nice sharing Thanks for this!
    i was already suffering from the same problem!!
    i will try these codes now

  19. Amit says:

    using Responsive adsense ads is really important it make users really happy

  20. Prakash says:

    Thanks for this post, using really nice themes can really give you a really important speed!

    • Manpreet says:

      Yup ! It’s true Prakash. Responsive Ads helps in increasing revenue and site load time too. And now you can generate Responsive Ads directly from your Google Adsense Dashboard.

  21. Gautham says:

    Hi,

    Thanks for giving the customization tip for turning Adsense ad blocks into responsive blocks. It is essential if we are expecting diversified traffic.

  22. alan says:

    Thanks for the great tips mate. thanks for sharing such an informative tutorial with your loyal readers. Not many people shares their code with others but you don’t seems to be among those many. I really appreciate it.

  23. abhi says:

    First of all thanks. Why people not trying adsense optimized themes like ctr & adssticky?? They are automatically modify it.

    • P. Chandra says:

      The themes maybe responsive, but for the ads to be responsive you need to get the adsense code. We are also using responsive adsense ads.

  24. Dlan says:

    Responsive ad is good for various devices but I think that is an important feature that ad size should change according to the screen orientation. Yet this is very good feature as many people are going for mobile and tablet day by day.

    • P. Chandra says:

      The adsense size does not change right now if your rotate the screen … though they promise to implement it soon.

  25. Nelly says:

    That is a great news for adsense users like me. I’m planning to migrate my actual wordpress theme to responsive design. As a blogger. I’m excited to see the difference.

  26. Elev says:

    Hey Buddy,
    You know what i was not knowing about this that we can make our ads responsive as well,
    Just for this reason i removed my adsense from my site as its was looking crap when i was trying to open it on ipad, or and handheld smartphone.

    At last appreciated, and good write

  27. Bob N. says:

    Responsive ad is good for various devices but I think that is an important feature that ad size should change according to the screen orientation. yet this is very good feature as many people are going for mobile and tablet day by day.

  28. Sunil Thakur says:

    Thank you for clearing my doubts and problem regarding adsense modification.It such help me to modify my adsense odes.Thank you for the great post

  29. Richard Edwards says:

    I recently started using Adsense on my blog. Since I’m using responsive design, so this tip is meant for me. It’s time for me to implement this and see the results.

  30. Richard Edwards says:

    I’ve been using other sources of income so far. Just got approval by Google Adsense, and will be implementing your tip to get the code placed in responsive theme of my blog. Thanks for this useful info.

  31. Sunil Thakur says:

    Thank you for this article.Now i know how to modify adsense code for more revenue.Great post.Keep it up

  32. Valentines Day says:

    Many thanks, I’ve been searching for advertising of which works about my site. I’m reasonably fussy about being confident that the end user experience is usually good around all gadgets. It’s good to view that responsive can work for gives too!

  33. facebook login says:

    This is a great news for adsense users like me. I’m planning to migrate my actual wordpress theme to responsive design. As a blogger.

  34. Barry says:

    Thank you for this article. Responsive design help me also in my ads revenue. It’s more considerable to have a website build in responsive design

  35. Sanket says:

    Awesome post buddy and really ad sense ad spoils layout of site as they are non responsive but this post has helped me a lot once again Thanks bro :)

  36. Jason says:

    Awesome post Chandra, now a days after the mobile and tablets trend on up graph responsive ads are much more needed for better user interference, as well which looks nice when viewing from a smartphone or tablet. So over all Responsive Ads are useful for both visitors and publisher as well…

  37. WhatsApp For Pc says:

    I haven’t tried Adsense Responsive ads yet but I would surely like to know that what have you experienced with your earning? It increased or decreased?

    • P. Chandra says:

      Responsive ads lead to higher earning as responsive ads blend better with mobile designs.

  38. Dabron Grol says:

    Hey Admin thanks for sharing such a great article while googling how can i modify my adsense code i found my result here really you have explained all the terms in a better way .

    Thanks keep sharing like this…

  39. atul says:

    ya its true, if you want to increase the adsense income then you should use responsive template, but don’t ever modify the ad code. it leads to your adsense ban.

  40. Ankita Shah says:

    Responsive ad is good for various devices but I think that is an important feature that ad size should change according to the screen orientation. Yet this is very good feature as many people are going for mobile and tablet day by day.

    Thanks,
    Ankita

    • P. Chandra says:

      Responsive ads are essential now as most site visitors access via tablets and mobile devices.

  41. Result says:

    This is really wonderful. This absolutely suits for any Flexible theme in wordpress blog. I appreciate it. Thank you

  42. jackie says:

    Thank You for sharing this post.You have explained the things in a simple way. It is good that ads work in any screen size.

  43. Satesh says:

    Well, Adsense codes can’t be modified easily in responsive design but although I appreciate your efforts, You have saved my time even time for those who wanted to modify there adsense code in responsive sites

  44. mothers day 2014 says:

    his is very good feature as many people are going for mobile and tablet day by day.

  45. Pin Code says:

    Hey thanks for these inputs, will implement this on my site once I get approved by Google Adsense.

  46. Arpita says:

    Responsive ads are good, but depends on where do you place it. I was one of the very few publishers who was allowed to use responsive ads on their website. Google allowed me to play with the ad and gave me freedom of my custom ad sizes. That was very good.

  47. aditi says:

    I have not known this fact, and this information will prove to be very useful for me. Thanks for this helpful information, I have really liked this blog as I get more information in simple and brief content. Keep writing.

  48. Neha says:

    Well, Adsense codes can’t be modified easily in responsive design but although I appreciate your efforts, You have saved my time even time for those who wanted to modify there adsense code in responsive sites

  49. Sheetal says:

    Hey About 40% of my website viewers are mobile (about half). I just resentfully made my site responsive with adsense thanks to this article. Hope I will get reply.

  50. Harsh says:

    Soo brilliant this post . Love the metaphor tip. I catch myself using them alot in real life interactions (everything in my world is like childbirth) but it’s great to see this laid out as a point to consider for blog posts.

  51. Komal says:

    Now even Google recommends you use a responsive design instead of creating a separate mobile site to meet specifications of mobile browsers.

  52. Komal says:

    Thank You for sharing this post.You have explained the things in a simple way.

  53. Ananya says:

    Have been little confused about responsive ads, being non technical…this has helped…Thanks..would be posting if face issues

  54. Latest Recruitment says:

    Yes Google Adsense allows to modify Adsense ad code to meet responsive design requirements and i have got the idea how to modify Adsence code properly. Thanks For Sharing.

  55. Sunil Thakur says:

    I have not known this fact, and this information will prove to be very useful for me. Thanks for this helpful information

  56. Dani says:

    Tanks it was very clear for me.

  57. mother's day says:

    I have not known this fact, and this information will prove to be very useful for me. Thanks for this helpful information, I have really liked this blog as I get more information in simple and brief content.

  58. cbse result says:

    Yes Google Adsense allows to modify Adsense ad code to meet responsive design requirements and i have got the idea how to modify Adsence code properly.

  59. Apps PC says:

    First thanks for sharing this article related to adsense. Now we can create responsive adsense code directly from our dashboard. I am also using, n feel that ctr is really nice in responsive adsense code.

  60. Aditya says:

    Hi chandra, There are certain circumstances when modifying Adsense code would be beneficial. Google has now updates their policy explaining how and when code can be modified.

  61. Raj says:

    Responsive ads are make more $ because of visibility. You posted very detailed article about this topic. I am also running one tech blog, Your posting is very informative to me. Thanks

  62. Rahul says:

    According to me the responsive adds are better than the others and the leader board also works well.

  63. Aman Sareen says:

    Its is not companion to use only responsive design adds. In blogging there is readership so that we can get better response from these adds

  64. Prateek says:

    The responsive ads from Google are best part of adsense as they help in getting better CTR and CPC.

  65. ajay says:

    Google has been constantly working to make adsense better and better and result is here infront of everyone. It is way ahead of any other ad network

  66. vic says:

    the new adsense makes this a little bit easier to set up. someday soon they will just be “ads” not “responsive” ads. ditto on websites

  67. Techios World says:

    Responsive ads are best for increasing CTR. but is it ok if we change the code??

  68. Morgan Megan says:

    Hey P Chandra,
    These codes really worked for me, you made my work man!
    Thanks for the code and a must needed video :)
    – Morgan

  69. Leonel says:

    yes.easily understandable. But if you add a video for this it will be more effective about exactly AdSense Code edits. Any Way Thanks.

  70. Visit here says:

    Great post..So lucky to come across your excellent blog. Your blog brings me a great deal of information.. Good luck with the site.

  71. Saumya Mehra says:

    most of my website viewers are mobile. I just resentfully made my site responsive with adsense thanks to this article. thanks!

  72. Saumyaehra says:

    Responsive ads are best for increasing CTR. but is it ok if we change the code??

  73. Hammad says:

    Using responsive adsense units is the best solution, don’t waste time to make non responsive ones into responsive, just copy and paste the code that Adsense itself provides for better impressions.

  74. Daniel says:

    Hey Chandra,
    These codes really worked for me!!
    Thanks for the code and a must needed video!! Cheers!

Leave a Reply

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




Next Article »
css.php