APLawrence.com -  Resources for Unix and Linux Systems, Bloggers and the self-employed

Hiding Adsense on narrow screens


2015/04/09

There was a time when this site earned good money from Adsense ads. That was years ago; today it's hard to squeak a hundred dollars a month from it. No big deal - I don't depend upon the Adsense money. It's nice to have something to offset the hosting costs and I'm happy enough to have that.

But when I switched to "responsive design", the Adsense plummeted drastically. What used to be a few dollars a day became one dollar and less - sometimes much less!

I felt there must be something wrong, so I sent email to Adsense support. By the way, you aren't allowed to do that if your Adsense falls below $100 monthly, so if this trend continues I won't be able to get any help from them at all. As I have learned, that hardly matters: Adsense email support is just about useless.

My question was whether I had inadvertantly violated any rule or caused some problem by changing the site layout. I got no answer to that, only the same advice you'll find at Ad placement policies.

What a great job Adsense Support is - just point people at existing documentation. I wonder if it pays well?

I did realize that there might be a problem with the new design as the right side bar gets pushed to the bottom of the screen on narrow devices. Google doesn't like ads there and although I could not get a definitive answer out of the email help, I decided I better fix that. It's not too hard; you just have to hide the ad when the screen is narrow.

Note: you can ONLY hide the new "responsive" ad units. Doing this with other ads is still a violation. See Hiding a responsive ad unit.

Here is what you do:


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

That displays a 336 x 280 ad on a normal computer screen, a 300 x 600 on an iPad or similar tablet, and nothing at all on an iPhone or similar screen. I may need to fine tune that as common displays change, but it gives me the flexibility to do whatever I need.

You are adding the tag "adslot_1" to the ad code. Google tends to frown on modifying their code, but they bless this technique.

You can test any url at Screenfly to see how it looks on various devices.

Whether that will fix the low revenue remains to be seen. I should probably consider putting a banner at the top in those cases; that could just be the inverse of this - hiding the banner when the screen is not narrow.



Got something to add? Send me email.





(OLDER)    <- More Stuff -> (NEWER)    (NEWEST)   

Printer Friendly Version

-> -> Hiding Adsense on narrow screens




Increase ad revenue 50-250% with Ezoic


More Articles by

Find me on Google+

© Anthony Lawrence



Kerio Samepage


Have you tried Searching this site?

Unix/Linux/Mac OS X support by phone, email or on-site: Support Rates

This is a Unix/Linux resource website. It contains technical articles about Unix, Linux and general computing related subjects, opinion, news, help files, how-to's, tutorials and more.

Contact us





Any problem in computer science can be solved with another level of indirection. (David Wheeler)

Everyone knows that debugging is twice as hard as writing a program in the first place. So if you're as clever as you can be when you write it, how will you ever debug it? (Brian Kernighan)







This post tagged: