How to Detect and Warn AdBlock Users on WordPress, Drupal, Joomla Blogs to Prevent Ad Blocking - Cyber Programmers - Learn Programming

Breaking

Saturday, September 19, 2015

How to Detect and Warn AdBlock Users on WordPress, Drupal, Joomla Blogs to Prevent Ad Blocking

Nowadays you can see ads on every blog, which is the main income for bloggers. Blogger needs to pay for blog hosting and domain. But every second visitor is using AdBlock extension on the browser, which blocks all ads and the blogger doesn't have a revenue.
But there is a solution and today I will show how you can prevent your blog visitors to use AdBlock on your website. There is special and easier method for WordPress, Drupal or Joomla blogs, but I will show a universal way, CMS independent.


For WordPress Blogs

1) First of all sign into your WordPress account.
2) Go ahead and open this link on your browser.
3) Now install that plugin on your WordPress.
4) Simply edit it and change the settings.
This plugin will detect visitors with AdBlock extension and do an action you have set.


For Drupal Blogs

1) Sign into your Drupal account.
2) Open up this Drupal plugin page.
3) Install the plugin on your Drupal Blog.
4) Now all you need to do is configure the plugin, the warning text you want to display for AdBlock visitors.


For Joomla Blogs

1) Sign into your Joomla blog.
2) Open this link on your browser.
3) Install it on your Joomla blog.
4) Now configure the plugin to your needs.
And it will show a pop-up warning message to visitors with AdBlock extension.


For CMS independent Blogs

1) Create a new folder for JS files if you don't have already and create a new JS file, name it for example "blockdetect.js".
2) Now open it up and add a code given below to it:
var itcanrun = true;
3) And now open up the index file of your blog/website and you should add an if statement like in below example.
<html>
  <head>
    <script src="/js/blockdetect.js"></script>
  </head>
  <body>
    <script>
      if( window.itcanrun === undefined ){
        // if adblocker detected then show fallback
        showFallbackImage();
      }
    </script>
  </body>
</html> 
You can simply modify the code to your needs.
If the first one is not what you need then use this code:
window.onload = function() {
        setTimeout(function() {
          var ad = document.querySelector("ins.adsbygoogle");
          if (ad && ad.innerHTML.replace(/\s/g, "").length == 0) {
            ad.style.cssText = 'display:block !important';
            ad.innerHTML = "Please turn off Adblock on your browser to support us."; // Display if Adblock is enabled
          }
        }, 5000); // Run ad block detection 5 seconds after page load
      };
In this method, we simply ask visitors to stop blocking ads on our blog.