Detect AdBlock using HTML CSS & JavaScript — CodingNepal

Detect AdBlock using HTML CSS & JavaScript — CodingNepal

Hey friends, today in this blog you’ll learn how to Detect AdBlock using JavaScript. In the earlier blog, I have shared how to Detect Internet Connection Status using JavaScript and now it’s time to create a popup box using JavaScript that detects AdBlocker. If you’re new to this blog and it’s the first blog you’re viewing then click here to view playlists of our all JavaScript Projects on YouTube.

AdBlocker is a content filtering or web browser extension that blocks different online ads that interrupt your browsing experience. It helps the user to prevent unintended pop-ups, flashing banners, online advertisements from being displayed. I don’t recommend you to use AdBlocker on a free site like ours which has the main income source is displaying ads and giving you helpful content because the website needs money to stay free and it’s only possible if you view or click on their ads.

In our program [Detect AdBlock using JavaScript], as you can see in the preview image there is a popup box with some text and a button to dismiss the popup. If the user has enabled AdBlocker then this popup will be displayed and if not then this popup will not be displayed.

Video Tutorial of Detect AdBlock using JavaScript

Video Tutorial of Detect AdBlock using JavaScript

In the video, you’ve seen how this Adblocker Detector looks like and how I created using only HTML CSS & JavaScript. The codes and concept behind creating this detector are so simple and you can easily understand codes even if you’re a beginner. When AdBlock is enabled then it avoids some classes, id, scripts from rendering on the user browser.

Here are some classes ad, ads, ad-banner, ad-box, ad-badge that AdBlocker adds display: none; property to hide from the visitors. So we've created an element and added these classes in it and check what this element is returning. If AdBlocker is enabled then obviously it'll return display: none; because adblocker will add none value to hide it and if adblocker is not enabled then it returns display: block;

You might like this:

Detect AdBlock using JavaScript [Source Codes]

To create this program [Detect AdBlock using JavaScript]. First, you need to create two Files one HTML and another one is CSS File. After creating these files just paste the following codes into your file. You can also download the source code files of this AdBlock Detector from the given link. Click here to download code files.

Originally published at https://codingnepalweb.com on May 24, 2021.

--

--

--

CodingNepal is a blog where we post blogs related to HTML, CSS, JavaScript & PHP along with creative coding stuff.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Awesome Sass

Download Files to Mobile, React Native

Podcast interview

What is the fuss with __proto__ in Node?

Single-line http server with NodeJS

Use Express.JS as a Web Server

A Foray into Building Interactive Maps with Leaflet

How Much Does Cost to Make an App in React Native?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
CodingNepal

CodingNepal

CodingNepal is a blog where we post blogs related to HTML, CSS, JavaScript & PHP along with creative coding stuff.

More from Medium

Looping Through Objects in JavaScript

A laptop with a colorful keyboard in front of it

Is Clean Code Only About The Aesthetics of A Code?

Publish NPM Package to Git

My last blog was about the baby steps I had taken in my journey — from learning C, Python, and…