I am trying to hide an adsense ad unit on smaller screen sizes for responsive design purposes.
I am aware of https://support.google.com/adsense/answer/3543893?hl=en&ref_topic=1307438
which indicates you are allowed to use css media queries to hide a unit as follows:
#media (max-width: 400px) { .adslot_1 { display: none; } }
I have tried that but keep on getting the following error for the screen sizes that I don't display the ads on:
"Cannot find a responsive size for a container of width=0px and data-ad-format=auto"
I find the following JavaScript solution much simpler and would prefer to use it instead of the media queries. I just add a test and do not call the adsense code unless the screen size is a sufficient size. It solves the error I was getting and I imagine it will save a request to the adsense servers as well(full disclosure: I do not understand the adsense code at all).
if ( $( window ).width() >= 600 ) {
(adsbygoogle = window.adsbygoogle || []).push({});
}
Would an implementation like the above violate any of the programs policies/guidelines? Is it a reasonable and appropriate way to not display the ad units on certain screen sizes?
http://detectmobilebrowsers.com/
Check this website out, there you can find ready to use scripts to detect if the user is on mobile or desktop, that way you can tell if he is on mobile and hide the Adsense block, or even better, you can call a "Responsive AD ID" from the Google Adsense, which is also recommended for mobile by Adsense itself.
If you still need a more simple way to detect if the user in on mobile, try this out.
html.
<div class="my_responsive_add">
your ad
</div>
and css.
.my_responsive_add {
display:inline;
}
#media (max-width:#maxResponsiveWideWidth){
.my_responsive_add {
display:none;
}
}
I would recommend you to not hide the AD, and use the responsive ad, as it will look good on mobile users, and that way you can get clicks from mobile users.
To answer your question, I believe that by hiding the AD, it will not violate any of the program policies as far as I know, since that specific AD will not get any Clicks at all and it will remain "quiet" and will not drag attention.
Hope this helps a little, good luck.
Take a look here Modification of the AdSense ad code to read about adsense program policies particularly the 'Acceptable modifications'
If anybody still got the same problem with display:none. I fixed it by removing the data-ad-format parameter from element. and keep everything else the same as documented by Google here at 'Hiding an ad unit' section, which means control the format using CSS media queries.
And it makes sense because you cannot set the format as auto when you specify the data-ad-format value and then control it by CSS.
Related
Making a document for the designers that displays the desktop and mobile examples of each visual component in a style library. Client wants to see the examples of each on the page at the same time.
Currently doing this by putting it in an iframe, similar to here. Unfortunately the iframe solution is causing odd complications and side-effects.
I was wondering if theres a better/simpler way I can tell the container of the mobile example to use the mobile breakpoint media queries?
I'm making a website where the user sees a text when hovering over an image. Problem is, it doesn't work on mobile devices(touchscreen etc). So I have been coding a script which will detect wether the client is desktop or mobile, if it's mobile, it will show the text over the image instantly.
But it's not really working. Can someone find my mistake?
Here's the link to the test webpage: Link.
Code can be found in the head. (sorry i dont know how to paste it in)
Thanks!
something like bootstrap would automatically turn your hover events into click events on mobile
Another option would be to use #media queries to make them visible on mobile
use #media(min-width:768px){
.textOnHover{
visibility:visible;
}
}
Rather than browser detection you should be using feature detection for this kind of task. Take a look at Modernizr for detecting touch functionality on the client's browser. You can then use their JavaScript API to solve your problem.
If you opt for CSS class names in your Moderniser build, it will add helper classes to your <html> element so you'll be able to use an entirely CSS solution, like so:
.touch .text {
visibility:visible;
}
Im trying to display a background image where usually a 300x250 ad would be, but only when adblock is blocking the ad. Anyone know how this can be done? Using a div causes the background to show before the ad loads which I do not want.
Thanks
Since adblock software is installed on the visitor's computer, there is no way to know if an ad is blocked (that I can think of). But, since ads are displayed with JavaScript - which is targeted and blocked specifically by the adblock software - you might be able to write some JavaScript that checks whether the ads were loaded at the end of the page, and if not, add a CSS class to your div showing the background image you want. Pseudo code:
<style type="text/css">
.adblocked { background: url("img/no-ad.jpg") left top no-repeat; }
</style>
<div id="ad"></div>
<script src="ads.js"></script>
<script>
if (typeof adLibraryName === "undefined") {
// ad stuff was not loaded
document.getElementById("ad").className += " adblocked";
}
</script>
This, as MAXIM stated, has nothing to do with PHP and there is no way that you can get it to work with PHP, because PHP runs on the server and does not know if ad blocking is installed. Simply put, all of this is a client side problem.
To check if Adsense is being blocked, and therefore load alternate content into the ad containers.
if (typeof(window.google_jobrunner) == 'undefined') {
// Adsense is being blocked, load something else into the containers
}
It's a good idea to set the height of the containers with CSS if doing this.
You can check what Adblock Plus is blocking in Firefox, by selecting 'Open blockable items'.
Adblock Plus also blocks images with common ad dimensions in the filenames, eg 'whatever_468x60.png' will probably get blocked.
since you tagged your question with PHP I'll answer with php glasses on:
The problem with this is that adblocking is client-side, adding a div via php is server side. So you would first have to know what happens on the client-side ans THEN compose your code - but that won't work. You could probably still do this through an AJAX request – but that would mean you would first send out the page without knowing if adblock is activated anyways…
cheers, ±…
I'm building an in-browser application for my company's internal use. It would be helpful if my users could quickly switch between 6 different browser dimensions. I've tried using window.resizeTo, but it seems most modern browsers are disabling any sort of coded resizing. Safari seems to be my only exception for Mac users, but I'm concerned that they too will follow suit with Chrome and FF.
Is anybody aware of any work-arounds or user opt-ins? I've found a Chrome extension that can get the job done, but ideally there wouldn't have to be any sort of configuration or 3rd party extensions as some of my users have very strict permissions on their machines.
No, that's not possible. Otherwise all kind of ads would ask the user to allow them to resize themselves in the hope some people allow it (and thus most likely allow it for the whole adserver used by tons of websites).
You could wrap your application's content in a <div> with overflow: scroll, and resize that actual div. If your application's styles do not allow that, you can wrap it in an <iframe> with the viewport size you want to enforce.
I have a webpage that is quite wide and short on about 3 pages, the pages that are wide and long display fine on a mobile phone browser, but the pages that are short show up on only less than half the screen.
Is there anyway I can make a seperate page for each of those 3 pages and have them come up only when someone is using a mobile phone.
Thanks
You need to insert some JavaScript that will sniff out the User Agent (web browser & version) on each page. Here is a link that explains how to do this:
http://www.quirksmode.org/js/detect.html
Once you have done that, then swap your CSS file for that page to the one appropriate for the device, or redirect to a special HTML page for that device.
If you search Google for 'Responsive Design', there is lots of advice on how to use the same page, but make it appear differently on mobile devices.
Along with "responsive design" you should investigate "media queries" which will allow you to adjust your CSS and help align the elements to the display size of each device viewing it. No javascript necessary.
How to use Media Queries in Mobile
Like others have stated. Responsive web design with Media Queries is best. Check out these sites.
http://www.alistapart.com/articles/responsive-web-design/
http://www.stuffandnonsense.co.uk/projects/320andup/