theKing
theKing

Reputation: 844

How to prevent browsers downloading Google AdSense ADS on Mobile with responsive site?

With media query, I set the Div to display:none which contains AdSense code. However, I wanted to show another AdSense Ad which is in another DiV with display:block.

Need your help in understanding the below: Does display:none will prevent sending the Ad request to Google or prevent it from downloading the AD from Google? My challenge, the last I wanted to show will be fourth AdSense Ad and I cannot show 4 ads as per AdSense policy.

Upvotes: 1

Views: 634

Answers (1)

galeksic
galeksic

Reputation: 2176

display:none on parent div does not prevent ad request from that ad unit:

<div style="display:none">
  <ins class="adsbygoogle adslot_1" ... ></ins>
</div>

That is a violation of AdSense policy about hiding ads: "Hiding ad units at anytime (e.g., display:none), unless you're implementing a responsive ad unit."

To prevent ad request, we need to apply display:none on AdSense ins tag:

<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: 468px; height: 60px; } }
@media (min-width: 800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
  data-ad-client="ca-pub-1234"
  data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

That is "Hiding an ad unit" advanced feature. For the viewport less than 401px, above example will inject <!--No ad requested because of display:none on the adsbygoogle tag--> comment inside ins tag (instead of the advertisement).

I think my "How to 'move' AdSense ads" JSFiddle example is probably what you want - "I wanted to show another AdSense Ad which is in another DiV with display:block". (Move vertical border to see ads "moving".)

Upvotes: 2

Related Questions