Tips To Get The best From Responsive ADsense

We all know that Adsense income is declining. With the popularity of Adblockers, this is unlikely to get any better. But that is no reason not to try to maximize what income you do generate. If anything, it is even more important to optimize your Adsense and maximize your earnings than at any time in the past.

Update: It appears that google is getting tough on their policy of "no adsense bigger than 300px wide on mobiles, and no blocks above the fold" People are reporting getting emails with ultimatums to fix, or else. So it's more important than ever to address any issues that you might have. Especially if you have received one of those emails... you are now on Googles radar!

Use The Responsive Adsense Code?

You would assume this is the best idea. Just generate the correct responsive code in your Adsense account, put that on the page and let Google do the rest.

Unfortunately, it just doesn't seem to be as effective as "normal" Adsense. I am not the only one to discover a sharp drop in income as soon as I put these new ads on my pages. You can read more about responsive ads in this SBI forum thread.

Hiding Adsense From Mobile Devices

Use a DesktopOnly block? NO! Google are very clear on that. Why? Because if you simply hide the code using display:none; (which is what a desktopOnly block will do) then the code is still in the background and gets loaded to the page. It just doesn't display. And that is guaranteed to upset advertisers that choose to buy their ads based on impressions... they are paying for ads that can never be seen or clicked. This will put you in Google's naughty corner, and that is not where you want to be.

Optimizing For Mobile: The Solution

Solution 1. Do nothing. OK, so this isn't the best one, but it's something a lot of people do. They just leave their desktop adverts on the site and cross their fingers that they will be alright on mobile devices.

Unfortunately, many people use the larger rectangles which really isn't mobile friendly at all. In fact, having a 336px wide advert displaying on a small phone  can get you a warning... or maybe even suspended.

I actually use the same advert on all devices (yes, I'm a bit lazy in that respect). But there are a couple of things that I do to ensure I comply with the Adsense T.O.U.  Firstly, my first ad block is lower down the page. Generally below the fold, even on a desktop. next I use either a 250px or  300px wide rectangle, so it is not too wide even on 320 x 480px phones. And lastly, I have it set into a div that is styled to display full-width on smaller phones, so text doesn't wrap around it. While this works for me, it is possibly not as versatile as the next solution, which is to change or even hide the adverts on some devices, but in a way that is acceptable to Google. Note: I change around so what I have today may not be what I've got tomorrow!

Solution 2. Hide/Change Adverts for mobile the correct way. This is probably the best method, and it won't get you in trouble with Adsense. Yes, we can use display:none; but we do it in such a way that the advert is never actually loaded, so we are not breaking any rules.

The code You Need

This is exactly the  same as I am using on my Love Of Roses website. I have a small addition to the code provided by Google. And that is the data-ad-format="auto". Thanks to Will (another of the pro coaches) for pointing out that if this is not present, then the advert will not refresh on orientation change! Thank you Will! 



<style>
.responsive-top { width: 250px; height: 250px; margin:10px auto 15px auto; display:block; }
@media(min-width: 360px) { .responsive-top { width: 320px; height: 100px; margin:10px auto 10px auto; display:block; } }
@media(min-width: 480px) { .responsive-top { width: 468px; height: 60px; margin:10px auto 10px auto; display:block; } }
@media(min-width: 800px) { .responsive-top {width: 336px; height: 280px; margin:10px 10px 10px 0; float:left;} }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle responsive-top"
data-ad-client="ca-pub-xxxxxxxxxxx"
data-ad-format="auto"
data-ad-slot="xxxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

What that code means, line by line.

.responsive-top { width: 250px; height: 250px; }
We first set the size of the Adsense for devices that are less than 500px in width. While I named my class .responsive-top it could be anything you like, but there is no real need to change it if you don't want to. We could add a little more css  to get  fullwidth and centered on devices that have a screen width of less than 500px.

@media(min-width: 500px) { .responsive-top { width: 468px; height: 60px; } }
For any device that has a screen width of 500px or more, up to 799px, I have chosen to display a 468px wide banner. Of course as the screen is a bit wider, I could easily fit a floated rectangle in here instead, perhaps a 250px square. 

@media(min-width: 800px) { .responsive-top {width: 336px; height: 280px;  } }
For all bigger screens 800px and up, I have chosen to display a large floated rectangle. 

data-ad-client="YOUR ID GOES HERE"
You can find what this is, by looking at any adsense code you have, either in your Adsense account or the source of a page where you are using Adsense. 

data-ad-slot="PUT YOUR AD SLOT NUMBER HERE"
This should match one of your ID numbers that you have in your Adsense account for different ad sizes. But not having it won't stop your ads from working, so don't worry about it toooooo much. However, if you can, try  get the ad slot number to fill in with your new code. 

Googles' recommendation is to create a responsive ad unit, and then make a note of the data-ad-slot number. I suggest that you do that.

So what is that data-ad-slot anyway? When you create an ad size in your Adsense account, you might have noticed it gets assigned an ID number. That is so you can track it with channels. This ID # is what goes into the data-ad-slot and each advert will have it's own unique number. But as I said, if you get this wrong, or don't even have anything at all there, things will still work, you just won't have the channel tracking working correctly.

Using display:none; with this code

If you recall, I said using display:none; was against the Adsense rules, so why am I suggesting that you can use it in this case? The answer comes down to the way this code executes. An example will help you understand this.

Where we have this...
.responsive-top { width: 250px; height: 250px; }

suppose I put this instead...
.responsive-top { display; none; }

What's going to happen, and why is this different than putting the Adsense code into a div that is set to display:none;?

With this setup, the Adsense code is never actually loaded onto the page, meaning it can never display "hidden" adverts. Is Google OK with this method? Yes they are, in fact the code comes from a suggestion that they use in their Adsense documentation. 

The script checks your code, sees that you don't want an advert with screens less than 500px wide (or whatever you have chosen), and therefore never loads an ad onto the page. 

Of course it is always recommended to do your due diligence (it's your Adsense account, after all!). But here is a link to the Google help page that specifically endorses this method to hide Adsense units from various devices. Check this Google help page. 

Quick Summary

  • Copy and paste the code above into any position on your page that you want the adsense to display (or not be seen, as the case may be)
  • Put your Adsense publisher ID and the Adslot id into the code as directed
  • Choose your breakpoints, if you wish to modify them from the example. Remember...the very first Ad unit in the code is what you will see on small devices, and each break point works up from that. You can add extra rules to the styling. For example, set the smallest adsense to be centered with margin:10px auto; And the largest to float left with float:left; margin-right:10px;

<script>
window.onorientationchange=function()

{var orientation=window.orientation;switch(orientation){case 0:window.location.reload();

break;case 90:window.location.reload();

break;case-90:window.location.reload();

break;}};
</script>

Comments

Have your say about what you just read! Leave me a comment in the box below.

Need a pro to set this up for you? Then just use the contact form to ask about hiring me.