How to Detect Ad Blocker for Google Adsense Using Javascript

These day’s everyone is moving to blogging and monetizing a blog is much necessary to everyone. But lot’s of users using Ad Blocker extension / script to block Google Adsense Ads. So Ad blocker detector script will help you here to boost your adsense earnings. Yes that’s a big reason to worry “How ship will steel into Sky ?” 🙂 Hmm! Didn’t get it. Yes lot’s of bloggers of webmasters are thinking they can’t get victory on Ad Blockers. But I personally want to tell them this time is not to be worry about these silly things. Here is a javascript client side script is ready which will help you to win on Ad Blocker Script. So first here we have to know what is Google Adsense Ad Blocker and How it works on user side.

What is Ad Blocker ?

Ad Blocker are some programs which used in every web client like Google Chrome, Mozilla Firefox and Opera Mini. These are used as extensions, add On’s and Modules in a web browser. As Google adsense always shows ads in an iframe and Ad Blocker remove these iframes and hide them from fetching / executing in web page.

How Ad Blocker Works ?

So as we know every web page made from 3 things, which are JavaScript, HTML and CSS. So what ad blocker do here “Ad Blocker Made an Whole which is ever know mystery of Bermuda Triangle” 🙂 Hmm! What is this Rahul ? Yes they really do something like this Ad Blocker Programs use some JavaScript code and remove ads iframe from your website and it seems like and empty hole / ad block in the web page.

[BUTTON url=”http://www.infotheme.in/blog/demo/js/ad-blocker-detector/”]See Live Demo[/BUTTON]

[BUTTON url=”http://www.infotheme.in/blog/wp-content/uploads/2017/06/ad-blocker-detector-downloadable.zip”]Download Now[/BUTTON]

How to Prevent Ad Blocker ?

So as you know guys you are publisher of biggest and largest ad network of the world where lot’s of publisher and advertiser participating to make it much better then before at the same time some silly programs made you hurt and try to stop monetizing for your awesome content. So guys as i am a part time blogger and really I can feel your pain which hurt you, yes every effort of each blogger is something like buy a sweet home at moon by their Google Adsense Earnings. It means everyone who is blogging and providing quality content yes he / she want some money from that and cause of ad blocker they loss their money.

So here what We all blogger want, We want a Google Adsense Ad Blocker Detector Script which will help them to Grow their Online Business, Yes initially Adsense Earning is really a best way to grow in the industry. Now here I am going to introduce a Self made JavaScript code which will help you to detect ad blocker and request to your awesome users to just turn off the Ad Blocker for their website.

Make Ad Blocker Detector Script

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" onerror="adBlockerDetection();"></script>
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-XXXXXXXXXXXXX"
data-ad-slot="XXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

So here in this entire code I have included and attribute which is onerror, with this attribute we will detect ad blocker is blocking our ads and it will run the function named as adBlockerDetection(); , As you know it’s a Google Adsense Ad Code and you have to enter onerror=”adBlockerDetection();” in your adsense code as I have mentioned above.

Google Ad Blocker Detector Javascript Function

Here I am using a simple JavaScript code which will really help you to request you users to turn off the ad blocker. Here a beautiful modal will appear and inform to your users about ad blocker. This solution is made for every Blogging Platform / CMS such as Blogger and WordPress. which supports JavaScript / CSS / HTML. This Javscript Function will help you to track ad blocker which is a perfect solution for ad blocker detector script. Here are some part of this code.

How to Track Google Ad Blocker with Google Analytics

So with below given code we will learn how to send ad block report to google analytics, Means here we will capture / trek how much ad were blocked by Ad Blocker on user side.

<script type="text/javacript">

//Trek Ad Block Report to Google Analytics
setTimeout(function() {
ga('send', 'event', 'Blocker', 'click','Blocker');
},2000);
//End Ad Block Trek Code Google Analytics

</script>

After sending request to ad blocker now we will show a beautifully designed UI Modal to inform user about ad blocker.

Detection of Ad Blocker Script

In below given code we will show user an information that he / she is using ad blocker and why ad blocker is important you to survive into industry and we will also request them to kindly turn off the ad blocker to continue on your website.

<script type="text/javascript">
//Show Model to Use that you have detected Ad Blocker
var adblock_detector_container = document.createElement('div');
adblock_detector_container.setAttribute('id', 'adblock_detector');
adblock_detector_container.innerHTML ='<div class="adblock_detector_inner"><a href="javascrip:void(0)" class="adblock_detector_cls_btn" onclick="adblock_detector_container_close();">X</a><div class="adblock_detector_content"><h2>We have Detected an Ad Block</h2> <p>We have detected an Ad Blocker! Please turn off it and Help us to Grow into the Industry! <a href="#HERE WILL COME LINK OF INFORMATIONAL WEB PAGE, WHY YOU ARE SERVING AD#">Why I have to Turn Off Ad Blocker</a></p></div></div>';
	document.body.appendChild(adblock_detector_container);
</script>

Implementation of Ad Blocker Detector Script

So after creating this code now it’s time to implement entire Ad blocker detector code into your website / blog. Where you will inform your users about ad blocking, so that they can help you to monetize your website from Google Adsense. Download the Full Source Code from Previously given download source. And Upload adBlockerDetector.css and adBlockerDetector.js file to your websites assets folder and link them into your webpage. something like below.

<html>

<head>

<link rel="stylesheet" href="link_to_file/adBlockerDetector.css" type="text/css"/>
<!--AD BLOCKER DETECTOR SCRIPT AD HERE-> 
<script type="text/javascript" src="link_to_file/adBlockerDetector.js"></script> 
</head>

<body>

<div class="contentDiv">

<!--your google adsense ad code-->

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" onerror="adBlockerDetection();"></script>
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-XXXXXXXXXXXXX"
data-ad-slot="XXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<!--Here will come your content. -->

</div>

<!--Your Google Analytics Script-->


</body>

</html>

Full Code Ad Blocker Detector Script

<script type="text/javascript">
function adBlockerDetection()
{
//Trek Ad Block Report to Google Analytics
setTimeout(function() {
ga('send', 'event', 'Blocker', 'click','Blocker');
},2000);
//End Ad Block Trek Code Google Analytics

function adBlockerDetection()
{
	// Trek Ad Block Report to Google Analytics
	setTimeout(function() {
		ga('send', 'event', 'Blocker', 'click','Blocker');
	},2000);
	// End Ad Block Trek Code Google Analytics
	 
	//Show Model to Use that you have detected Ad Blocker
	var adblock_detector_container = document.createElement('div');
	adblock_detector_container.setAttribute('id', 'adblock_detector');
	adblock_detector_container.innerHTML ='<div class="adblock_detector_inner"><a href="javascrip:void(0)" class="adblock_detector_cls_btn" onclick="adblock_detector_container_close();">X</a><div class="adblock_detector_content"><h2>We have Detected an Ad Block</h2> <p>We have detected an Ad Blocker! Please turn off it and Help us to Grow into the Industry! <a href="#HERE WILL COME LINK OF INFORMATIONAL WEB PAGE, WHY YOU ARE SERVING AD#">Why I have to Turn Off Ad Blocker</a></p></div></div>';
	document.body.appendChild(adblock_detector_container);
	//End Ad Blocker Detector Code
}

function adblock_detector_container_close(){
	document.getElementById('adblock_detector').style.display="none";
}

</script>

Conclusion : Ad Block Detector Script

So here in this entire article I have tried to provide you a best piece of Google Adsense Ad blocker Detector Code / Script which is helpful to all bloggers and website owners. If you guys are just copying the code from here so i suggest don’t do this just download the source code where is css file included and without css file it will not look really pretty. So Download the Code and Follow steps of Google Adsense Ad Blocker Detector Script implementation into your website / web page. Thanks a lot to you to reaching out here. I will definitely come back with something interesting for you very soon. If you liked this post so give me a (y) over my facebook page, My facebook page link is right side at top-middle of the website. Please Don’t forget to share this article with your friends.