Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a way to resize google adsense in a responsive design? [closed]

Tags:

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!

like image 676
Rick Smith Avatar asked Aug 28 '12 20:08

Rick Smith


People also ask

What is the best way to format AdSense?

Create space for a leaderboard banner. Nothing quite gets the attention of your site's visitors like a large graphic at the top of the page. For most sites that want to optimize their AdSense earnings, that's a leaderboard banner at about 728 pixels wide by 90 pixels high. For some sites, it could be even larger.

How can I paste AdSense code in HTML?

After you've generated the AdSense code, you need to paste it between the <head> and </head> tags of your site. We recommend you place the AdSense code on every page across your site to get the most out of AdSense.


2 Answers

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; [...]

like image 180
0b10011 Avatar answered Oct 08 '22 05:10

0b10011


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.

like image 28
Salman A Avatar answered Oct 08 '22 05:10

Salman A