Detecting Ad-Blocker using JavaScript Tutorial

Far · 2025-02-27T03:24:08+0000

In this tutorial, you can learn how to detect the Ad-Blocker using JavaScript. The tutorial aims to provide students and beginners with a reference for learning to disallow users or visitors to explore the different pages and contents of a certain website. Here, I will be providing a simple web page script that demonstrates the Ad-Blocker detection.

What is an Ad-Blocker?

Ad-blocker is a software, program, or browser extension that has the capability to block or alter the advertisement block or field of a website. This program is designed to prevent the website to display any advertisement to the client side. Moreover, ad blockers prevent the loading of advertising by checking website elements against extensive blacklists.

How to Detect Ad-Blocker using JavaScript?

Detecting an Ad-Blocker when browsing the website can be achieved easily using some short line of JavaScript codes. Most Ad-blockers alter the Ad fields or elements by adding a display:none CSS property to the parent of the element to prevent showing it on the page or to stop the ads to be loaded.

Here are the following steps you must know to detect Ad-Blocker:

First, you must identify the parent elements of the Advertisement blocks that are available on your site.
Next, check if one of the Advertisement Blocks element or parent element display style is set to none.
Then, execute the function or script you want to run if Ad-Blocker is detected.

Check out the sample web page scripts that I created and provided below to have a better idea for identifying or detecting if there's an Ad-blocker on the client side that blocks or prevents your site's advertisement fields to display or to be shown.

Sample Web Page

The scripts below result or outputs a simple web page that has the capability to detect Ad-blockers when browsing the page. The web page contains simple and static page content and shows a popup message for preventing the users to explore more on the website if the visitor is using an Ad-Blocker.

HTML

Here's the HTML file script named index.html that contains the page elements of the sample web page.

<!DOCTYPE html>
<html

lang

=

"en"

>
<head

>
<meta

charset

=

"UTF-8"

>
<meta

http-equiv

=

"X-UA-Compatible"

content

=

"IE=edge"

>
<meta

name

=

"viewport"

content

=

"width=device-width, initial-scale=1.0"

>
<title

>

JS - Detect AdBlocker</

title

>
<link

rel

=

"preconnect"

href

=

"https://fonts.googleapis.com"

>
<link

rel

=

"preconnect"

href

=

"https://fonts.gstatic.com"

crossorigin>
<link

rel

=

"stylesheet"

href

=

"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"

/

>
<link

rel

=

"stylesheet"

href

=

"style.css"

>
</

head

>
<body

>
<div

id

=

"add-blocker-popup"

>
<div

class

=

"add-blocker-dialog"

>
<div

class

=

"ads-blocked-popup-img"

><img

src

=

"./adblock.png"

alt

=

"AdBlock Image"

></

div

>
<div

class

=

"ads-blocked-popup-title"

>

It looks like you're using an Ad-Blocker!</

div

>
<div

class

=

"ads-blocked-popup-description"

>

Kindly disable your Ad-Blocker on this site to continue exploring and reading the pages and contents of this website. Thank You!</

div

>
</

div

>
</

div

>
<div

id

=

"wrapper"

>
<div

class

=

"page-title"

>

Detect AdBlocker and Display Message using JavaScript</

div

>
<hr

style

=

"width:25px"

>
<div

id

=

"content-wrapper"

>
A popup message will be shown when AdBlocker is enabled and detected.
</

div

>
</

div

>
<script

src

=

"script.js"

></

script

>
</

body

>
</

html

>

Stylesheet

Here's the CSS file script named style.css that contains the codes for the design of the web page layout, contents, and popup message. This file is loaded in the index page file script.

@import

url

(

'https://fonts.googleapis.com/css2?family=Rubik&display=swap'

)

;
@import

url

(

'https://fonts.googleapis.com/css2?family=Courgette&family=Secular+One&display=swap" rel="stylesheet'

)

;
:

root

{
--secular-font

:

'Secular One'

,

sans-serif

;
--satisfy-font

:

'Satisfy'

,

cursive

;
}
*

{
box-sizing

:

border-box

;
}
body *

{
font-family

:

'Rubik'

,

sans-serif

;
}
/**
Page Design
*/
body,
html{
height

:

100%

;
width

:

100%

;
margin

:

0

;
padding

:

0

;
}
body{
background-color

:

#93C6E7

;
}
/* Page Wrapper */
#wrapper

{
width

:

100%

;
height

:

100%

;
display

:

flex;
flex-direction

:

column;
align-items

:

center

;
justify-content

:

center

;
}
.page-title{
font-size

:

35px

;
font-family

:

var

(

--secular-font

)

;
letter-spacing

:

2px

;
text-align

:

center

;
color

:

#fff

;
text-shadow

:

0px

0px

5px

#7070709c

;
}
#content-wrapper

{
width

:

100%

;
padding

:

3em

5em

;
text-align

:

center

;
color

:

#fff

;
font-size

:

20px

;
}
/*AdBlock Detection Message Popup*/
#add-blocker-popup

{
position

:

fixed

;
top

:

0

;
left

:

0

;
width

:

100%

;
height

:

100%

;
display

:

none

;
opacity

:

0

;
flex-direction

:

column;
align-items

:

center

;
justify-content

:

center

;
overflow

:

auto

;
backdrop-filter:

brightness(

0.5

)

;
transition

:

all .3s

ease-in-out;
transition-delay

:

.5s

;
}
#add-blocker-popup

.add-blocker-dialog{
width

:

555px

;
min-height

:

380px

;
display

:

flex;
flex-direction

:

column;
align-items

:

center

;
justify-content

:

center

;
background-color

:

#fff

;
padding

:

15px

;
border

:

1px

solid

#bebebe

;
border-radius

:

10px

;
box-shadow

:

1px

1px

8px

#b7b2b2eb

;
transform

:

translateY(

-1000px

)

;
}
@media

(

max-width

:

555px

)

{
#add-blocker-popup

.add-blocker-dialog{
width

:

90%

;
min-height

:

80%

;
}
}
/* Display Popup */
#add-blocker-popup

.show{
transition-delay

:

0s

;
display

:

flex;
animation

:

modal-fade .3s

ease-in-out forwards

;
}
#add-blocker-popup

.show

.add-blocker-dialog{
animation

:

modal-slide-down .3s

ease-in-out forwards

;
}
@keyframes

modal-fade {
0%

{
opacity

:

0

;
}
100%

{
opacity

:

1

;
}
}
@keyframes

modal-slide-down {
0%

{
transform

:

translateY(

-1000px

)

;
}
100%

{
transform

:

translateY(

0px

)

;
}
}
/* Popup message content*/
.ads-blocked-popup-img

{
width

:

150px

;
height

:

150px

;
overflow

:

hidden

;
}
.ads-blocked-popup-img>

img {
width

:

100%

;
height

:

100%

;
object-fit

:

fill;
object-position

:

center

center

;
}
.ads-blocked-popup-title{
font-size

:

35px

;
font-weight

:

bolder

;
text-align

:

center

;
padding-bottom

:

1em

;
}
.ads-blocked-popup-description{
text-align

:

center

;
color

:

#252525

;
}

JavaScript

lastly, here is the JavaScript file script named script.js that contains the codes for detecting the Ad-Blocker when browsing the website. This file is also included or loaded in the index page file script.

/** AdBlock Popup Message Selector */
const

AdBlockMessage =

document.getElementById

(

'add-blocker-popup'

)
/** Page Wrapper Selector */
const

pageWrapper =

document.getElementById

(

'wrapper'

)
/* Function for Showing AdBlock Popup Message */
const

showAdBlockMessage =

(

)

=>

{
if

(

!

AdBlockMessage.classList

.contains

(

'show'

)

)
AdBlockMessage.classList

.add

(

'show'

)

;
}
/** Sample Ad field */
var

AdEl =

document.createElement

(

'ins'

)
AdEl.classList

.add

(

'adsbygoogle'

)
AdEl.innerText

=

`Sample Ad Field`;
pageWrapper.appendChild

(

AdEl)
/** Trigger AdBlocked Popup Message */
/** Loop All the Adblock elements if your ad fields elements are multiple */
const

isAdBlocked =

window.getComputedStyle

(

AdEl)

.getPropertyValue

(

'display'

)
if

(

isAdBlocked ==

'none'

)

{
showAdBlockMessage(

)
}

Snapshots

Here are the web page result snapshots using the provided scripts above:

Ad-Blocker is Enabled on the Browser

Ad-Blocker is Disabled on the Browser

DEMO

There you go! I have also provided the complete source code zip file on this site and it is free to download. The download button is located below this tutorial's content. Feel free to download and modify the source code the way you wanted.

That's it! I hope this Detecting Ad-Blocker using JavaScript Tutorial will help you with what you are looking for and will be useful for your current and future web application projects.

Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding =)

Download

You must upgrade your account or reply in the thread to view hidden text.

Detecting Ad-Blocker using JavaScript Tutorial

More options

Far

449,193

322,229

322,238