5

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.

OsiriX
  • 390
  • 4
  • 19
  • Checking browser width is not the way to do it, if you truly want to differentiate between desktops and mobile devices. My phone has a higher resolution than my monitor. Is there a reason you're more inclined towards screen size than device type? – Reinstate Monica Cellio Mar 14 '14 at 16:15
  • It's for a responsive design, so how the website looks (and which ad to show), depends on the browser width and not if it's a mobile or not. I may have explained it a bit weird :) – OsiriX Mar 14 '14 at 16:23

3 Answers3

9

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

OsiriX
  • 390
  • 4
  • 19
  • 1
    In 2016 this is still valid: `Techniques to avoid: Hiding ad units at anytime (e.g., display:none), unless you're implementing a responsive ad unit` and confirmed by [Google](https://support.google.com/adsense/answer/1354736?hl=en) – marcanuy Jul 01 '16 at 20:07
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>');
}
Amit Agarwal
  • 10,910
  • 1
  • 32
  • 43
  • Thanks for your comment, but I'm not sure if I understand it completely. Do you mean something like http://jsfiddle.net/Kr4tZ/ or are you suggesting anything else? (PS: Not working on jsfiddle, it's just to show the code) – OsiriX Mar 16 '14 at 17:28
  • document.write is disallowed in JSFiddle. – Amit Agarwal Mar 17 '14 at 16:46
  • Yeah I know, but I just posted it there to show you the code. Is that the way you meant it in your example? – OsiriX Mar 17 '14 at 19:04
0

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

Siddhu Arevindh
  • 23
  • 5
  • I also read this post a few times, but I can't see how I can use it? It's always writing adsense code inside the html. – OsiriX Mar 14 '14 at 16:25