Discover how to detect ad blockers on your website using HTML, CSS, and JavaScript. Implement effective strategies for a seamless user experience.
Table of Contents
The widespread use of ad blockers has significantly impacted the revenue streams of many websites that rely on advertisements for monetization. Ad blockers are browser extensions or software that prevent ads from being displayed on web pages, leading to a decline in ad impressions and potential revenue loss for website owners.
To address this issue, website owners are increasingly turning to ad blocker detection techniques. Ad blocker detection involves identifying whether a visitor to a website has an ad blocker enabled and then taking appropriate action, such as displaying a message or providing alternative content. By implementing ad blocker detection, website owners can better understand their audience and devise strategies to mitigate the impact of ad blockers on their revenue.
Benefits of Ad Blocker Detection:
- Revenue Preservation: Ad blocker detection allows website owners to identify users who have ad blockers enabled. By detecting these users, website owners can tailor their monetization strategies accordingly. This may include offering alternative non-intrusive ad formats or requesting users to disable their ad blockers to support the website's sustainability.
- Enhanced User Experience: Ad blockers are often installed by users to improve their browsing experience by reducing intrusive ads. By implementing ad blocker detection, website owners can provide a more personalized and relevant experience to users with ad blockers enabled. This can involve offering customized content or showcasing non-intrusive ads that align with the users' preferences.
- Analytics and Insights: Ad blocker detection enables website owners to gather valuable data and insights about their audience. By understanding the percentage of users with ad blockers and their behavior on the website, owners can make informed decisions about ad placement, content optimization, and alternative revenue models.
- Ethical Considerations: Ad blocker detection can help foster transparency and trust between website owners and users. By clearly communicating the impact of ad blockers on revenue and offering choices to users, website owners can establish a mutually beneficial relationship that respects user preferences and privacy.
In the following sections, we will explore how to implement ad blocker detection using HTML, CSS, and JavaScript. We will provide step-by-step instructions and considerations to ensure a seamless user experience while addressing the challenges posed by ad blockers. Let's dive into the details of detecting ad blockers and optimizing your website's revenue generation strategies.
Join My Telegram Channel to Download the Projects Source Code: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
The given HTML code represents a webpage that aims to detect if the user is using an ad blocker and encourages them to whitelist the website to support it financially. Let's break down the code section by section:
1. <!DOCTYPE html>: This is the document type declaration and indicates that the page is written in HTML.
2. <html lang="en">: This is the opening tag for the HTML document. The lang attribute specifies the language of the document, which is set to English (en) in this case.
3. <head>: This is the opening tag for the head section of the HTML document. The head section contains metadata and other information about the document.
4. <meta charset="UTF-8" />: This meta tag sets the character encoding of the document to UTF-8, which is a character encoding standard that supports a wide range of characters.
5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />: This meta tag sets the viewport properties for responsive web design. It ensures that the webpage is rendered properly on different devices by adjusting the width to match the device's screen width and setting the initial zoom level to 1.0.
6. <title>Detect AdBlock using JavaScript</title>: This is the title tag that sets the title of the webpage displayed in the browser's title bar or tab.
7. <link rel="stylesheet" href="styles.css">: This link tag is used to include an external CSS file named "styles.css" that contains styles for the webpage. It specifies the relationship (rel) as a stylesheet.
8. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">: This link tag is used to include another external CSS file from the provided URL. It is the Font Awesome CSS file, which provides a collection of icons for use in the webpage. It is also specified as a stylesheet.
9. </head>: This is the closing tag for the head section.
10. <body>: This is the opening tag for the body section of the HTML document. It contains the visible content of the webpage.
11. <div id="detect"></div>: This div element with the id "detect" is empty and likely serves as a placeholder for dynamically generated content.
12. <div class="wrapper">: This div element with the class "wrapper" serves as a container for the main content of the webpage.
13. <div class="content">: This div element with the class "content" serves as a container for the warning message and related content.
14. <div class="warn-icon">: This div element with the class "warn-icon" contains an exclamation icon used to indicate a warning.
15. <span class="icon"><i class="fas fa-exclamation"></i></span>: This span element with the class "icon" contains an i element with the class "fas fa-exclamation". It uses Font Awesome's "exclamation" icon to display the warning symbol.
16. <h2>Please allow ads on our site🥺</h2>: This is a level 2 heading that displays the message "Please allow ads on our site🥺".
17. <p>...</p>: This is a paragraph element that contains a message encouraging the user to whitelist the website if they are using an ad blocker.
18. <div class="btn">: This div element with the class "btn" serves as a container for a button.
19. <div class="bg-layer"></div>: This div element with the class "bg-layer" is empty and likely used to create a background effect for the button.
20. <button>Allow ads</button>: This button element displays the text "Allow ads". It can be clicked by the user to take action.
21. </div>: This is the closing tag for the "btn" div.
22. </div>: This is the closing tag for the "content" div.
23. </div>: This is the closing tag for the "wrapper" div.
24. <script src="script.js"></script>: This script tag is used to include an external JavaScript file named "script.js". It is likely used to handle the ad block detection and perform related actions.
25. </body>: This is the closing tag for the body section.
26. </html>: This is the closing tag for the HTML document.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
This is the basic structure of our ad blocker detection using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the ad blocker detection is in place, the next step is to add styling to the ad blocker detection using CSS. CSS allows us to control the visual appearance of the website, including things like layout, color, and typography.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to style our ad blocker detection.
Here is an explanation of the different CSS rules:
1. body: This rule sets the background color of the <body> element to #1f1d2b, a dark purple color.
2. .wrapper: This rule applies to elements with the class name "wrapper". It defines various styles for a container element, including its position, maximum width, padding, background color, border radius, opacity, pointer events, transform, box shadow, and transition effects. The position is set to absolute, and the element is horizontally and vertically centered on the page using the top, left, and transform properties. Initially, the element is hidden (opacity: 0) and not interactive (pointer-events: none). When the "show" class is added to this element, it becomes visible and interactive.
3 .wrapper.show: This rule applies when the "show" class is added to an element with the "wrapper" class. It modifies the opacity, pointer events, and transform properties to make the element fully visible and interactive.
4. .wrapper .content, .content .warn-icon, .warn-icon .icon: These rules target specific elements inside the wrapper. They set the display property to flex and align the content both vertically and horizontally using align-items: center and justify-content: center.
5. .wrapper .content: This rule targets the content element inside the wrapper. It sets the flex-direction property to column, arranging the child elements vertically.
6. .content .warn-icon: This rule targets the warn-icon element inside the content. It defines the height, width, border-radius, and background color for a circular icon.
7. .warn-icon .icon: This rule targets the icon element inside the warn-icon. It sets the height, width, background color, and border-radius for a circular inner icon.
8. .warn-icon .icon i: This rule targets the <i> element inside the icon. It sets the background color of the text (using the CSS property background-clip) to match the background color of the circular icon. The text color is made transparent (-webkit-text-fill-color: transparent) to create the effect of a colored icon.
9. .content h2: This rule targets the <h2> element inside the content. It sets the margin-top and font-size properties.
10. .content p: This rule targets the <p> element inside the content. It sets the font-size, text-align, and margin-top properties.
11. .btn: This rule targets elements with the class name "btn". It defines the height, width, border-radius, position, and overflow properties for a button-like element.
12. .btn .bg-layer: This rule targets the bg-layer element inside the button. It defines the height, width, position, and background color for a layered background effect. When the button is hovered over, the background layer slides in from the left to create a visual effect.
13. .btn:hover .bg-layer: This rule targets the bg-layer element inside the button when the button is being hovered over. It changes the left position property to 0, causing the background layer to slide in from the left.
14. .content button: This rule targets the <button> element inside the content. It sets the position, z-index, height, width, background, font-size, border, outline, color, and cursor properties for the button.
This will give our ad blocker detection an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
body{
background-color: #1f1d2b;
}
.wrapper{
position: absolute;
max-width: 480px;
top: 50%;
left: 50%;
width: 100%;
padding: 40px 30px;
background: #ffd791;
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: rgb(243, 45, 78);
}
.warn-icon .icon{
height: 100px;
width: 100px;
background: #ffd791;
border-radius: inherit;
}
.warn-icon .icon i{
background: rgb(243, 45, 78);
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: rgb(243, 45, 78);
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;
} Step 3 (JavaScript Code):
Finally, we need to create a function in JavaScript to detect ad blocker.
The provided JavaScript code performs the following actions:
It selects the HTML element with the id "detect" and assigns it to the constant variable detect.
It selects the HTML element with the class "wrapper" and assigns it to the constant variable wrapper.
It selects the button element within the wrapper element and assigns it to the constant variable button.
An array called adClasses is created, containing several strings representing CSS classes commonly used for ads.
A for loop iterates over each item in the adClasses array and adds the class to the detect element using the classList.add() method. This is done to visually indicate that the element is an ad.
The getProperty variable is assigned the computed value of the display CSS property for the detect element. This is obtained using the window.getComputedStyle() method.
The computed style of the detect element is logged to the console using console.log().
If the wrapper element does not have the class "show", the following code is executed:
- If the value of getProperty is equal to 'none', the "show" class is added to the wrapper element.
- Otherwise, the "show" class is removed from the wrapper element.
An event listener is added to the button element, listening for a 'click' event. When the button is clicked, the following code is executed:
The "show" class is removed from the wrapper element.
After a delay of 5000 milliseconds (5 seconds), the following code is executed:
If the wrapper element does not have the class "show", the following code is executed:
- If the value of getProperty is equal to 'none', the "show" class is added to the wrapper element.
- Otherwise, the "show" class is removed from the wrapper element.
Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document, so that the scripts are executed on the page. 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');
console.log(window.getComputedStyle(detect));
if (!wrapper.classList.contains('show')) {
getProperty == 'none'
? wrapper.classList.add('show')
: wrapper.classList.remove('show');
}
button.addEventListener('click', () => {
wrapper.classList.remove('show');
setTimeout(function () {
if (!wrapper.classList.contains('show')) {
getProperty == 'none'
? wrapper.classList.add('show')
: wrapper.classList.remove('show');
}
}, 2000);
});Final Output:
Conclusion:
In conclusion, implementing ad blocker detection using HTML, CSS, and JavaScript is crucial for website owners to combat the impact of ad blockers and maintain sustainable revenue streams. By following the steps outlined in this blog post, you can provide a seamless user experience, preserve revenue, and adapt to the evolving landscape of online advertising. Stay proactive, prioritize user satisfaction, and leverage the power of these technologies to optimize your website's performance in the presence of ad blockers.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
