Adblock Checker and Notifier
Description: Ad blockers are being used by an increasing number of web users, and for publishers (like us) that rely primarily -or even solely- on ad revenue for the upkeep of a site, the negative impact comes sooner or later. Adblock Checker is a small script that checks whether a user is using one of the common Ad Blockers on your site, and if detected, displays a tasteful message urging him/her to disable it. Specifically, AdBlock Checker does the following two things:
-
Detects whether the user is using a common Adblocker on the current page, and if so, adds a CSS class of "
adblocked" to the document root element. This lets you style your page differently or hide/show certain elements, by referencing a selector like the following n your CSS:html.adblocked #someelement{}. -
Animates a message into view at the bottom of the page for visitors with an Adblocker enabled. Clicking on the "dismiss" button inside dismisses the message for the remainder of the user browser session.
Demo: If you're using an Adblocker, you should see a message at the top of the page encouraging you to disable it (please do!).
For the rest of you, click here to manually show the message.
Directions:
Step 1: Add the following code to the <HEAD> section of your web page:
Free feel to move the CSS and JavaScript code above into existing or independent .css and .js files if you're deploying Adblock Checker and Notifier across many pages.
Step 2: Now add the following sample message DIV anywhere as a direct child of the BODY element on your page, such as at the very bottom:
Customize the contents of the message above any way you like, though do not remove the two ID attributes inside the main DIV container, and "dismiss" button, respectively. And that's it! The message DIV will only be shown to users with a common Ad Blocker enabled on your page, and clicking on the "dismiss" button prevents the DIV from showing again on all pages the script is added to until the next browser session.
More Information
As mentioned, the script does the following two things:
1) Adds a class of "adblocked" to the root HTML element if the user
is using an Ad Blocker on the page
This opens the door for modifying your page in various ways depending on whether a visitor is using an Ad Blocker on the page or not. For example, you could display your own custom message to Ad Block users by hiding it initially on the page, only to reveal it using CSS to those audiences:
<style>
#pleaseunblock{
display: none; /* hide this DIV by default */
}
html.adblocked #pleaseunblock{
display: block; /* show to Adblock users */
}
</style>
<div id="pleaseunblock">
Please unblock AdBlocker to support this site!
</div>
Or taking the opposite approach, you could hide regular content on your page for Ad Block users to discourage them from using it:
<style>
html.adblocked div.contentcolumn{
visibility: hidden; /* Hide this content from AdBlock usrs */
}
</style>
Hiding entire swaths of content may be a little extreme, so you'll probably end up implementing a more toned down version of the above.
2) Displays a stylized message at the very bottom of the page to Adblock users once per browser session
The second function of the script is more for your convenience-
it displays a personalized message to Adblock users out of the box that once
dismissed won't appear for the rest of the user's browser session. While testing
to see what the message looks like, you may want to turn on the "debug"
option inside the script so you can see the message even without any Ad Blocker
enabled:
var debug = true // set debug to true to always display ad block message, for ease of styling and debugging. Set to false on production page
Set this variable to true as you style and tweak
the message to your liking, and set it back to false to only show
it to visitors using an Ad Blocker on the page.
Inside the message DIV, clicking on the "dismiss" button hides the message throughout your site where you've added the AdBlock Detector and Notifier script for the rest of the browser session, so you don't further alienate these viewers.
If you wish to remove the 2) function and handle what Ad Block
enabled users see or don't see entirely by yourself, you can do so just by
deleting the function adblockaction() from the script:
function adblockaction(){ // remove this function to disable top
var msg = document.getElementById('blockedmessage');
var dismiss = document.getElementById('dismissmsg');
var hideblockedmessage = getCookie('hideblockedmessage');
if (hideblockedmessage && debug === false){ // message shown already (per session cookie)?
msg.style.visibility = 'hidden' // complete dismiss the message
}
else{
msg.classList.add('showmsg');
}
dismiss.addEventListener('click', function(){
msg.classList.remove('showmsg');
setCookie('hideblockedmessage', 'yes');
})
}
You can also remove the entire CSS that came with the code you of Step 1 above. This will disable the default notification from appearing at the bottom of the page for Ad Block users, leaving how to coax these users into turning off AdBlocker entirely to you.
A More Aggressive Adblock Notifier
Now, by default, the Adblock Notifier is cordial and not only can be dismissed by clicking on the "dismiss" button, but won't pop back up again for the rest of the browser session. Sites sites such as Forbes or Business Insider use Adblock Detectors and display a message that can't be dispelled, and will only cease to display when the visitor disables Adblock. For those of you that wish to modify Adblock Notifier to behave the same way, simply replace the code of Step 1 with this slightly modified code instead:
Alternate Code of Step 1 (Aggressive): Replace the original code of Step 1 above with the below instead:
Inside the original code of Step 2, also remove the "dismiss" button markup:
<b id="dismissmsg">Dismiss</b>
This version of the Adblock Detector and Notifier won't be so easily brushed aside, and will automatically disappear only after the visitor has whitelisted your page in their Adblock setting.