In the world of online advertising, ad-blockers have become a common issue for website owners. Ad-blockers are software that users install on their browsers to block ads on web pages. While this may be beneficial for users, it can harm the revenue of website owners who rely on ads to generate income. As a result, detecting ad-blockers on your website has become essential. In this article, we will explore how to detect adblocker using HTML, CSS, and JavaScript while keeping SEO in mind.
Before we dive into the technical details of detecting ad-blockers, let’s understand why it’s important to keep SEO in mind. SEO or Search Engine Optimization refers to the process of optimizing your website to rank higher in search engine results pages (SERP). Google, the most popular search engine, uses various factors to rank websites, including the website’s loading speed, user experience, and content relevance. If your website is slow or doesn’t provide a good user experience, it may result in lower rankings in search engine results. Therefore, it’s crucial to ensure that any changes you make to your website, including detecting ad-blockers, don’t negatively impact your SEO.
Now, let’s discuss how to detect ad-blockers using HTML, CSS, and JavaScript. There are various methods to detect ad-blockers, but in this article, we will focus on the most common and straightforward approach.
To create this program [Detect AdBlocker using JavaScript]. First, you need to create three files: HTML, CSS and JavaScript files. After creating these files, just paste the following codes into your respective files.
HTML
First, create an HTML file with the name of index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<!-- Coding By WPHotShot - www.wphotshot.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Detect AdBlock using JavaScript | WPHotShot</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<meta name="juicyads-site-verification" content="a08f2915492f88814bebd41bacd9147c">
<meta title="Demo Site">
</head>
<body>
<div id="detect"></div>
<div class="wrapper">
<div class="content">
<div class="warn-icon">
<span class="icon"><i class="fas fa-exclamation"></i></span>
</div>
<h2>AdBlocker Detected!</h2>
<p>Our website is made possible by displaying ads to our visitors. Please supporting us by whitelisting our website.</p>
<div class="btn">
<div class="bg-layer"></div>
<button>Okay, I'll Whitelist</button>
</div>
</div>
</div>
<script src="main.js">
</script>
</body>
</html>
CSS
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@700&family=Poppins:wght@400;500;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body{
width: 100%;
height: 100vh;
background: linear-gradient(90deg, #2832d4, #7209d4, #00a5b2);
}
::selection{
color: #fff;
background: #9b27ca;
}
.wrapper{
position: absolute;
max-width: 480px;
top: 50%;
left: 50%;
width: 100%;
padding: 40px 30px;
background: #fff;
border-radius: 15px;
opacity: 0;
pointer-events: none;
transform: translate(-50%, -50%) scale(1.2);
box-shadow: 10px 10px 15px rgba(0,0,0,0.06);
transition: opacity 0.2s 0s ease-in-out,
transform 0.2s 0s ease-in-out;
}
.wrapper.show{
opacity: 1;
pointer-events: auto;
transform:translate(-50%, -50%) scale(1);
}
.wrapper .content,
.content .warn-icon,
.warn-icon .icon{
display: flex;
align-items: center;
justify-content: center;
}
.wrapper .content{
flex-direction: column;
}
.content .warn-icon{
height: 115px;
width: 115px;
border-radius: 50%;
background: linear-gradient(90deg, #2832d4, #7209d4, #00a5b2);
}
.warn-icon .icon{
height: 100px;
width: 100px;
background: #fff;
border-radius: inherit;
}
.warn-icon .icon i{
background: linear-gradient(90deg, #2832d4, #7209d4, #00a5b2);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 50px;
}
.content h2{
margin-top: 35px;
font-size: 32px;
}
.content p{
font-size: 19px;
text-align: center;
margin-top: 20px;
}
.btn{
height: 57px;
width: 223px;
margin-top: 30px;
border-radius: 50px;
position: relative;
overflow: hidden;
}
.btn .bg-layer{
height: 100%;
width: 300%;
position: absolute;
left: -100%;
background: linear-gradient(90deg, #2832d4, #7209d4);
transition: all 0.4s ease;
}
.btn:hover .bg-layer{
left: 0;
}
.content button{
position: relative;
z-index: 1;
height: 100%;
width: 100%;
background: none;
font-size: 18px;
border: none;
outline: none;
color: #fff;
cursor: pointer;
}
JavaScript
Third, create a JavaScript file with the name of main.js and paste the given codes in your JavaScript file. Remember, you’ve to create a file with .js extension.
const detect = document.querySelector("#detect");
const wrapper = document.querySelector(".wrapper");
const button = wrapper.querySelector("button");
let adClasses = ["ad", "ads", "adsbox", "doubleclick", "ad-placement", "ad-placeholder", "adbadge", "BannerAd"];
for(let item of adClasses){
detect.classList.add(item);
}
let getProperty = window.getComputedStyle(detect).getPropertyValue("display");
if(!wrapper.classList.contains("show")){
getProperty == "none" ? wrapper.classList.add("show") : wrapper.classList.remove("show");
}
button.addEventListener("click", ()=>{
wrapper.classList.remove("show");
});
That’s all, now you’ve successfully created an AdBlock Detector using HTML CSS & JavaScript. If your code does not work or you’ve faced any error/problem then please feel free to contact us.
