How to Modify Adsense Code for Responsive Design

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="https://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="https://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.

Share with friends

94
Leave a Reply

Leave a Reply

  Subscribe  
newest oldest most voted
Notify of
Suhas
Suhas

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.

Mathew
Mathew

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

John Demmon
John Demmon

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!

Web Designing Amritsar
Web Designing Amritsar

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.

chitra
chitra

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

Web Development
Web Development

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.

Pramod
Pramod

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

robert kiyosaki
robert kiyosaki

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

Rahul Chalana
Rahul Chalana

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

Bitts
Bitts

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.

Bilal Akbar
Bilal Akbar

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

Sanjay Patel
Sanjay Patel

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

Hilary Yates
Hilary Yates

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

Prakash
Prakash

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

lalit kumar
lalit kumar

yes prakash, responsive ads are a new trend and they too have high CTR… experienced a ctr of 5% on one of my blog…

Joe
Joe

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
Joy

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

Madhu
Madhu

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

whatspapp
whatspapp

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.

whatsapp pc
whatsapp pc

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

Nilesh
Nilesh

really very helpful, add placement in better way also increase your revenue to

Amit
Amit

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

Admit Card
Admit Card

Apart from making better UI, Responsive Ads improves Ad Revenue too.

kanti
kanti

I am full agree with you because now a days mostly users using tablets and mobiles for surfing.

Prakash
Prakash

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

Manpreet
Manpreet

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.

Gautham
Gautham

Hi,

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

alan
alan

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.

abhi
abhi

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

Dlan
Dlan

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.

Nelly
Nelly

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.

Elev
Elev

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

Bob N.
Bob N.

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.

Sunil Thakur
Sunil Thakur

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

Richard Edwards
Richard Edwards

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.

Richard Edwards
Richard Edwards

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.

Sunil Thakur
Sunil Thakur

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

bharat
bharat

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

Valentines Day
Valentines Day

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!

facebook login
facebook login

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.

Barry
Barry

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

Sanket
Sanket

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 :)

Jason
Jason

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…

WhatsApp For Pc
WhatsApp For Pc

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?

Dabron Grol
Dabron Grol

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…

atul
atul

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.

Ankita Shah
Ankita Shah

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

Result
Result

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

jackie
jackie

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.

Satesh
Satesh

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

mothers day 2014
mothers day 2014

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

Pin Code
Pin Code

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

Arpita
Arpita

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.

aditi
aditi

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.

Neha
Neha

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

Sheetal
Sheetal

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.

Harsh
Harsh

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.

Komal
Komal

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

Komal
Komal

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

Ananya
Ananya

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

Latest Recruitment
Latest Recruitment

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.

Sunil Thakur
Sunil Thakur

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

Dani
Dani

Tanks it was very clear for me.

mother's day
mother's day

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.

cbse result
cbse result

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.

Apps PC
Apps PC

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.

Aditya
Aditya

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.

Raj
Raj

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

Rahul
Rahul

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

Aman Sareen
Aman Sareen

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

Prateek
Prateek

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

ajay
ajay

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

vic
vic

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

Sneha
Sneha

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

Techios World
Techios World

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

Morgan Megan
Morgan Megan

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

Leonel
Leonel

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

Visit here
Visit here

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

Saumya Mehra
Saumya Mehra

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

Saumyaehra
Saumyaehra

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

Hammad
Hammad

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.

karan
karan

Thanks for sharing this tips dude i never knew their is any such code which make non adsense unit responsive i will give it try hopefully it will give me bit bit in CTR too.My blog has very low CTR i tried all most all except the one you mentioned here.

Ch Sathish
Ch Sathish

Sir, My Blog traffic is mostly Mobile.I really need responsive ad design….Google insisted to design responsive by giving requirements like width, slot etcc….I did it but ads are not apperaing…….and then i found official adsense plugin…Activated and arranged ads placement. Now seeing ads ……..And checked code too every ad created with plugin is responsive………Is it good to use plugin in place of re-designing code

Zika Virus Baby
Zika Virus Baby

Responsive Ads are really the next big thing.. Now you don’t have to make different types of Ads for mobile and desktop.Google automatically takes care of it.

John
John

I think there are a new responsive codes offered by default from google and there are no need to edit or modifying any code

Daniel
Daniel

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