I'm working on an ad funded project. Really something subtle and content aware, not lame popups for genital enlargement etc.
Since the project is ad funded, people with Ad Blockers will not benefit the project, (since they obviously don't know the ads on that specific site is not that bad).
How can I display an alternative content for people with ad blockers? Something like
We noticed you have an active Ad Blocker. Example.com is ad funded, we promise our ads are of high quality and are unobtrusive. The best help you could provide to keep us running, is to whitelist us in your ad blocker. Thanks!
How can I test for an ad blocker?
Found an example! http://mangastream.com
Ad Blockers basically manipulate some elements with some IDs or jQuery like selection rules, stored in their database, it is done a while after the DOM is ready.
So you have to check if your ad element is manipulated or not after a certain time for example 3 seconds after the DOM is ready. You can basically check the display (because AdBlockers hide it) CSS property or the innerHTML of your ad element. Below is an example:
Working Demo: http://jsfiddle.net/cxvNy/ (Tested using AdBlock for Chrome, you need to have this active)
If your Ad HTML is:
<div id="google_ads_frame1">aa</div>
Then:
$(function(){
setTimeout(function(){
if($("#google_ads_frame1").css('display')=="none") //use your ad's id here I have used Google Adense
{
$('body').html("We noticed you have an active Ad Blocker. Example.com is ad funded, we promise our ads are of high quality and are unobtrusive. The best help you could provide to keep us running, is to whitelist us in your ad blocker. Thanks!");
}
},3000);
});
Hope above code is self explanatory :)
Eventually, I used the following implementation (similar to this site's). The following code is used:
function abp() {
if ($('.ad').height() == 0) {
$('.ad').css("height", "90px");
$('.ad').css("background-image", "url(/static/images/msblock.png)");
}
}
$(abp);
At the very end of the document. Seems to be working like a pro. Thanks for everyone's excellent answers, upvotes for all!
Shooting from the hip here, but methinks you can check the content of your ad's div with some javascript after the page has loaded.
<!-- html -->
<div id="MyAdDiv">
<div id="BeaconContainer" style="display:none">I rendered!</div>
// Ad content here.
</div>
// javascript
var d = document.getElementById("MyAdDiv");
if ( d.innerHTML.indexOf("I rendered!") === -1 ) {
// Your ad has been blocked.
// Run code to launch WhiteList request message.
}
I don't know exactly when the adblocker does it's thing, so it would probably be a good idea to delay this function's execution for a few seconds with setTimeout(). There's probably some interesting stuff you could do with some ajax calls, too, like collecting stats on how many users are running ad blockers. Management just loves that kind of stuff.
UPDATE:
I just installed adblock for Chrome and checked it against StackOverflow. It looks like AdBlock just removes the contents of the ad container, so the method above will work.
The most common trick is to create a JavaScript file with a name which is commonly blocked by adblockers, for instance /ads/advert.js.
If the file gets blocked, you know the visitor has an adblocker enabled.
CSS files usually don't get blocked by adblocker lists, so this would be a safer approach.
This can be done with simple JavaScript also, without using jQuery.
<script>
window.onload = function(){
setTimeout(showAdblockImage, 3000);
};
function showAdblockImage(){
//get all google ad elements
var adsList = document.querySelectorAll("ins.adsbygoogle");
if(!adsList){ return;}
for(var i=0; i<adsList.length;i++){
if(adsList[i].innerHTML.replace(/\s/g, "").length != 0){
//AdBlock is not active, hence exit
break;
}
//apply inline css to force display
adsList[i].style.cssText = 'display:block !important';
//modify html content of element
adsList[i].innerHTML='<img src="imageurl/img_1.jpg" />';
}
}
</script>
Ref: Place alternate content in place of AdBlock Censored Ads
I don't know how ad blockers work but for example a Chrome ad blocker I have lets me pick a specific DOM element containing ad to be removed: <div id="ad_holder"> ... ads ... </div>, and the blocker would remove it somehow.
If you put some javascript inside that div, with a short timer, that would modify a global variable, and another timer that executes afterwards, reading that global variable, could you then assume there're no ad blockers on the page if the variable was properly set? What happens if the blocker removes the div after Chrome evaluating that javascript, would the timer stil manage to set the variable although the parent div was removed?
AdBlock also maintains a public list of 'bad' servers (http://www.doubleclick.com ?) and will probably block http requests for content from those servers. This can be done if it integrates with Chrome so that it can define some sort of a content policy - what gets loaded and what doesnt. This case you can detect with the previously described approach. If your client is an ad provider, i guess sooner or later it will end up black listed :)
The blocker might only modify the CSS and hide the whole div, but this could be easily detected.
My favorite approach is to simply add a class of 'ads' or 'ad' or something similar around all nice large useful content blocks on my site, then when people with an ad blocker view it, they don't see anything.
They're forced to disable their ad block in order to see the content.
Don't bother with warnings, let them figure it out. It's not dummies using ad blocking software.
Here is the current list of block rules from some popular adblock extensions. Simply pick a class or id that they are blocking (use your developer tools to view the list of css classes)
<script> // Run after all the page elements have loaded window.onload = function(){
// This will take care of asynchronous Google ads
setTimeout(function() {
// We are targeting the first banner ad of AdSense
var ad = document.querySelector("ins.adsbygoogle");
// If the ad contains no innerHTML, ad blockers are at work
if (ad && ad.innerHTML.replace(/\s/g, "").length == 0) {
// Since ad blocks hide ads using CSS too
ad.style.cssText = 'display:block !important';
// You can put any text, image or even IFRAME tags here
ad.innerHTML = '<img src="http://blog.liveurlifehere.com/wp-content/uploads/2015/01/adblock.jpg" width="300" height="250" />';
}
}, 2000); // The ad blocker check is performed 2 seconds after the page load }; </script>
Use this code you can set image in replacment of google ads
You can implement https://github.com/sitexw/FuckAdBlock which is very good and easy to use.
Related
Cloudflare has added the RocketLoader option which adds if (!window.__cfRLUnblockHandlers) return false; to my onloadstart.
<video id="video" onloadstart="if (!window.__cfRLUnblockHandlers) return false; this.volume=0.01" loop="">
Since it adds window.__cfRLUnblockHandlers the volume that plays is super loud when people click play. As this.volume=0.01 no longer gets detected.
I have tried a few things like adding this
var __cfRLUnblockHandlers = 1 ;
or
<script>
window.__cfRLUnblockHandlers = true;
</script>
Both do not work and cloudflare still forces __cfRLUnblockHandlers onto my onloadstart.
At the moment I am unable to turn off RocketLoader. Is there a way to fix this without changing the cloudflare settings.
The answer should be to disable "Rocket Loader" within the Speed / Optimization area of the CloudFlare control panel.
If you feel that you need the performance benefits of Rocket Loader then you can also disable for areas or specific pages in the website using the "page rules" functionality of CloudFlare.
you can add a new page role in CF for your specific page to bypass the rocket loader.
so most of you must be using the AdBlock or AdBlock Plus plugin in your browsers to stop the annoying ads and popups from getting displayed.
But now some devs have developed a script FuckAdBlock that helps the site owner to detect whether I have AdBlock or AdBlock Plus on my browser or not.
My question is how can I disable this script.
I had few ideas that I tried but didn't get anywhere.
From the chome dev tools -> Source, I copied the link address of the script and added to blocked address in AdBlock Plus. Still the file is being loaded. Don't know why.
This script is adding
if(window.fuckAdBlock === undefined) {
window.fuckAdBlock = new FuckAdBlock({
checkOnLoad: true,
resetOnEnd: true
});
}
So I wanted to add an Object.observe on window.fuckAdBlock, so that whenever it got changed I can change it back to null. But unfortunately I don't know how to use it properly.
At last I disabled the JS on that particular site. It disabled the plugin but also some other functionality also.
Somebody already solved the problem here. The script is quite short (103 lines). It works by changing some values in the FuckAdBlock script.
I wonder when the FuckFuckFuckAdblock script will be written though.
So if you visit http://movableink.com/ on Safari on iOS9.
Then click in the header on http://movableink.com/partners
On first visit or slower connections the entire page renders blank in safari.
This is a pretty standard page. There's no specific code to call out that might be causing this. This is a new page with a different css file, it's the first responsive page.
However, the text and content is selectable (but not here) and also if I check it out in the Safari developer inspector when the phone is plugged into a mac there is also nothing notable covering the page.
You may want to look in private browsing, you will want to open up the homepage first and then click on 'Partners'.
What could possibly be causeing this issue of the page disappearing?
I could reproduce this on my iOS 9 device very well if there was an ad blocker active (in my case: Crystal and Lionz). Without this ad blocker active the page was loading smoothly without a blank screen.
By using another ad blocker (e. g. 1Blocker) the page is also running smoothly.
For me the problem is only related to certain ad blocker apps on iOS.
I did some tests, it could be just request timing issues due to either un-optimised server code (like regenerating the whole site stack every first request from a client), or generating CSS.
On first load it is consistently 700ms, regardless of mobile or desktop. Safari will be more sensitive on the mobile as it processes not as many parallel resources after it has a list of url's to get.
If you are using a CMS, check for Optimising / Caching solutions in built into the system and switch that on, see if it changes the load times.
Another alternative is Cloud distributed CDN's such as Cloud Flare (free for basic, other plans for more intensive).
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.
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, ±…