How to make Adsense ads work with responsive website

Question

I looked around the current solutions, and this question has been partially covered in these two posts; Making Adsense Responsive and In javascript 'If mobile phone'

I have a site that is responsive and the only thing that breaks it on mobile phones is the horizontal Google Ad on my page, which makes it stick out at first with extra space since it's bigger than everything else.

I'm looking to see if anyone has a workable solution so I can basically switch between this big banner, and a smaller format for mobile browsers where the screen size is smaller and doesn't break my responsive site.

My current solution would be to pull in the screen size and show a smaller ad if it is below a certain threshold. Is there a better way?

score 11 · Answer 1 · edited May 29 '13 at 07:44

You can use this code for AdSense, which is not against it TOS as it does not change the Ads "on the fly", you're just serving an Ad depending on the screen size but not changing the ad itself.

<script type="text/javascript">


    var width = window.innerWidth 
        || document.documentElement.clientWidth 
        || document.body.clientWidth;

    google_ad_client = "ca-publisher-id";

    if (width > 800) {
        // Activa el anuncio "Leaderboard" de 728x90 para pantallas anchas
        google_ad_slot = "ad-unit-1"; 
        google_ad_width = 728; 
        google_ad_height = 90;
    } else if ((width <= 800) && (width > 400)) { 
        // Activa el anuncio "Banner" de 468x60 para pantallas pequeñas (móviles) 
        google_ad_slot = "ad-unit-3"; 
        google_ad_width = 468; 
        google_ad_height = 60;
    } else { 
        // Activa el anuncio "Medium Rectangle" de 300x250 para medianas (tablets)
        google_ad_slot = "ad-unit-2"; 
        google_ad_width = 300; 
        google_ad_height = 250;
    }

</script>

<script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

And this one for DFP:

var width = window.innerWidth 
    || document.documentElement.clientWidth 
    || document.body.clientWidth;
if (width >= 800) {
    // Activa el anuncio "Leaderboard" de 728x90 para pantallas anchas
    document.write('<div id="div-gpt-ad-1234567891234-1" style="width:728px; height:90px;"">');
    googletag.cmd.push(function() { googletag.display('div-gpt-ad-1234567891234-1'); });
    document.write('</div>');

} else if ((width < 800) && (width > 400)) { 
    // Activa el anuncio "Medium Rectangle" de 300x250 para medianas (tablets) 
    document.write('<div id="div-gpt-ad-1234567891234-2" style="width:300px; height:250px;"">');
    googletag.cmd.push(function() { googletag.display('div-gpt-ad-1234567891234-2'); });
    document.write('</div>');

} else { 
    // Activa el anuncio "Banner" de 468x60 para pantallas pequeñas (móviles) 
    document.write('<div id="div-gpt-ad-1234567891234-3" style="width:468px; height:60px;"">');
    googletag.cmd.push(function() { googletag.display('div-gpt-ad-1234567891234-3'); });
    document.write('</div>');
}

James · Answer 2 · 2014-03-09T03:21:10.397

1

Google have now introduced responsive ad units. You'll need to generate new ad code to use them.

edited Mar 09 '14 at 03:21

answered Oct 01 '13 at 01:43

James

773
2
18
29

score 1 · Answer 3 · answered Oct 12 '19 at 03:39

I think this is not required in 2019 because there are too many new ads formats introduced officially by Google Adsense which fit every screen size (responsively).

But, you may use some Javascript codes to determine ads position or when to show or hide them while user browsing from different screen sizes.

Brad · Answer 4 · 2013-01-26T06:27:12.810

0

This is a big problem with AdSense. According to the terms of service, you are not allowed to programmatically refresh the ads, meaning you cannot load a different ad if your layout requires it after resize.

That being said, Google DFP (which supports loading AdSense ads) does have a refresh method. I've read through all the policies, and it seems that you can use this method for your own ads, but not when using AdSense.

Edit: Just had a phone call with Google the other day... they confirmed that using the refresh feature of DFP while serving AdSense violates their policies for AdSense. The refresh feature is only to be used with your own ads, or you risk losing your account and funds that you have earned.

edited Jan 26 '13 at 06:27

answered Jan 19 '13 at 22:26

Brad

159,648
54
349
530

Booo Google, booo, your policies are bad, and you should feel bad. What I actually had in mind was if there was a way to load one or the other ad? I know that I used to forever ago have a mobile version of a site, and would just put in a different code in each one. Does this violate it as well? I am thinking it would just load the ad based on the agent, but I wouldn't want to refresh the current ones... maybe I'm not thinking about this right? – Nicko Jan 20 '13 at 00:04
1

@Nicko, You can definitely choose which had to load. In fact, you can do this client-side. The issue is changing the ads once you've already shown them, without refreshing the page. I would suggest that doing client-side detection of which layout you are using is the best bet. Then, if the layout changes, you could refresh the page. Not great, but not the end of the world either. In the event of a device rotation or other change that makes the viewport change, users get an inconvenient reload, but that's it. – Brad Jan 20 '13 at 00:46
@Nicko, I should also point out that this isn't just a Google problem. The whole industry has flailing. The IAB just now put out a report about what to do about it, leaving more questions than answers. (http://www.iab.net/responsivedesign) While we can pick ad creative sizes that mostly work for now, it sure would be nice to come up with a way to make the ads flow as well as the site. This would require advertisers to give up some control... that's unlikely to happen. – Brad Jan 20 '13 at 00:49
Thanks for your insight. I think this will be the solution I will implement, and I'm not that worried about the ads changing if the screen size changes, that would be a rare circumstance and I would be fine with it showing either or. What I just need is to load a smaller ad if it is a smaller screen, and the full ad if it is a bigger screen. No worries on my end if it will fit or not. My follow-up question to this is if you know how to implement the fixes I originally posted about... – Nicko Jan 20 '13 at 22:54
`if ($(window).width() < 480 || $(window).height() < 480) { //small screen, load other JS files $.getScript('/js/script.js', function () { //the script has been added to the DOM, you can now use it's code }); }` I'm guessing this would be a start – Nicko Jan 20 '13 at 22:54
@Nicko, What I did on my site was simply have `
` elements for ad slots that would be re-sized by my CSS. Once I had the layout the way I wanted it, I could then write some JavaScript to detect the size of the ad slot, in much the same way you are proposing checking the window size. That JavaScript would then finish the AdSense setup, only adding the correct AdSense slot for the size.
– Brad Jan 21 '13 at 00:06
Could you by chance share the code you have? I'm looking into ways to do this easily, but with my caching solution, if I put in the php code, it will pull in whatever the cache has set up. I would like to go your route... – Nicko Feb 05 '13 at 19:53

score 0 · Answer 5 · answered Jan 20 '13 at 05:42

0

There is a disclaimer at the top of this tool to ensure that Google are happy with you using it, but this will do exactly what you're after.

http://www.responsiveads.com/responsive-adsense/

From their blog

Google will most likely come up with their own solution for this sometime in the near future but in the mean time publishers can use our solution to enable AdSense to work to monetize their websites across all screens!

answered Jan 20 '13 at 05:42

justinavery

2,596
2
19
21

Hmmm, interesting. I have been looking over it and will give it a chance if the above code doesn't work out as well. This is the best case scenario, but I'm not that worried about the different sizes or refreshing the size as the screen shrinks. If people play with responsiveness that is their will, but I am guessing that will be rare. For me, I just need to show either the big or the small ad based on what screen size is used when accessing the page. I do however hope that Google will include a fix like this in their code. Thanks for sharing, would not have found it otherwise. – Nicko Jan 20 '13 at 22:57
I tried getting this solution to work, and put in the code, but it looks like it is only showing me the smaller sized ad. Strange, but I will keep playing with it to see if there is a solution. – Nicko Jan 22 '13 at 20:20
FYI, this violates the AdSense Terms of Service. – Brad Jan 26 '13 at 06:27

score 0 · Answer 6 · answered Apr 24 '13 at 14:40

I have done this in with simple css.

If its not a flash object you can get it to resize.

If its a iframe, make its width 100%

Depending on the ad loaded it could cut off some of the image, if thats the case then you will need some javascript that can measure the animations and reload a add accordingly.

score 0 · Answer 7 · answered Nov 05 '16 at 11:03

0

<style>
iframe{width:100%}
</style>

and solves everything, I had this problem with a bootstrap website and adsense

answered Nov 05 '16 at 11:03

Adrian

1

How to make Adsense ads work with responsive website

7 Answers7