How to Show a Popup Message if Google Ad Manager Tags are Blocked with Adblock Style Extensions

Website with ads - adblock checker

As an advertiser, you rely on Google Ad Manager (GPT) tags to display your ads to your target audience. However, some users may use adblock style extensions, which can prevent your ads from being displayed. This can be a frustrating experience for both you and your audience.

Fortunately, there is a way to detect if your GPT tags are being blocked by adblock style extensions and show a popup message to your audience. In this article, we will show you how to create and set up this feature on your website.

This adblock checker is made specifically for websites that use Google Ad Manager (GPT) tags to display their ads. It has been tested with the latest version of AdBlock extension (Version 5.4.1) for Chrome and AdBlocker Ultimate (Version 3.7.21) for Firefox.

Step 1: Create a div Element in Your HTML

The first step is to create a div element in your HTML where you want to display the popup message. You can customize the message to suit your needs. For example:

<div id="adblock-popup">
  <p>It looks like you're using an ad blocker. Please disable it to see our content.</p>
</div>

Step 2: Add CSS to Style the Popup Message

Next, you need to add some CSS to style the popup message. Here’s an example:

#adblock-popup {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #f44336;
  color: #fff;
  padding: 10px;
  text-align: center;
  display: none;
}

This will position the popup message at the bottom of the page and style it with a red background color and white text.

Step 3: Add JavaScript Code to Detect Adblock Style Extensions

Copy and paste the following JavaScript code after the googletag definition in the <BODY> section:

<script type="text/javascript">
var __genecycomAdblockCheckerGPTStarted = false;

function genecycomShowAdblockPopup() {
	document.getElementById('adblock-popup').style.display = 'block';
}

function genecycomAdblockCheckerGPT() {
	if (__genecycomAdblockCheckerGPTStarted) {
		return;
	}
	__genecycomAdblockCheckerGPTStarted = true;
	let isAdBlockerEnabled = true;

	if (typeof googletag.pubads !== 'function') {
		genecycomShowAdblockPopup();
		return;
	}

	var adBlockCheckExt_slotRequested = function() {
		googletag.pubads().removeEventListener('slotRequested', adBlockCheckExt_slotRequested);
		setTimeout(function() {
				if (isAdBlockerEnabled) {
					genecycomShowAdblockPopup();
				}
			}, 700);
	};
	var adBlockCheckExt_slotResponseReceived = function() {
		googletag.pubads().removeEventListener('slotResponseReceived', adBlockCheckExt_slotResponseReceived);
		isAdBlockerEnabled = false;
	};

	googletag.pubads().addEventListener('slotRequested', adBlockCheckExt_slotRequested);
	googletag.pubads().addEventListener('slotResponseReceived', adBlockCheckExt_slotResponseReceived);
}

function genecycomAdblockCheckerElem() {
	window.setTimeout(function() {
			if (typeof window.googletag === 'undefined') {
				genecycomShowAdblockPopup();
				return;
			}
			window.googletag = window.googletag || {};
			window.googletag.cmd = window.googletag.cmd || [];
			window.googletag.cmd.push(function() {
				genecycomAdblockCheckerGPT();
			});
			setTimeout(function() {
					if (!__genecycomAdblockCheckerGPTStarted) {
						genecycomAdblockCheckerGPT();
					}
				}, 1000);
		}, 300);
}

genecycomAdblockCheckerElem();
</script>

This code will check if an adblocker is enabled and display the popup message if it is. It works by listening to the GPT events ‘slotRequested‘ and ‘slotResponseReceived‘ to determine if an ad is being blocked. If an ad is blocked, the popup message will be displayed.

Step 4: Customize the Popup Message and Add Any Necessary Functionality

Finally, you can customize the popup message to your liking and add any necessary additional functionality. For example, you may want to include a button that links to a page that explains why you rely on ads to provide free content or how to disable adblockers.

Conclusion

By following these steps, you can detect if your GPT tags are being blocked by adblock style extensions and show a popup message to your audience. This will help you ensure that your ads are being seen by your target audience and improve your overall advertising effectiveness. Remember to place the JavaScript code in the <BODY> section, after the googletag definition. If you need help with custom creative templates for Google Ad Manager, visit our website at genecy.com.