Remove adsense on mobile

Question

I'm working on my responsive design but having trouble with adsense.

I have an ad which should show up on the desktop design, but not on the mobile design. So the code of the ad should be placed in the html only if the website is viewed on a desktop. It's possible with css using display: none, but this is against adsense TOS, so not a solution.

I think it's possible with a PHP class like http://mobiledetect.net but I prefer to check the browser width and then decide what to do.

Adsense has an approved example as below, but can I use it for my goal?

<script type="text/javascript">
google_ad_client = "ca-publisher-id";
width = document.documentElement.clientWidth;
google_ad_slot = "1234567890";
google_ad_width = 320;
google_ad_height = 50;
if (width > 500) {
    google_ad_slot = "3456789012";
    google_ad_width = 468;
    google_ad_height = 60;
}
if (width > 800) {
    google_ad_slot = "2345678901";
    google_ad_width = 728;
    google_ad_height = 90;
}
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

I hope someone can point me in the right direction.

Answer 1

You can try something like this to avoid loading the JS on mobile but you should confirm with your AdSense manager if this change is allowed or now.

if (width >= 480) {
  document.write('<script src="show_ads.js"><\/script>');
}

Answer 2

You could try the approach by Labnol Google adsense responsive design , Google Approved

Answer 3

I've contacted the Dutch AdSense support team and got a surprising answer, which I haven't found on the internet yet.

Apparently it is allowed to use display:none when using responsive adsense code. Here is the code that someone from the support team sent to me:

<style>
  .responsive-test { display: block;}
  @media(max-width: 480px) { .responsive-test { display: none; } }
</style>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Resposive_TEST -->
<ins class="adsbygoogle responsive-test"
  data-ad-client="ca-pub-3086914080036003"
  data-ad-slot="1408862175"
  data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Note that it's only allowed when using the responsive adsense code!

I expressed my concerns about the method he sent me, because of the ad implementation policies, which clearly state that display:none has to be avoided. He thinks this article is outdated for the new responsive ads.

He asked one of his colleagues, and also confirmed that the above code is allowed. Although, I still want someone from the community or other AdSense support team to confirm, just to make sure! :D