CODEWITHSUNDEEP
adsense
Sergiu
Sergiu

Reputation: 376

Adsense: serving different ad sizes on different devices

I want to use Adsense on my website for the first time, I encountered some problems in the start stages. I want to use the advertisement with the size manually written in the size space ( width:height ). Display ads - image Here I chose manual size for advertising link

width : 300px; | height : 250px;

Google Adsense says that fixed advertising cannot be responsive: Note that fixed-sized display ad units don’t dynamically change their size or respond to changes in screen orientation.

Finally my question, it is possible to create more ads from large to small from the beginning but with the change of the device to hide the advertising that is not adaptive

example > computer > html : <div class="div1"> </div> <div class="div2"> </div>

example > computer > css : .div1{display: block; width: 300px; height: 250px;} .div2{display:none}

And if device = tablet

CSS

@media only screen and (max-width: 425px) {
    .div1 {
        display: none;
    }
    div2 {
        display: block;
        width: 250px;
        height: 250px;
    }
}

The meaning of the post is if I can hide an ad from google adsesn on different devices.

!!!standard ad will be 300px X 250px if the device is less than 425px for the standard ad to write display none but for another ad that was hidden for the computer to write display block

Google adsense display fixed

Upvotes: 2

Views: 1500

Answers (1)

cazort
cazort

Reputation: 806

Although there isn't a "proper" solution to this, i.e. not one that is using AdSense units the way they were intended to be used by Google, there is a practical workaround that I have been using for years on one of my sites, and that to my knowledge is in line with their policies (they have never complained to me about it.)

The workaround is to use Google's responsive ads, placing them inside divs with fixed widths but variable (unspecified) heights, and using CSS to hide the div's containing the ads if the browser width is outside a certain range. To make this work:

  • Make sure exactly one div displays for a particular screen width.
  • (Optional but recommended) set margin: auto; on each div so that it centers itself horizontally in the layout.
  • Set each div with a fixed width, but do not specify its height. This is because Google's responsive ads may serve ads of different heights so you must leave it flexible.
  • Make sure the div disappears if the screen width gets sufficiently narrow, because you don't want Google serving a fixed-width ad that is truncated because of your layout, that could violate policies.

You can then have up to three "sets" of such divs, and as long as only one div from each set is visible at a time, you will be in line with Google's 3 ad units per page limit. If a window is resized and it reaches a breakpoint in the CSS and triggers a display of a different div size, the ad will simply disappear until the page is reloaded.

How to code the media queries? I recommend only the max-width constraint...it's the property you need, you don't need to look at screen or anything else. E.g. here is some of my code:

div.container_320
{
    margin: auto;
    width: 320px;
    display: none;
}
@media (max-width: 650px) { div.container_320 { display: block; } }
@media (max-width: 354px) { div.container_320 { display: none; } }

Then you can have:

<div class="container_320">
<! –– put adsense code here ––>
</div>

And this will achieve one of your divs. The div will appear only in a fixed range of widths; otherwise it will be hidden.

Then you need to make the others for whatever sets of different widths you want for the different max-widths of the user's browser. Put all div's of a set right after each other in the HTML. You can have as many such divs as you want, but I have found that usually having 3 is sufficient to optimize revenue while keeping the layout looking nice. Use Google Analytics or other data you have to look at the screen widths of people actually viewing your site.

You will need to adjust the dimensions and break points to fit your desired dimensions and layouts. Also, keep in mind the standard ad widths, and optimize that for your revenue. If you set the width to a non-standard size, you will find Google often serves very small ads with a lot of empty padding around them, and this is going to both look poor and forgo revenue because you're displaying in a small fraction of your available space.

Upvotes: 2

Related Questions