Display a message when Ad Blockers block content

Call 01323 872296


Display a message when Ad Blockers block content

I have added a page to the main website displaying posts from an external blog and alongside it the Twitter feed from Krystal whose hosting I resell.

The blog posts display well but the Twitter feed didn’t display on some browsers. This is because I have an ad blocker on Firefox and Chrome and ‘platform.twitter.com’ matches a kown tracker and is blocked when content blocking was enabled for your browser.

I discovered a cool way to display a message (rather than blank white space!) when content is blocked and to give the reader the option to disable ad blockers for your website. It is the work of Arthur Gareginyan, a designer and full stack software engineer. He is the founder of Space X-Chimp and the blog My Cyber Universe. His personal website can be found at arthurgareginyan.com. Credit to him for this work

When we visit any website our web browser downloads an HTML file which includes an internal and external references to JavaScript files, CSS stylesheets, images and etc. If our browser has an ad blocker extension installed, it will compare the names of referenced files against a built-in block list and if there are any matches those files will be blocked. All block lists include a reference to ads.js because it’s a common name for JavaScript files that are associated with serving ads.

Now, step by step guide.

Add a message on website

First of all, we need to create a banner with friendly message asking to disable ad blocker. For this we place the following code anywhere in our theme where we would like to display the message.

<div id="banner-12345">
    Our website is made possible by displaying online advertisements to our visitors.<br>
    Please consider supporting us by disabling your ad blocker on our website.
</div>
<style>
    #banner-12345 {
        display: none;
        margin-bottom: 30px;
        padding: 20px 10px;
        border-radius: 5px;
        background: #D30000;
        color: #fff;
        text-align: center;
        font-weight: bold;
    }
</style>

Note: This message will be hidden by default.

Note: You can add this code in any place of your theme: inside the post content, in the sidebar area, in the footer area and etc.. I added this code right after <header> tag.

Note: You can style your banner the same way you would style any other part of your blog/website theme. Use a style that suits your needs.

Here’s how the message will looks like: Our website is made possible by displaying online advertisements to our visitors.
Please consider supporting us by disabling your ad blocker on our website.

Create the “ads.js” file and include to the website

Before we move on to the next step, we need to add an additional JavaScript file to our website, which is necessary to detect the ad blocker. This file, if is included to website, will create a hidden DIV element and add it to the our website’s HTML source code.

For this we will create a new JavaScript file inside the root directory of our website and call it ads.js. Then we place the following code to this file:

var e = document.createElement('div');
e.id = 'test-block';
e.style.display = 'none';
document.body.appendChild(e);

We will include this file (ads.js) by placing the following HTML code within our website’s HTML source code just above the </body> tag:

<script src="/ads.js" type="text/javascript"></script>

Note: You can use any method of including a JS file that is best suitable for you.

Check if “ads.js” was blocked

Now it’s time to create code that will check the existence of our hidden DIV element. If the hidden DIV element created by our ads.js file exists then ads are allowed, if not then ads are blocked. And if ads are blocked we will make visible the message that we have created on the 1th step.

For this we will add the following jQuery code to the main JavaScript/jQuery file of our website:

if ( $('#test-block').length == 0 ) {
    $('#banner-12345').show();
}

Or, if our website does not have a main JavaScript/jQuery file included, we can place the following JavaScript within our website’s HTML source code just above the </body> tag.

<script type="text/javascript">
    if ( !document.getElementById('test-block') ) {
        document.getElementById('banner-12345').style.display='block';
    }
</script>

And we are done! This way we have detect the ad blockers and shown a message to visitors of the website.

Credit: Arthur Gareginyan https://mycyberuniverse.com/en-gb/detect-ad-blocker-show-message.html

Keep in touch and share

Graphicz on Social Media



01323 872296. 07836 551000.
Email:

Website by Graphicz