Detect ad-blocker in Ghost

by Wasalu Duckworth

If you are using Google Ad-sense or some other ad generated revenue then you are likely familiar with ad-blockers and what it means for your business.

Ad-blockers are great for the end-user. They should not be forced to look at generic ads and endless content. It is their right to refuse the ads.

Same way it is your right to ask them to support you or disable content for users that do not wish to support you. Let's take a look at how to detect ad blockers and what you can do with this information.

Understanding ad-blockers

Here is a list with what ad-blockers are looking for in a file https://easylist-downloads.adblockplus.org/easylist.txt . Basically this is a large data set of known ads sites and files used to include advertisements. Ad-blockers are checking these lists to block any resources coming from these origins.

How to use this

We can use the block black list to work against it self. The idea is to create a ad-type file which will trigger the ad-blocker. Then in we will check if our file is blocked. If it is blocked we know the user is using ad-blocker. Once we have this information the possibilities are endless. Now let's get into it.

How to do it for Ghost

We are looking specifically at Ghost but the idea will work for any platform.

Step 1

Create a file in your Ghost theme root. If you are using the default Casper theme simply create a file here - data/content/themes/casper/ads.js with the following content:

var adTest = document.createElement('div');
adTest.id = 'testingAdBlocker';
adTest.style.display = 'none';
document.body.appendChild(adTest);

The code creates an invisible div element and appends it to the document body. We will use this div to check if the file was blocked.

You can verify that the file is available by visiting https://example.com/ads.js (replace example.com with your domain).

Step 2

Now we have to check if the file has been included and if the div has been created. Paste this code in your Ghost -> Setting -> Code Injection .

if(document.getElementById('testingAdBlocker')){
    console.log('Ad-blocker not detected');
} else {
    console.log('Ad-blocker detected');
    window.addEventListener('load', function () {
        var adBlockOverlay =document.createElement('div');
        adBlockOverlay.innerHTML = 'Please support us by disabling ad-blocker!';
        adBlockOverlay.id='adBlockMessage';
        adBlockOverlay.style.display='block';
        adBlockOverlay.style.color='#000';
        adBlockOverlay.style.background='#fff';
        document.body.appendChild(adBlockOverlay);
    });
}

This code checks if the invisible div is created. If it is not it creates another div with message.

Further ideas

You can add anything you wish here. Some ideas on what could be implemented:

  • Hide part of the content if ad-blocker is enabled
  • Send analytics data
  • Add some alerts or additional messages asking user to disable the blocker

Let me know if you would like to see anything specific or if you have any improvements.