24

I'm using google adsense in my responsive wordpress design (that's using twitter bootstrap.) Right now when the site resizes the ads stick far out, and just look bad.

Is there anything I can do to help with this? I actually saw a site that looked like it was someone resizing the ads on smaller screens...I'm not sure how this is possible since it's java script, right?

Any feedback would be very helpful. Thanks!

Rick Smith
  • 1,245
  • 3
  • 15
  • 22
  • 2
    According to their terms of use, you're not allowed to change how the ads are displayed. However, you could check the resolution when the page loads, and generate different ads based on the size (this could also be done on *resize*, but you may want to read through their terms first before doing so, to make sure it's okay). – 0b10011 Aug 28 '12 at 20:37
  • @bfrohs Hmmm..ok. So how would that work? Let's say I have a widget area in my header that displays a 468x60 adsense add Would I try to find a smaller ad that would look good and show it instead? (If I show just an image in that area, it resizes perfectly.) If so do you have any feedback on how this would be done? Would I add different widgets in the header area and use css to only display certain widgets at certain times? – Rick Smith Aug 28 '12 at 20:43
  • 1
    You *can't* use CSS to hide/display the different ads, as this violates Google's ad policy. You would have to determine the size of the browser's viewport, then use JavaScript to call the appropriate Google Ad initiation script, based on the size of the viewport. – 0b10011 Aug 28 '12 at 20:55
  • @bfrohs Thanks for the feedback. I don't have any experience with that. Do you know how I go about doing that? – Rick Smith Aug 28 '12 at 22:07
  • See my answer, with updated information regarding the ToS, and a link to a question on here regarding how to get the viewport dimensions. From there, it should just be a simple `if`/`else` statement. – 0b10011 Aug 29 '12 at 04:18
  • [This update dated May 23 2013](http://adsense.blogspot.com/2013/05/updates-to-our-modifying-ad-code-policy.html) indicates that now you **can** modify the ad code based on screen width and/or for A-B testing, etc. [This help article](https://support.google.com/adsense/answer/1354736?hl=en) contains example JavaScript. – Salman A May 29 '13 at 07:32
  • These are all non-solutions. I want to go with Google's automatic sizing, but I want the ad to behave gracefully on browser resize, i.e. not spilling over into the site's content or going off screen, both of which look unprofessional and violate adsense policies. – cazort May 30 '18 at 16:30

6 Answers6

10

Ideally, CSS media queries could automatically scale the ads down, and, in a perfect world, the ads would automatically change their layout based on the new size. However, Google Ads do not support this, nor do they even allow this—you aren't allowed to change the contents of the ad, nor hide any portion of it, except with explicit permission from Google, according to their Terms of Service (removed text marked with [...]):

5. Prohibited Uses. You shall not, and shall not authorize or encourage any third party to: (i) [...] (ii) edit, modify, filter, truncate or change the order of the information contained in any Ad, Link, Ad Unit, Search Result, or Referral Button, or remove, obscure or minimize any Ad, Link, Ad Unit, Search Result, or Referral Button in any way without authorization from Google; [...]

An alternative solution would be to serve up the ads via JavaScript on a conditional basis. For example, when the page loads, retrieve the size of the browser's viewport and if the width of the viewport of the browser is smaller than the width of the preferred ad, serve up a smaller ad instead. It should work similar to CSS media queries, except do not serve up new ads when the user resizes their browser, as this would generate false impressions (multiple impressions on a single page, without refreshing), which is also against their Terms of Service:

5. Prohibited Uses. You shall not, and shall not authorize or encourage any third party to: (i) directly or indirectly generate queries, Referral Events, or impressions of or clicks on any Ad, Link, Search Result, or Referral Button (including without limitation by clicking on “play” for any video Ad) through any automated, deceptive, fraudulent or other invalid means, including but not limited to through repeated manual clicks, the use of robots or other automated query tools and/or computer generated search requests, and/or the unauthorized use of other search engine optimization services and/or software; [...]

Community
  • 1
  • 1
0b10011
  • 18,397
  • 4
  • 65
  • 86
5

The existing answers are outdated. Google introduced Responsive Ads in July 2013:

The new responsive ad units allow you to support a wide range of devices by working with your responsive design web pages. You can now dynamically specify the size of the ad that will be served, adapting it to fit the way your site renders a page on a particular device.

Responsive ads work with fixed, fluid and responsive layouts. All you need to do is place the "Smart Sizing" version of code in the place where you want the ads to appear. The ad will stretch horizontally to occupy all available space and vertically to display the most optimal standard size ad. If your website changes its layout depending on device orientation then the ad will size automatically on device orientation change event. Advance customization is possible using CSS and HTML5 data attributes.

Salman A
  • 262,204
  • 82
  • 430
  • 521
  • 11
    it's ONE TIME "responsive", it works when the page loads , but then change the screen size, and the ad's stay the same size and look out of place. – user3338098 Dec 03 '15 at 16:56
2

Google now officially supports responsive ads (currently in BETA). There is a good writeup of the functionality here with links to the official Google docs.

http://exisweb.net/using-google-adsense-async-tags-for-responsive-design

It works, but one drawback is that when you resize the viewport, the ads don't automatically resize. From what I understand, it is against the TOS to try to call the adserver when the viewport resizes.

NightOwl888
  • 55,572
  • 24
  • 139
  • 212
1

There's a plugin called Responsive Adsense. It adds a widget with 5 ad fields and you enter pub id and ad id in them. Then based on the size of the screen it renders 1 of the 5 ads. I tried it on a mobile browser and it rendered a block sized ad instead of the mobile one.

its_me
  • 10,998
  • 25
  • 82
  • 130
Equilibrium3
  • 11
  • 1
1

To maintain my page responsive, I did it this way:

<div class="table table-responsive">    
        <div class="text-center text-muted">
            <hr><br>
            <small>advertisement</small>
            <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
            <!-- bottom -->
            <ins class="adsbygoogle"
                 style="display:block"
                 data-ad-client=""
                 data-ad-slot=""
                 data-ad-format="auto"></ins>
            <script>
                (adsbygoogle = window.adsbygoogle || []).push({});
            </script>  
            <br>
        </div>       
</div>
Andrew
  • 7,619
  • 13
  • 63
  • 117
0

I agree with what Equilibrium3 posted. Select the Ad Size = Responsive Ad Unit (Beta). Once you get the Ad Code, you can place it inside a <div class="span12"> that is also inside a <div class="row">. This worked for me for placing an horizontal ad and having it centered too.

This is the page where I have that horizontal ad -> http://www.espaciodigital.mx/

Now, if you want to place the Ad code on a side bar, do the same as above, but split the page using, say, <div class="span3"> for the side bar and <div class="span9"> for the rest of the page.

I did that in the following page, where the square ads are on the left -> http://www.espaciodigital.mx/quienes_somos.html

Both ads work fine when seen in a mobile device. Give it a try. Hope that helps!

Miguel Angel
  • 3
  • 5