We all know that Ads don’t look good at all, but when it comes to blogging the only source of income for almost 90% bloggers is the Google AdSenses and some third-party advertising agencies. Running Blogs without advertisement is like running a restaurant for free of cost; where people come, eat and go without paying any bills.
There are several solutions to stop the users from using Ad Block extensions (Add-ons) or to ask them to disable at least on your website. You can show them a soft emotional message appealing them to disable the Ad blocker plugin or can go a step ahead and force them to disable or whitelist your website.
In this article I’ll be guiding you on adding an ad block detection system in the WordPress and that’s without using any plugin — As plugins are only going to burden your server and are the major source of vulnerabilities. These plugins also uses a lot of server’s resource and sometimes it causes problems like slow server response time and errors such as 500 especially when you are on a shared or low cost hosting.
Step 1: Creating Ad Block Detection Notice
You can create a new page using WordPress admin panel similar to one which I have created for myself — Ad-Blocker Detected!
© Isrg Rajan — Sample Ad Block Message
Step 2: Creating JavaScript files to detect Ad Block
Most of Ad Block Extensions and Plugins such as Ad-Block Plus (ABP) blocks Images and JavaScript files containing words like — “ad”, “ads” and the similar words.
The solution lies within the functionality and the working of the these Ad Block extensions. Here we’ll be creating two files :
- ads_js.js
- main.js
The ads_js.js file contains following JavaScript code:
//simple variable detection var RunAds=true;
and the main.js file contains JavaScript code to detect if the ads_js.js file is blocked by the Ad Block extension.
//used to check if "RunAds" variable exist and redirect
try{if(RunAds){}}catch(err) {window.location.href="http://URL-of-Notice-page";}
//Replace "http://URL-of-Notice-page" with URL of the notice page that you have created
Step 3: Deploying the Ad Block Detection with WordPress
Once you have created the main.js and ads_js.js file — the final step is the deploying and integrating with WordPress. To deploy and integrate the ad blocking system with WordPress you have to add following PHP code in your header.php file of your default WordPress theme before <body> tag starts.
<?php
if(is_single()) { ?>
<script type="text/javascript" src="HTTP://URL-PATH/ads_js.js"></script>
<script type="text/javascript" src="HTTP://URL-PATH/main.js"></script>
<?php } ?>
Note: The above PHP code only fires on the single-post. If in case you want to deploy it on your whole website, including the pages you have to exempt the ad notice page else it will go in an infinite loop.
