If you are running a website, you must know how annoying are AdBlock users. You try to give the best possible content for your users for free and you want simply to earn some money by external advertising services like Google Adsense, but AdBlock users are constantly minimizing your incomes.
So… JUST CHECK IF USER HAS ADBLOCK!
Sounds clever, doesn’t it?
There are several ways how we can check user’s AdBlock on our sites and we will describe it below. Click link to scroll down:
- Generic way to check if user has AdBlock
- AdBlock check: Show modal window and ask for disabling AdBlock.
- Check AdBlock: Hide part of content for AdBlock users
- AdBlock detected: Show custom ads (with image and link)
Table of Contents
1. Generic way to check if user has AdBlock
Checking if user has enabled adblock on our website is very simple. We must do a few steps. Generally, when AdBlock is turned on, it means that container with ad like Adsense will have no real content so its height will be equal to 0 px. Of course in CSS we must define height: auto; for container with ads.
I was using in my examples the jQuery library to make everything easier.
We must check it by JavaScript code which will check the HTML container and look for its height. We must check container with ads in right moment.
What does it mean? External ads are not loaded in the same moment as our website content. It usually takes a short while to load the external ads, like AdSense. So we must check if adblock is enabled on user’s browser by our JS code when whole content of website (also with external ads) is loaded.
It means we must use onload event triggered on window element.
In the examples below AdBlock is detected and another (normal image banner with link) ads are displayed to the end user. So user things he or she is cleaver because use of adblock, but we are even more clever – we check if user has adblock and when external ad will be not loaded, we serve to the user our own ad (by banner or normal image) 🙂
Generic sulution to check adblock
So in below generic method we must wrap external ads container (e.g. Google AdSense) with a <div class="ad"></div>Â element, like below:
<div class="ad">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-YOUR-ADSENSE-CODE"
data-ad-slot="ADSENSE-CODE"
data-ad-format="link"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
And in JavaScript code we must write simple code following above instruction with detecting ad’s container height:
(function () {
$(window).load(function () {
if ($(".ad").first().height() < 10) {
//ADBLOCK IS TURNED ON!
//DO SOMETHING
}
});
})();Using that JavaScript method we can easly check adblock in user’s browser on our webiste. In next paragraphs we created examples wchich shows what you can do after dececting user’s adblock on your website – show modal window, hide part of content of your website or display another ad (via image).
2. Check AdBlock and show modal window with ask for disabling AdBlock
This case is probably the most popular – we check adblock, when user has enabled it, then we will show very simple modal window with ask to disable it. In this modal window we can explain th reason why it is so important for us – e.g. we can earn money by advertising to pay for hosting, domain etc.
In our HTML code we must wrap ad container with a <div class="ad"></div>Â element and at the end, before </body> cloasing element we must put modal widnow code.
Open the example HERE – please remember to enable AdBlock to see how the detection works.
HTML
<div class="ad"><!-- outer div with additional class for defining styles for own ads -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-YOUR-ADSENSE-CODE"
data-ad-slot="ADSENSE-CODE"
data-ad-format="link"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<!-- YOUR NORMALN HTML CONTENT -->
<div class="modal-fader"></div>
<div class="modal-window">
<h2>Please turn off the AdBlock</h2>
<p>Let us earn money by advertising. We need it to provide you the best possible content.</p>
<button class="modal-btn modal-hide">Close</button>
</div>
JavaScript
(function () {
$(window).load(function () {
if ($(".ad").first().height() < 10) {
$(".ad").each(function () {
$(".modal-fader").show();
$(".modal-window").show();
});
}
$(".modal-hide").click(function () {
$(".modal-fader").hide();
$(".modal-window").hide();
});
});
})();CSS
.ad {
text-align: center;
background: # FFF;
padding-top: 2rem;
max-width: 100 % ;
overflow: hidden
}
/* ---------------------- */
.modal-fader {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
z-index: 99998;
background: rgba(0,0,0,0.8);
}
.modal-window {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 99999;
background: #fff;
padding: 10px 20px;
border-radius: 5px;
font-family: sans-serif;
}
.modal-btn {
background: #36a5a5;
border: none;
color: #fff;
padding: 10px 15px;
box-shadow: none;
border-radius: 3px;
text-decoration: none;
}Check above code on our Gitlab account HERE.
3. Check adblock and hide part of content for AdBlock users
Another way to use AdBlock check in our webiste is to hide part of content on our page for them. Here the way how we handle that is similar like in above 2 examples, but only the HTML code is a little more sophisticated.
In this example we do not hide the content by display: none; CSS rule, but we create nice looking hiding with fading of the content, what will look like on image below:
Open the example HERE – please remember to turn on AdBlock to see how the detection works.
Our HTML code can look like below. I put below the whole example of the page content in body:
HTML
<body>
<h1>This is the title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="ad"><!-- outer div with additional class for defining styles for own ads -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-YOUR-ADSENSE-CODE"
data-ad-slot="YOUR-ADSENSE-CODE"
data-ad-format="link"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<h2>Subtitle level 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="adblock-show">
DISABLE ADBLOCK AND REFRESH PAGE TO READ MORE
</div>
<div class="adblock-hide">
<div class="adblock-hide-fader"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h2>Next subtitle level 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h3>Next subtitle level 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</body>CSS
.ad {
text-align: center;
background: # FFF;
padding-top: 2rem;
max-width: 100 % ;
overflow: hidden
}
.adblock-show {
text-transform: uppercase;
color: red;
font-weight: bold;
font-size: 1.5em;
font-family: sans-serif;
display: none;
}
.adblock-hide {
position: relative;
}
.adblock-hide-fader {
background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80px, rgba(255,255,255,1) 100%);
position: absolute;
top: 0;
width: 100%;
height: 100%;
display: none;
}
.adblock-hide.active {
height: 110px;
overflow: hidden;
}
.adblock-hide.active .adblock-hide-fader {
display: block;
}JavaScript
(function () {
$(window).load(function () {
if($(".ad").first().height() < 10) {
$(".adblock-show").show();
$(".adblock-hide").addClass("active");
}
});
})();Check above code on our Gitlab account HERE.
4. AdBlock check and show custom ads (with image banner)
This is the most clever way to treat AdBlock users. We check AdBlock on user’s browser in our website and we do not display any kind of ask to them, but we replace external ads (like Google Adsense) with our custom ads. Then we can advertise some our content or we can make a deal with someone to display his or her ads here 🙂
Open the example HERE – please remember to turn on AdBlock to see how the detection works.
HTML
- Wrap our third-party ads code with div with class “ad-ext”
- Create on the same level the sibling div with class “ad-own” – here put our “traditional” ad, like image banner wrapper with link tag “a”.
- Wrap both divs with one outer div with class “ad”.
- If we have many places with ads on our website, we can add to outer div additional class which will identify it and make possible custom styling of that, like class: ad-location_1, ad-location_2, ad-location_3 etc…
<div class="ad ad-location_1"><!-- outer div with additional class for defining styles for own ads -->
<div class="ad-ext"><!-- div containing third-party ads, here from Google Adsense -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- ads code -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-YOUR-ADSENSE-CODE"
data-ad-slot="ADSENSE-CODE"
data-ad-format="link"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class="ad-own"><!-- div containing your own, tradictional ads, with image and link -->
<a href="https://YOUR-AD-URL.COM" target="blank" title="Click here for more">
<img src="your-ad-image-banner.jpg" alt="Image alternative description">
</a>
</div>
</div>
JavaScript
- We are using here jQuery to make everything easier.
- Start from window’s “load” event. This is very important. Script must wait with detection till third-party ads will load or not. The “load” event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images.
- Check if at least one third-party ads’ container has height smaller than 10 (px). Why 10px? Because sometimes, in some browsers empty container with adsense ads can be e.g. 1 or 2 px high. So 10 is a big enough margin.
- Iterate through all html containers (divs) with class “ad”.
- Inside iterator callback function, once the JavaScript code is “inside” one ad container (div) do as following:
– add class “active” to current element (with class “ad)
– find and hide element with class “ad-ext”
– find and show element with class “ad-own” - This algorithm will simply check if ads were blocked, and hide third-party empty ads container, and show container with our own “traditional” ad.
(function () {
$(window).load(function () {
if ($(".ad").first().height() < 10) {
$(".ad").each(function () {
$(this).addClass("active");
$(this).find(".ad-ext").hide();
$(this).find(".ad-own").show();
});
}
});
})();
CSS
CSS styling should provide proper displaying our own “traditional” image based ads. So we need to provide styles to make image always looking properly. The most important part in CSS is only to put rule for class .ad-own the display property with value “none”, like below. Our CSS code looks like below, you can reuse and adjust it for your purposes.
.ad {
text-align: center;
background: # FFF;
padding-top: 2rem;
max-width: 100 % ;
overflow: hidden
}
.ad-own {
display: none;
}
.ad.active.ad-location_1 img {
max-width: 100 % ;
max-height: 300px;
}
.ad.active.ad-location_2 img {
max-width: 100 %
}
.ad.active.ad-location_3 img {
max-width: 100 % ;
max-height: 300px;
}Check above code on our Gitlab account HERE.
I hope that with functionality described in this article for checking AdBlock in user’s browser you will gain now a possibility to “fight” against unfair users who block ads by which you can earn some money to e.g. pay the hosting and domain.
THE END 🙂
