Welcome to WebmasterWorld Guest from 18.206.48.142

Forum Moderators: martinibuster

Message Too Old, No Replies

How to hide adsense ad link on small devices

     
9:47 pm on Aug 10, 2018 (gmt 0)

Junior Member from FR 

joined:July 29, 2017
posts: 47
votes: 2


Hi guys!

I am using a responsive ad link units in the right sidebar of my website. I would like to hide it on small devices "mobile and tablet" without breaking Adsense TOS. Please Help!

here is the code:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Responsive links -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-********************"
data-ad-slot="***************"
data-ad-format="link"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>


Thank you so much in advance!
11:30 pm on Aug 10, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:12913
votes: 893


There are several approaches to show different content depending on device size. My favorite is to do it with a Media Query [w3schools.com] that calls some DIVs and not other DIVs by screen size.
3:41 am on Aug 11, 2018 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4456
votes: 330


An example of that would be to have the code posted above placed in a div class which is a part of the overall css and add that div class to the media query section pertaining to tablet or smaller with the property of "display: none;"

The CSS for the "ads" class div would be similar to:
div.ads
{
margin: .4em;
padding: .3em;
text-align: center;
display: block;
}

@media only screen and (max-width: 767px) {

.ads {
display: none; }
}

The HTML would be similar to:
<div class="ads">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Responsive links -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-********************"
data-ad-slot="***************"
data-ad-format="link"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>



4:46 am on Aug 11, 2018 (gmt 0)

Full Member

10+ Year Member

joined:May 25, 2006
posts:300
votes: 36


It is preferable to use the code given for Hiding an Ad Unit at [support.google.com...] to do this.
This is similar to the example above but the ´hidden’ class is applied within the google Adsense code, I am pretty sure google have said this is the only authorized method, since otherwise they do not know an ad is hidden and will still think an ad is being shown...
4:52 am on Aug 11, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:12913
votes: 893


otherwise they do not know an ad is hidden and will still think an ad is being shown
Google knows exactly what ads display and what ads do not display.
5:20 am on Aug 11, 2018 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4456
votes: 330


I agree with Rasputin, I just posted the example in case that was what Nazhahp was wanting to do. The best reason not to use that method is that "display: none;" will not display the contents of that div, but it will likely load it anyway.

In other discussions here, using the CSS "display: none;" to hide an image from small screens still downloads the image although it is not viewable. The only way to be certain that the script is not executed is to follow the instructions in Rasputin's post.
5:55 am on Aug 11, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:12913
votes: 893


Agreements aside, when I run a page I've made through Google's speed test then compare desktop with the smart phone, there are different ads. That shows which ads Google sees.

You can still style your div with display:none if you like but it is not needed.
9:32 am on Aug 11, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Nov 13, 2016
posts:1194
votes: 284


Yes, Adsense knows if a div is hidden or not, the same way it computes the size of the available space to select which ad to display (responsive).

Alternatively you can also do this :


<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Responsive links -->
<script>
if(screen.width>728)
{
document.write('<ins class="adsbygoogle" ');
document.write('style="display:block" ');
document.write('data-ad-client="ca-pub-********************" ');
document.write('data-ad-slot="***************" ');
document.write('data-ad-format="link" ');
document.write('data-full-width-responsive="true"></ins>');
(adsbygoogle = window.adsbygoogle || []).push({});
}
</script>
12:15 pm on Aug 11, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Dec 12, 2004
posts:658
votes: 14


Just inspect the rendered page and you should see the following comment inside adsense 'ins' tag if you've implemented it correctly;

<!--No ad requested because of display:none on the adsbygoogle tag-->
8:11 pm on Aug 11, 2018 (gmt 0)

Junior Member from FR 

joined:July 29, 2017
posts: 47
votes: 2


Thank you guys for all tips and help!
11:25 pm on Aug 11, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:12913
votes: 893


The only way to be certain that the script is not executed is to follow the instructions in Rasputin's post.
Not the only way, there are many ways not to load the ad. Yes, your example will load the ad, just not display it. Actually that's fine as I said, but there are ways that give you more control. The Google example does not give the site owner any control.

Media Query combined with SSI to display styled Divs containing the ad code is the best option to control where, how & to whom the ad is loaded and displayed. Which ad type, loaded for what size screen, to what visitor, etc...
12:35 am on Aug 13, 2018 (gmt 0)

Junior Member from FR 

joined:July 29, 2017
posts: 47
votes: 2


I exactly did what you said, i used the given code on google support to hide the code on small devices.. Thank you for you suggestion and help!

@Raputin, Could you please confirm that the code i have just implemented works fine and doesn't break their TOS.

<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-***************"
data-ad-slot="************"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>


Kind regards!
5:19 am on Aug 13, 2018 (gmt 0)

Full Member

10+ Year Member

joined:May 25, 2006
posts:300
votes: 36


Looks good to me.
Personally I also remove the line
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
from each individual ad unit and just add it once at the top of the page (an approved modification) but of course you don’t have to do that.
Cheers
8:19 am on Aug 13, 2018 (gmt 0)

Junior Member from FR 

joined:July 29, 2017
posts: 47
votes: 2


Thank you SO MUCH!

Cheers!
11:04 am on Aug 18, 2018 (gmt 0)

Junior Member from FR 

joined:July 29, 2017
posts: 47
votes: 2


Hi again!

@Rasputin, I followed your recommendation to use google's code to hide the ad on smile devices, it works fine, but it displays in other mobile phones as Iphone 6 plus and other devices with a display of 414 * 736 plus tablets.

I would like to display the ad only on big screens since it is an "ad link unit" to prevent accidental clicks while visitors scrolling down.

what do you think of Dimitri's code ?

can you help me ?


Kind regards!
6:28 pm on Aug 18, 2018 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4456
votes: 330


Looks like all you would need to do is edit the code. If the code you posted previously is what you are using, just change this line:
@media (max-width: 400px) { .adslot_1 { display: none; } }
to this:
@media (max-width: 415px) { .adslot_1 { display: none; } }
that sets your ad script to "display: none;" for devices up to 415px width rather than the 400px width which was posted.
6:40 pm on Aug 18, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:12913
votes: 893


And if you're putting all those spaces into your stylesheet, you can use a text editor to remove that superfluous space & significantly condense the file for faster loading.
8:23 pm on Aug 18, 2018 (gmt 0)

Junior Member from FR 

joined:July 29, 2017
posts: 47
votes: 2


@not2easy
Thank you so so much for your help!

@keyplyr I don't know how to that !
8:36 pm on Aug 18, 2018 (gmt 0)

Senior Member from FR 

WebmasterWorld Senior Member leosghost is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Feb 15, 2004
posts:7139
votes: 412


Nazhahp..look / search for "minify"..there are many online tools that will do it, and some text editors that you can install can do it "offline"..
Or you can do it manually.
9:58 pm on Aug 18, 2018 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4456
votes: 330


I'm not sure that moving the AdSense-only css away from their script is the ideal way to use it. If AdSense is instructing people to hide visibility using this method, it may be best to use it as AdSense presents it.
11:12 pm on Aug 18, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:12913
votes: 893


I didn't suggest moving it, although that works too.
10:14 pm on Aug 25, 2018 (gmt 0)

Junior Member from FR 

joined:July 29, 2017
posts: 47
votes: 2


Thank you guys for all your help and recommendations. I do have another question, Hope i get the answer.

I took the code provided by adsense support to hide ads on small devices and played around it little bit whereby i can use it hide code on dekstop and display it on small devices. I don't have enough knowledge to confirm if the code is safe and respect their TOS. what do you think ?

<style type="text/css">
.adslot_1 { display:inline-block; width: 320px; height: 90px; }
@media (max-width: 800px) { .adslot_1 { display: none; } }
@media (min-width:500px) { .adslot_1 { display: none; } }
@media (min-width:400px) { .adslot_1 { width: 300px; height: 200px; } }
</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>



Thank you so much in advance!
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members