CODEWITHSUNDEEP
cssresponsive-designadsense
Rápli András
Rápli András

Reputation: 3923

Responsive CSS design, Adsense ads in display:none

I wish not to show the right sidebar (which contains ads) when the max-device-width is 480px. If I use display:none; it violates the Adsense ToS. So, what's the good solution?

Upvotes: 9

Views: 7097

Answers (4)

Rápli András
Rápli András

Reputation: 3923

AdSense has released the new responsive adverts which fill up the most available space with the best converting ads. This solves the whole struggle.

Upvotes: 1

Jan Derk
Jan Derk

Reputation: 2970

Google has recently introduced a new Responsive advertisement format which explicitly allows hiding advertisements (for responsive ads only).

Here are some techniques you’ll want to avoid:

  • Hiding ad units at anytime (e.g., display:none), unless you're implementing a responsive ad unit

An code example even shows how to do this can be found in the Google Adsense manuals.

<style type="text/css">
.adslot_1 { width: 320px; height: 50px; }
@media (max-width: 400px) { .adslot_1 { display: none; } }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
   style="display:inline-block;"
   data-ad-client="ca-pub-1234"
   data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Note that there is a bug in this Google code sample though. You have to move the style="display:inline-block;" part to the section. Otherwise the inline display style overrules the section display none.

Upvotes: 3

toby1kenobi
toby1kenobi

Reputation: 1701

You can effectively do this using the DFP API using sizeMapping, which also allows you to serve different sizes of creative depending on the viewport size.

I answered a similar question here, but essentially if for a given resolution you target a size of creative that doesn't exist, no ad will be served as DFP won't be able to supply an ad.

If you just want to have no ads when the viewport is smaller than a given width, you'd want something like this:

googletag.cmd.push(function() {
    var mapLrgLeaderboard = googletag.sizeMapping().
        addSize([480, 320 ], [300, 250]). // when screen >= 480 x 320px use 300 x 250px 
        addSize([0, 0], [88, 88]). // 88 x 88px = non-existant ad size
        build();

    googletag.defineSlot('/12345678/Test-Large-Leaderboard', [[300, 250]], 'div-gpt-ad-123412341234-0').
        defineSizeMapping(mapLrgLeaderboard).
        addService(googletag.pubads());

    googletag.enableServices();
});

I wrote a short post about this (there are a couple of gotchas you might run into if you go by the Google description alone), although this (above) is the crux of it.

Hope this helps!

Toby

Upvotes: 2

johnkavanagh
johnkavanagh

Reputation: 4674

The problem here is that if you use display: none, you're breaking the Adsense Terms & Conditions. This is because, despite the ad being hidden, it still counts as a view for the advertisers.

So-far, Google has been very slow to respond to this, but the method I've implemented and which many are now adopting is to detect Window width at page-load and either instigate Adsense, or not, based on the window size.

Labnol have a great write-up about this.

Essentially, your script needs to look something like this:

<script type="text/javascript">
    // <![CDATA[
        var width = window.innerWidth || document.documentElement.clientWidth; google_ad_client = "ca-publisher-id";
        if (width >= 800) {
            google_ad_slot = "ad-unit-1";
            google_ad_width = 728;
            google_ad_height = 60;
        } else if ((width < 800) && (width > 400)) {
            google_ad_slot = "ad-unit-2";
            google_ad_width = 300;
            google_ad_height = 250;
        } else {
            google_ad_slot = "ad-unit-3";
            google_ad_width = 320;
            google_ad_height = 50;
        }
    // ]]>
</script>

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

Extending on this for your specific example, you would detect the screen width prior to intialising Adsense using something like:

var width = window.innerWidth || document.documentElement.clientWidth; google_ad_client = "ca-publisher-id";
if (width >= 480){
    // initalise Adsense here
}

to initialise your Adsense. This way, it will only occur when the screen width is larger than 480px.

One important thing to bear in mind: although this will ensure that your ad service doesn't get loaded when the visiting device's screen is too narrow, it doesn't fix the issue of the ad either being displayed (or not) if the visitor then chooses to resize their browser window. I've yet to come across an easy way to fix this particular aspect of the work-around aside from using display: none to cover the instance where a user has loaded the site at a big browser width and then reduced it down.

One final note: Google has now started to roll out DFP Responsive ads.

Upvotes: 1

Related Questions