Hiding and Showing Google Adsense blocks with Media Queries

Question

Is this already acceptable in the Adsense ToS? (can't find any information on this specific case). If the user resizes the browser (css 3):

@media screen and (max-width: 980px) {
 #skyscraper { display: none; }
}

The idea is to present an horizontal-scroll-free site when the user resizes the browser window to 980px or less.

Solution 1

You can't hide ads; it's in the AdSense terms and conditions under "5. Prohibited Uses":

You shall not, and shall not authorize or encourage any third party to: ... (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;

Seems pretty clear to me. (It's probably because the JavaScript code for the ad would still run, falsely reporting an ad view and stunting the click through rate.)

Moving the ad to the footer area for narrow screens using media queries might be safer.

Update (July 2013): Using JavaScript to detect page width and serve relevant ads, rather than CSS media queries to hide ads after the page has loaded and views have been counted, now seems to be the most sensible option, as in this example.

Solution 2

I think the terms of service refer to a situation where you load the ads but then do not display them to the visitors, hence mucking up view/click through stats. If you don't load the ad in the first place then it should be be OK. You'd have to do this with JavaScript rather than CSS though - detect the window width, only run the AdSense code if it's wider than a certain number.

Comments

[Andres SK]

hi for your answer nick. what i still don't understand is why okcupid (very large site) does it without consequences.

[Nick]

@andufo Maybe they got authorisation from Google. Or maybe they just haven't been caught yet.

[Andres SK]

alexa.com/siteinfo/okcupid.com it is a site with high traffic and very well ranked hehe, im betting on the authorization.

[Andres SK]

good point! now i have to find out how to load adsense banners after the dom is ready.

[MrWhite]

Recommending "responsive design" is one thing, using media queries to hide AdSense is another. I don't think the Google docs you link to cover this? And Mashable does not do this, they still display the Ads, but in different parts of the page.

[its_me]

@w3d Are you sure about what you are saying? 'cause I do see that Mashable uses this: @media (max-width: 969px){ .box970 .visible-desktop .ad_container.ad970 {display:none !important} } What does that say to you? :)

[MrWhite]

That particular CSS relates to the wide header which, on the homepage at least, does not contain AdSense. All the AdSense on the page appears to remain as the viewport is shrunk. However, you are right, on other pages there is AdSense in the header and in the side panel and both are removed as the viewport shrinks. However, it is a bit more complicated than this. If the page is initially loaded at a small viewport size then the AdSense does not even load. Increasing the viewport size does not show the AdSense since it was never loaded.

[MrWhite]

@Nick's answer still appears to be relevant, the AdSense T&Cs quoted are still current. Providing AdSense is not hidden after it has been loaded (which results in an impression) then it's OK. AFAIK mobile users do not resize their viewport. The edge case on Mashable where the browser window is shrunk (on desktop) and the AdSense is removed might have been overlooked or they have gotten permission from Google, I don't know. In most cases, however, they do appear to follow the T&Cs.

[its_me]

@w3d I must ask you to read the reply from a top contributor on the Google Adsense forums.