How we can detect a AdBlock or AdBlocker program easily using JS? Solution: See this JavaScript AdBlock Detection Program, Easiest Way to Detect AdBlocker.
Basically, the AdBlock program blocks all ads on websites and web app, and there are mostly browser extensions of these AdBlockers. Some browser has inbuilt Adblocker to block ads automatically, without installing any third-party extension or program. The AdBlock detector detects if any AdBlocker is active on the browser or not. If not any AdBlock program installed then it opens the page otherwise, it shows a message for turn off AdBlocker to the user. If we think as a user then it is a good thing because it blocks every advertisement which is active on the website. But if we think as a developer or website owner, then it is a very bad thing because of its effects on revenue generation.
Today you will learn the Easiest Way to Detect AdBlocker. Basically, this is a simple program and easy to detect an adblocker. There is a single box, when you will load the program then you will see “Detecting…” text on the box. If any AdBlocker installed in the browser then the text will change to “Adblock detected!” otherwise it will change to “Adblock disabled!“. This is only a detection program, You just have to copy/paste JS code on your website to detect. Then you can create the conditions, like if AdBlocker active then show an overlay message don’t visualize the content.
So, Today I am sharing JavaScript AdBlock Detection Program. There I have used pure JavaScript to create the program and believe me, there are only few lines of codes. And used HTML to create the layout and CSS for styling. This program is for an idea of how we can detect an AdBlock program and make the user helpless to disable the AdBlocker. If you understand the program and do some modification in it, then you don’t have to pay for the program which detects AdBlockers.
If you are thinking now how this program actually is, then see the preview given below.
Preview Of Easiest Way to Detect AdBlocker
See this video preview to getting an idea of how this detection program looks like.
Now you can see this program visually, also you can see it live by pressing the button given above. if you like the program, then get the source code of its.
You May Also Like:
- JavaScript Typing Suggestions
- Info Card Animation
- Header Underline Active Item
- Material Button With Ripple Click
JavaScript AdBlock Detection Program Source Code
Before sharing source code, let’s talk about it. First I have created a paragraph tag with text “Detecting…” and placed another paragraph tag to leave a note but it is not important. Now in the HTML file, I have linked the CSS and JS file. Now using CSS I have placed the texts in the center, as you can see in the preview.
With CSS I have simply given color and size values to the paragraph tag. Now JavaScript detecting the AdBlocker program if any installed in the browser. There I have used JS adElementStyle.display command to detect and used if{} else{] statements to declare the actions. I gave the condition if the adElementStyle.dsiplay is none if(adElementStyle.display === 'none') then show the “AdBlock Detected!” message, otherwise “AdBlock disabled!”.
Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First file for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this program without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>JavaScript Adblock Detection | Webdevtrick.com</title> <link rel="stylesheet" href="style.css"> </head> <body> <p class="message">Detecting...</p> <p class="instruction"><b>How to use:</b><br> You have to copy the JavaScript code to your website, then you can create your own AdBlock detector. This will only detect, you have to create a program for give message to user.</p> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
body { display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100vh; font-family: arial, sans-serif; } .message { background-color: #237ad4; padding: 8px 15px; color: #FFF; font-weight: 600; font-size: 2em; } .message.ab { background-color: #ff3535; } .message.no-ab { background-color: #5cb85c; } p { max-width: 20rem; text-align: center; margin: 1.5rem 0; line-height: 1.5; } a { text-decoration: none; color: #FFF; padding: 6px 12px; margin-left: 3px; background-color: #000; } |
function.js
The final step, create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
setTimeout(function() { var adblockEnabled = false; // add test element and get its styles document.body.innerHTML += '<div class="adBanner"></div>'; var adElement = document.getElementsByClassName('adBanner')[0]; var adElementStyle = getComputedStyle(adElement, null); if(adElementStyle.display === 'none') { // Adblock enabled document.getElementsByClassName('message')[0].innerHTML = 'Adblock detected!'; document.getElementsByClassName('message')[0].classList.add('ab'); } else { // Adblock disabled document.getElementsByClassName('message')[0].innerHTML = 'Adblock disabled! :)'; document.getElementsByClassName('message')[0].classList.add('no-ab'); } }, 1500); |
That’s it. Now you have successfully created a JavaScript AdBlock Detection Program, Easiest Way to Detect AdBlocker. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
Ads are scum, so is Shawn.
tu si que eres un SCUM no tienes vida, deja que las webs ganen dinero y metete un Ublock por el culo